在Figma中，组、框架和组件之间的区别令人难以想象。组合有助于保持文件整洁，更重要的是，可以创建按钮、瓷砖或整个页面等结构。Figma允许以各种方式对事物进行分组，一开始可能会让人感到困惑、令人生畏，几乎是多余的。让我们看看组与框架之间的区别，以及组件是如何融入其中的。让我们谈谈项目文件本身的信息架构。 ## 群组

最基本的元素分组方式就是使用群组。一个群组的大小正好是其可见元素的总和。它不能变得更大或更小。调整大小会导致内部对象随之缩放。群组只能接收位置、尺寸、混合模式和不透明度这些属性；修改填充、描边或效果会影响到所有内部对象。

普通框架

框架比群组更高级。它们可以独立存在，可以自由调整大小，并分配与任何矩形矢量相同的属性。当调整框架大小时，框架内部的对象行为取决于每个对象的单独约束。举个例子，想象一下，您可以强制对象随框架一起拉伸，或者粘在框架的边缘或中心。这些设置分别应用于垂直和水平轴。

默认约束（左）与设置约束之间的区别 自定义对象（右侧）。

您可以将设置应用于框架并使内部对象以某种方式运作，这是对群组的巨大改进。想象一下，您试图构建一个简单的白色文本按钮，背景为蓝色。您可以创建一个矩形向量，将文本对象放在顶部，并将它们都放在一个群组中。如果您在框架中这样做，您只需将一个文本对象放在框架内，而不需要向量。

自动布局框架

自动布局框架是Figma相对较新的功能。它们可以自由调整大小，并分配填充、描边或效果等属性。与常规框架非常不同的是，它们处理内部对象的方式 — 对象不能放在彼此上面，它们之间的间距必须是均匀的，并且它们只能放在一行或一列中（因此除非您嵌套框架，否则不能有多行或多列的对象）。

处理对象的不同方式 使用水平和垂直自动布局框。

自动布局框可以在没有任何对象的情况下存在，它们的主要目的是自动分发它们包含的对象，无论是水平还是垂直。如果你想了解更多，请查看我的Figma自动布局框文章 (opens new window)。

常规布局框与自动布局框之间的选择取决于您想要实现的效果。我认为，如果您正在设计任何布局，十有八九应该选择自动布局。正确设置的自动布局组将在您更改内部对象的内容或尺寸时自动调整大小，并始终确保所有填充和间距都漂亮均匀，而无需用老式方法进行任何测量（是的，我知道你正在用那个矩形做什么。）唯一一个自动布局会带来更多麻烦而不是好处的情况是框架。 组件

组件是帧，当复制时，会生成实例（或子级），而不是副本。这意味着当您返回到主组件或父组件并更改其属性或内容时，将影响所有子级的属性和内容。您可以将任何对象或一组对象转换为组件。当单个对象或一组对象转换为组件时，它们被放置在一个框内，该框的大小与其中所有对象的大小相同。当将组转换为组件时，它会自动转换为一个框。由于组件是框架，无论是常规框架还是自动布局框架，我所说的关于常规或自动布局框架的一切也适用于它们。

何时创建组件？每当您要在许多地方使用相同的对象或相同的一组对象时。 不同的地方。您应始终从小处开始，并记住嵌套组件，有时将它们放在一起以创建更大的组件是一种方法。这完全取决于您是否将在许多更大的组件中使用较小的组件。

查看我的关于在Figma中创建简单，可重用设计系统的文章 (opens new window)以了解更多关于如何利用组件的信息。

建立联系

个人而言，我从不使用组合来移动一堆元素，只是为了快速解组或将一些暂时的垃圾元素组合在一起，以防丢失。您如何使用这些工具完全取决于您，取决于许多因素，例如项目的大小和您想要实现的目标。我建议坚持使用框架，因为它们应该为您提供最大的灵活性。您可以独立调整它们的大小而不影响内部对象，可以添加填充，使用不同 在Figma中，布局设置有不同类型。无论如何，值得探索Figma提供的所有可用选项，以便决定哪种最适合您的用例。