和React中组件化的思想一致，Figma 将 UI 拆分成许多小的有机体，这些有机体尤其指那些承担了交互任务、会重复出现的内容，例如：按钮、表单、表格，以及一些无形的样式、配色等。Figma 的思想是，重复的东西我们只要在最初创造一遍就够了，然后我们就可以在界面中无限复制它。
当我们希望改变某个组件时，只需修改 master component，所有的 instances 都会同步改变，但只修改某个 instance 是不会给 master component 带来改变的，这不同于ps中的智能对象。
这种模式给使用者带来了极大的便利。
create an component 创建组件
component 的图标是四个小菱形。
可以从任何对象或图层集合中创建一个 Component。可以是简单的按钮或字段，或更复杂的设计，如菜单。创建方法（先创建，再转化成组件）：
- 选中某个图层集，点击顶部菜单 create component 按钮（四个小菱形）
- 右键点击某个图层集，弹出菜单中点击 create component
- 快捷键：Ctrl + Alt + K
所有组件都可在Assets中查看。
create an instance 创建实例
instance 的图标是一个菱形。创建方法：
- 快捷键：Ctrl + D
- Alt + 拖拽 component
- Ctrl + C ⇒ Ctrl + V
通过 instance 找到 component：
- 选中 instance 后，在 asset 中，找到对应的图片，点击即回到 master component。
- 右键点击instance，弹出菜单中选择 go to master component
Swapping Instances 替换实例
在希望用一个 instance 替换另一个时，使用右侧属性面板，找到 instance 部分的下拉菜单，选择替换者实例的名称，点击后完成替换。
为简化替换，可借助用 “/” 命名的方式将组件分组，例如：Button/Plan、Button/Login 等，在替换时，这两个组件都会显示在名为 Button 的目录下。
Override Components 覆盖组件
对 instances 的修改称为 override。这在我们想要创建一个现有组件的变体时非常有用，例如：登录按钮和注册按钮。
注意：有关组件布局的属性是无法修改的，例如：组件内部元素的位置、大小、角度、图层顺序等。
修改可以随时通过上方菜单的 reset instance 按钮重新和 component 保持同步。也可以通过右键菜单的 reset instance只同步部分属性。
Detach an Instance 分离实例
将某个 instance 和 component 分离。instance将嵌套在常规的 Frame 中，和 component没有任何关系。
方法：
- 右侧属性面板 instance 部分下拉菜单，选择第一项 Detach instance
- 右键菜单选择 Detach instance
- 快捷键：Ctrl + Alt + B
References：
Figma-Components
网友评论