为什么要制作组件库？

很多设计师认为组件库和设计规范好像是差不多的东西，只需要有一份设计规范就够了，为什么还要花费心思去学怎么制作组件库？

组件库和设计规范都属于设计系统的一部分，两者之间有交叉，但是并不能相互替代。组件库便于使用，而设计规范一般具备比较详细的使用说明；除了设计规范里的内容外，产品内一些通用的部分也可以被收入组件库。

制作组件库有什么好处呢？

保证设计一致：在没有组件库的时候，设计师一般通过设计规范来约束设计，但是这样做有它的局限，容易因为设计师个人偏好或是不够细致导致错漏。

提升协作效率：在没有组件库的时候，设计师之间的协作往往是靠互相传递最新的设计稿，低效。

方便后期维护：在没有组件库的时候，一旦有个组件的样式进行了更新，之前用到的所有设计稿都需要找出来更新一遍；而如果不更新，一旦复用了旧的设计稿又会出现问题。

因此，制作组件不论是对一个正在发展的产品还是出于成熟期的产品来说，都是非常重要的。

制作组件库的步骤：

第一步：梳理结构_

1）对产品中的页面进行拆分，拆分成不同的组件，并对相同的组件进行分类。

2）按照Android/iOS两个系统的规范、开发/设计复用模块、app设计规范为指导思想进行框架结构的搭建

3）将以上梳理的组件按照次序排列，这里我比较推荐的次序有：按照使用频率排序（频率越高的放前面）、按照类型排序（结构型组件放前面）、或者可以按照搭建页面时的心智模型（比如组件在页面中的顺序）

第二步：将组件进行原子化拆分（这里介绍两种不同的组件库构建思路）_

1）通过穷举法制作组件

穷举法，即你的组件有多少种不同的状态就建立多少个symbol。这个方法是非常不推荐的，但是每个制作组件库的新手一般都会踩到这个坑（我自己也踩过）。这种方式不仅制作起来工作量比较大，而且不方便后期维护，一旦框架有所变动，所有的组件都需要进行调整。并且对于使用者来说也比较繁琐，需要在n个列表中找到自己想要的一个。

2）通过原子理论制作组件

在化学中，所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。对代码世界也是一样的，所有的页面都可以被抽离成由一系列最小元素构成。2013年前端工程师 Brad Forst 将此理论运用在界面设计中，形成一套设计系统，包含5个层面：原子、分子、组织、模板、页面。

根据原子理论，一个组件的不同状态其实是可以拆分成由不同的原子组成，因此在制作组件库时只需要制作一个分子体，再将可变动的部分制作成一系列原子，在使用时将这个可变动的部分替换为不同的原子，就可以形成这一个组件的不同状态。

通过原子理论制作的组件调整起来更为灵活便宜，但是需要设计者在初始时就将组件进行拆分结构。并且需要注意的是，拆分并不是永无止境的，最好不要超过4个层级。

第三步：设置组件_

终于开始真正动手制作组件了，其实制作组件反而是最容易的。一个组件的不同状态摆开，就可以看到这个组件中共性的部分是什么，可以拆分到多细致。

制作普通组件：以对话框为例

1）将对话框分为内容+左右按钮三个部分，每个部分分别制作成symbol。

2）根据定好的结构进行组件的命名，这样就可以在组件库中按照顺序排列。

sketch最方便的地方就是可以制作自适应组件。制作自适应组件的过程也非常简单，只需要在创建为symbol时选择布局方式即可。

但是我在实际应用过程中发现sketch的自适应组件还是有一些局限的，在一行内有多个原子的情况下容易出问题。

其他_

在设置组件库时可以同时设置色班和图层样式，这样只要导入这个组件库，也可以一键获取到它的色板和图层样式，非常方便。

如何使用组件库？

在首选项中导入组件库，在左侧面板或+号选择某个组件插入到页面，在右侧菜单栏里更改组件内容。如果组件库有更新的话可以在右上角获取更新的通知，一键更新到最新版。

最后，还有一些曾经踩过的坑可以和大家分享：

团队成员务必保持mac系统版本和sketch版本一致，否则可能会出现许多意想不到的错误。

在动手制作组件库之前先梳理好框架，拆分好原子，否则在组件库更新后重新恢复会比较麻烦。

组件库并不是永远不变的，它会随着业务的变化、设计的迭代更新而不断变化。随着业务的发展会有很多新的组件需要被纳入组件库，随着设计的迭代更新，组件库也需要进行更新。

Powered by Froala Editor