一、 组件（Component）的定义与核心价值 #
1. 定义 #
- 组件（Component）是将一个或多个图层进行组件化，并实现批量复用的功能。
- 设计师可以对任何数量的图层或创建出的任何东西进行组件化处理。
2. 核心价值：批量编辑与效率提升 #
- 问题： 如果不对搜索框这类元素进行组件化，当它在多个页面中被复制引用时，若需要修改（例如统一改成大圆角），设计师必须一个个去编辑，这会变得非常麻烦和痛苦。
- 解决方案： 通过创建组件，可以实现对元素的批量编辑、批量调整和批量管理。
- 结果： 整个项目中有大量重复复用的元素时，将其创建成组件后，大家可以一起编辑，从而大大提升效率。
二、 组件的应用逻辑：原始组件与子组件 #
组件的使用逻辑包含两个核心部分：原始组件（或称母组件/父级组件） 和 子组件（或称指组件）。
1. 原始组件（Master Component） #
- 作用： 原始组件用于确定图层和布局。
- 确定内容： 原始组件定义了元素的摆放位置、图层内容以及自动布局（Auto Layout） 和 约束（Constraints） 功能的应用。
- 标识： 原始组件在左上角会有一个实心的图标。
- 关系： 对原始组件做出的调整，其下级子元素（子组件）会一起发生变化。
- 继承性： 原始组件中应用的自动布局和约束功能可以被继承到子组件中。这意味着设计师在创建组件时，即使不确定组件的最终宽度，只要添加了自动布局或约束，后续在应用子组件时可以直接拉长调整宽度。
2. 子组件（Instance Component） #
- 作用： 子组件可以对原始组件的样式和内容进行单独调节。
- 可单独修改内容： 子组件可以独立修改文本内容（如将“搜索”改成“搜索作品”）、颜色填充、图片、文本和色彩等信息。
- 不影响父级： 子组件的修改是临时的，它不会影响原始组件的图层，原始组件的布局关系也不会被子组件的修改所改变。
- 修改优先级： 如果子组件做过自定义调整（如颜色修改），当原始组件的非布局属性（如颜色）被修改时，子组件的自定义调整会保留下来，不会被父级修改所覆盖。
三、 组件的管理与解组操作 #
1. 解除组件（Detach） #
- 子组件解组： 可以对单个子组件进行解组操作，在右键菜单或右上角的选项中选择
Detach即可。 - 原始组件解组限制（重点）： Figma 不允许直接对原始组件进行解组操作。
- 原因： 原始组件可能被大量引用，如果删除，可能导致引用的子组件出错。
- 解决方案： 如果需要修改原始组件并重新创建，正确的操作是：复制一份原始组件，解组这个新的副本，编辑完成后再重新创建为一个新的组件。
2. 组件查找与资源库（Assets）管理 #
- 快速查找原始组件： 在子组件上右键点击
Go to main component（或类似名称），即可跳转到对应的原始组件所在的位置。 - 资源库（Assets）： 可以通过左侧的
Assets面板来查找和管理项目中所有创建过的组件。- 分类结构： Assets 中的组件列表是根据 **Page（页面）**来分类的。例如，如果设计师创建了一个“APP 项目”的 Page，那么该 Page 下创建的所有组件就会显示在相应的目录中。
- 多库管理： Assets 面板首先会进入
All Library，显示所有引用的组件库，例如 iOS 或其他导入的组件库。
- 快速替换： 在右侧属性面板上方的特殊操作区，有一个功能可以对组件进行快速替换，将其替换成其他已有的组件。但来源指出，这个功能在实际项目中不常使用。
四、 组件与规范设置的关联 #
- 样式继承： 组件可以引用并继承**样式（Style）**中的颜色属性。
- 继承自动布局和约束： 这是组件功能强大之处，意味着组件在创建时可以继承复杂的适配和布局逻辑。
最后一次修改于 2025-11-21