Fimga 提供了组件 Component功能，可以将一个或多个图层组件化后进行复用。组件功能对UI的项目设计至关重要，可以帮助设计师用组件化的思路快速搭建界面并实现批量修改，大大提升界面设计的效率和视觉的一致性。

组件的基本认识

学会组件的使用就要先了解组件功能的基本原理，即创建原始组件后，以它为基础生成多个子组件进行统一的管理。

原始组件有且只能有一个，而它复制出来的子组件却可以有无数个。子组件会继承原始组件的图层内容和布局版式，而图层的样式、文本内容则可以独立修改。

所以当原始组件进行布局、属性的调节时，所有子组件也会统一修改。而每个子组件却可以单独编辑下级图层的颜色、文本等内容。

组件的创建和删除

组件的创建非常简单，只要选中相应的层，然后点击属性面板中的按钮或右键选项“ Create Component” 即可创建，创建后的原始组件会在图层列表生成一个紫色的编组层。

创建的原始组件会保留在原地，同时会在界面左侧的 Assets内生成对应条目。我们可以从Assets拖拽组件到画布中生成子组件，也可以直接复制原始组件或子组件，生成新的子组件。

原始组件和子组件样式相同，且都有紫色的描边，区分它们的主要方法是看内容布局是否可以变更，或查看图层列表中的组件编组图标，原始组件是四个菱形组成的图标，而子组件则是一个菱形图标。

在原始组件和子组件中，子组件可以在属性面板中点击 Detach instance移除组件状态，恢复为一般图层状态，而原始组件无法恢复成普通组件。

所以在Figma中，如果想要在移除原始组件的组件状态进行编辑，只能复制一个子组件进行解除。如果原组件没用，则可以进行删除。删除的方式就是直接选中原始组件进行删除即可。

原始组件必须放置在文件内的某个位置，当我们在应用子组件时，往往想要编辑原始组件又找不到它在哪里，这时候就可以在子组件属性面板中点击跳转到原始组件的按钮，定位到原始组件。

组件与自动布局的结合

如果创建组件之前，选中的图层包含自动布局的相关设置，折这些布局的设置会被继承到子组件中。比如原始组件创建了一个自动布局标签，在子组件中修改内容文字，则标签宽度也会自动变更。

如果原始组件中的元素使用了自动布局的 Fill Container，让这些元素进行尺寸的响应，那么子组件也可以拖拽修改宽度，实现预想的布局结果。

子组件会进行什么样的布局适配，需要提前考虑清楚后进行设置，再创建成组件。而不要在创建完组件且复制子组件以后，修改原始组件的自动布局设置，会引发各种错误。

组件与样式的结合

在创建组件的过程中，如果图层属性添加过样式，则这些样式设置也会继承到子组件中。

同时，我们还可以在子组件中展开样式面板，对关联的样式进行更换。比如一个按钮组件，创建时使用了小标题和主色，我们可以在子组件中切换成正文和辅助色。

组件和样式的组合，可以极大的提升界面设计的效率。但同理，需要再创建组件前确定样式的引用，才不会产生错误。因此建议在整个项目设计过程中，先完成样式的定义，再创建组件，尽量避免两部分工作并行。

组件的相互嵌套

组件也可以相互嵌套，即一个组件下级还包含其它组件。比如一个复杂组件下级包含按钮、图标、标签等元素，这些元素会在页面中大量使用，而不仅仅是这个复杂组件的组成部分。

所以我们往往会提前先将这些会复用的元素创建成组件，然后再选中整个组杂组件的所有图层，创建一个更高级的组件。

在这个创建过程中，Figma遵守一个原则，就是这个复杂原始组件的下级元素只能是其他原始组件的子组件。所以如果在选中的图层里包含了原始组件，则创建成复杂组件时，这些原始组件会被移到复杂组件的画板外，且在原位替换成一个对应的子组件。

在这类嵌套子组件中，可以选中子组件的下级组件，在右侧的属性面板替换上方，可以点击展开组件列表并替换组件。可以应用在替换按钮、图标、横栏等场景中。

组件的灵活使用可以极大得减少设计操作的步骤，提升界面设计的效率。但并不是组件用的越多，嵌套的层级越复杂就越有效。如何运用组件，除了熟练掌握软件功能以外，还需要通过对使用场景的分析和实践经验的积累做判断。