Sketch 基础组件库文件制作逻辑及推荐工具

一年多以前写了一篇关于如何制作Sketch组件库-Web基础组件篇 的文章，当时的浏览量其实并没有那么多，我认为一部分原因是当时很多设计团队都还在使用 PS 的阶段，并没有转到 Sketch 上，另外一部分原因是一年多之前很多设计师还是在 toC 的公司做 app 设计，对于做 web 组件库这件事情并不感兴趣，很多对这篇文章感兴趣的都是在 toB 的公司做 UI 设计的设计师们。随着这一年  toB 产品的发展，越来越多的设计师加入了 toB 产品的设计中，除了做数据分析监测产品的公司之外，包含物联网、企业协作工具、管理后台产品等，都涉及到很庞大的功能框架逻辑和产品体系，这时候大家对于组件库的关注度就越来越高。

有很多设计师朋友询问我关于组件库设计的问题，这篇文章主要就针对因为组件库制作逻辑的不同而在实际应用中出现的问题做一个说明，并且分享几个团队协作以及使用率比较高的 Sketch 插件，希望大家能从这篇文章中得到一些灵感和启发。

Sketch 组件库的制作逻辑？

1、使用图层样式做组件库（Sketch需要升级到5.2以上）

将组件的各种样式制作成样式库，使用组件的时候直接替换形状层的样式。

相关组件库参考：

https://github.com/Shopify/polaris-react/releases/download/v3.7.1/Sketch.UI.Kit.zip

优点：

1、没有复杂的组件嵌套规则，对于组件逻辑理解不是很强的设计师学习成本比较低。

2、在后期使用 Sketch measure 导出标注文件的时候，不会存在状态层叠加到形状层时前端工程师无法查看底部形状样式的问题。

缺点：逻辑性不是很强，为单独的组件做形状样式无法体现全局的组件状态规则。

2、使用嵌套组件制作组件库

将组件的颜色、形状、状态都制作成组件，使用组件嵌套的方式制作组件库

相关组件库参考：

https://material.io/tools/https://material.io/tools/

优点：组件库的逻辑比较清晰，颜色和状态都是全局逻辑，更改了全局配色和组件状态的时候应用到相关配色和状态的组件会全部更改。

缺点：

1、设计师理解成本比较高。

2、在后期使用 Sketch measure 导出标注文件的时候，会存在状态层叠加到形状层前端工程师无法查看底部形状样式的问题。

如何同步 Sketch 组件库

推荐大家使用语雀来同步 Sketch 组件库以及同步设计文档，具体使用方式点击查看文档说明，有了它，可以直接在 Sketch 中一键上传下载组件库，还可以同步 Iconfont 项目中的 icon ，直接在设计稿中调用。

推荐安装的 Sketch 插接

1、Sketch Measure 标注、切图工具

2、Kitchen 一款为设计者提升工作效率的 Sketch 工具集

3、Design Systems 可帮助您找到流行的设计系统并下载官方Sketch UI工具包。

4、Automate-Sketch  功能扩展插件合集

5、merge-duplicate-symbols   用于合并具有相同名称的符号。