Day 24. 打造可重覆使用的设计－Figma 的 Component 元件解析

在一个网站中，常常会在不同的页面之间看到许多相同共用的元素，比如说按钮、导览列。而在同一个网页中，也经常会看到有些一再重覆出现的元素，比如说卡片、列表等。

我们在设计这些元素的时候，需要尽可能确保一致性 (例如在首页的按钮跟在内页的按钮颜色、框线应该要一致)。另一方面，设计师在修改这些分散在不同页面上的元素其实不太有效率且容易出错，Figma 内建了一个好用的功能－ Component ，正是为了解决这个问题。

如何设转换成 Component

首先设计好一个按钮，然後将此按钮如下做成一个 component。(观察一下左方的 Layer 面版，此时这个已经被转换成 Component 的元件在图层的 icon，会变成四个实心菱形，这代表它是 "Main Component")

接着我们可以拉出 Instance 重覆使用，有二种方式可以做到：

(1) 直接在画板上从刚做好的 Main Component，按着 Alt 键复制一份出来

(2) 从 Assets 面版中拉出刚做好的 Component

Instance 与 Main Component 的关系

首先，如何辨别呢？看左户的图层面板 Instance 的 icon 是一个空心菱形，与 Main Component 不同。

Instance 是源自 Main Component的，打个比方说明，Instance 就像是分身，而 Main Component 则是本尊，所以当一但修改了 Main Component 内部的任何物件/属性，所有 Instance 就会随之变化

Instance 的 Overwrite 特性

我们对每个 Instances 做不同的改变，然後来观察 Main Component 对他们还有没有约束性。

Instance 1：修改按钮圆角

Instance 2：修改按钮底色

Instance 3：修改按钮底色及文字颜色

此时会发现，当 Instance 有覆写到的属性， Main Component 对他们不再有约束性，但对於没有覆写到的属性，Instance 还是会被 Main Component 影晌。

Instance 1：除了按钮圆角之外，其他都会随之影晌

Instance 2：除了按钮底色之外，其他都会随之影晌

Instance 3：除了按钮底色及文字颜色之外，其他都会随之影晌

Instance 如何切断、取代及重置

Figma 提供了很有弹性的机制让 instance 可以很方便的切断、取代及重置

(1) Reset：当改动了 Instance 之後发现改错了，但已经调整了许多属性，此时就可以用 Reset 重置回一开始 Main Component 预设的所有属性。 (上方也有快速键可快速 reset)

(2) Detach： 若想完全切断与 Main Component 的关系，则可以使用 Detach 与 Main Component 恩断意决，从此再无瓜葛。

(3) Push： 当改动的这个 instance，希望它能够取代成原本的 Main Component，则可以使用 Push overrides to main component

总结

Component 的好处有很多：

1. 设计的过程中，容易保持或检视一致性
2. 提高设计的效率 (善用 Main Component 及 Instance 的 overwrite 及 push 机制)
3. 配合整理 Design Guideline，可降低与工程师沟通的成本

大多数的 UI 设计工具，都着有类似此篇介绍的元件概念，像 Sketch 的 Symbol、Adobe XD 的 Component 都有着类似的机制，只是细节设计上有点不同。

这麽重要的功能，大家务必要学起来哦！

对了，用快速键可更节省时间、有效率

• 转换成 component：Cmd + option + K
• 从 instance 取消： Cmd + option + B