作者：ZYUN（20190401）
预计阅读时长：09m 18s（6707 字；17 图）

Sketch 相关插件和使用技巧

此设计系统是在 2018 年年底至 2019 年初期间创建完成的，当时所用的 Sketch 版本还比较旧。到现在为止，Sketch 已经更新了好几个版本，功能和插件都逐渐升级完善了。所以，我当时所用的方法可能已经不再适用了。（小小声说一句，让我们一起拥抱 Figma 吧哈哈！）
因此，下面仅对我使用过的部分工具、小技巧作简单的分享～

Anima ToolKit

Anima 可用于创建响应式的编组或画板。具体使用方法可在官网 Anima ToolKit 查看。

我在设计组件库的过程中，使用这个插件来创建所有需要支持响应式布局的组件。其中，大致有以下 3 种思路。

1）以 Message 为例。此组件要实现的效果是，Message 的宽度随着其中的文本标签的增长而自动增大，左右间距保持不变，图标尺寸及其距左边缘的间距保持不变。这里用到了 STACK 功能。

2）以按钮为例。此组件要实现的效果是，调用、覆写组件后，更改组件宽度，文本标签可进行自动缩放，并保持左右间距不变。这里用到了 PINS 功能。

以上两种方法的区别是：
Message 一般都是在整个页面中水平居中，所以我们可以为 symbol 设置一个最大宽度，Message 编组在其中居中并自动改变宽度。只要 symbol 在整个页面中居中，则 Message 是居中的。
按钮一般需要放置在页面中，与其他元素对齐或保持一定的间距，所以 symbol 容器的宽度必须与按钮编组的宽度一致，否则就量取不到按钮与其他元素的间距。

3）以 Table Toolbar 为例。此组件要实现的效果是，当我们删除某个按钮，其他按钮和元素会按原来的间距自动重新排列。这里用到了 stack 组的嵌套。

当然，还有其他很多的方法和插件可以完成相同或类似的功能，例如，Sketch 自带的编组缩放功能（Group Resizing）、插件 Relabel Button 等等。

Rename It

Rename It 可按不同的规则对图层、编组、画板等进行批量重命名，例如，加前缀、加后缀、加编号等等，具体使用方法可在官网 Rename It 查看。
这个工具在组件库的清查、整理过程中非常有用，我们可根据需要对 symbol 进行批量命名。

另外，复制模板页面进行数据填充后，或，需要对多个画板进行统一命名处理时，也可以使用这个插件。

Symbol Instance Renamer

Symbol Instance Renamer 可以让同一 symbol 的所有 instance 和它的 master 保持一致的命名，具体使用方法可参考 symbol-instance-renamer 。

我在 Sketch 中使用这个插件最多的场景是，调用 symbol 后，我经常会对它们进行替换（例如，保持大小位置不变替换成其他类型的 symbol 或同个类型其他状态的 symbol），替换之后，此 instance 还是会保持替换之前的命名，此时，就需要使用这个插件来更新其命名。
但通常，只在所有设计都完成，最后保存文件时进行一次操作即可。

Library 的共享

Sketch Library 的共享方法我在 Sketch Library 文件中已有详细说明。

利用 symbol 设置文档内跳转

这个技巧是在网络上一篇文章中学到的，必须感谢原作者哈哈，可惜找不到原文链接了。我将这个技巧用于文档中的更新日志页面，以便于快速跳转、定位至需求相应的画板。

图标交付

在创建设计系统之前，我通常使用 iconfont 的形式将图标交付给前端开发工程师，在这里顺便简单地分享一下～
Iconfont 其实就是把图标变成矢量字体，开发人员可根据需要灵活地更改字体图标的尺寸、颜色、方向等属性。众所周知，Font Awesome 是一套完全开源的免费字体图标库，我们可以直接将其中的图标应用到我们的项目中。如果是我们自己设计的图标，则可以通过以下方法将其转成字体图标。

阿里的 Iconfont 平台

我们可以在阿里的 Iconfont 平台上创建项目，在项目成员中添加相关开发人员，然后将 svg 图标上传至项目中，开发人员即可将相应的图标代码应用在页面中。具体使用方法可在帮助中心Iconfont-阿里巴巴矢量图标库中查看。
这种方法适用于长期、持续更新的项目。

IcoMoon

我们也可以将 svg 图标上传至 IcoMoon 平台，选择 Generate Font，然后将生成的文件交付给开发人员。这个方法非常便捷，但比较适合于短期、临时项目，因为我们上传的图标仅保存在我们个人的电脑浏览器中，一旦浏览器缓存被清除，所有内容都将被清空。

文档编写

Gitbook

我一开始打算在 GitBook 上编写我们设计系统的记录文档，因为 Gitbook 文档的菜单导航非常清晰，并且支持直接搜索内容关键词（只能定位到一级标题）。但由于 Gitbook 团队版需要付费使用，考虑到我们无法在 Gitbook 上进行团队协作，最后还是放弃了 Gitbook 哈哈哈。

语雀

语雀在团队协作方面则非常出色。我们可在语雀上创建设计系统的知识库，并将其分享给相关同事，或者邀请他们进行知识库协作，共同编写、维护设计系统内容。另外，还有团队、团队讨论区等功能。以下图片是我在语雀上的记录文档。

资源推荐

站点

Design Systems Repo 由 Jad Limcaco 创建，其中包含了设计系统相关的案例、文章、工具、演讲等内容，资源非常多非常全面。（超级棒！）
Design Systems 是 Figma 官方创建的网站，发布了很多设计系统相关的文章，包含设计、开发方法等等。
DesignSystem.cc 是我们国内的产品设计师 Jun 设计开发的网站，收集了设计系统相关的教程、文章、书籍和案例等内容。

工具

Zeroheight 可用于记录设计系统，包括创建在线 styleguide、管理组件代码、存放设计资源等等，而且可被设计师和开发者编辑和扩展。

书籍、文章

Brad Frost：《Atomic Design》，由 Brad Frost 提出的原子化设计理念，已经成为构建设计系统的核心指导理论。
Alla Kholmatova：《Design Systems》，作者 Alla Kholmatova 向我们介绍了设计体系的基础构成和创建方法等等。
C7210：设计体系相关文章是 UX 设计师 C7210 发布的一系列文章，包含设计体系、Sketch Library 功能等方面的内容。

其他更多资源可在《设计导航：设计体系 / 设计规范 / 组件库》中查看。

源文件下载

除了 Sketch UI 组件库、后台产品设计 Sketch 模板、交互自查表，文件夹中还包含了一份文案基础规范和一份 UI 元素状态的使用表，前者整理自 Ant Design，后者翻译、整理自 SAP Fiori Design。

写在最后

非常感谢以上提及的所有内容、资源的原作者和团队～感谢互联网儿～感谢 Google 搜索～

特别感谢 C7210 老师制作的 WireframeKit 组件库 和分享的一系列文章，我是在购买了这份组件库之后才开始了解、学习到使用 Sketch 创建组件库的方法的。（当时就是一种醍醐灌顶的感觉哈哈！比起可以直接拿来用的组件库，更开心的是能学到一种设计思路和方法。）

特别感谢 Ant Design 和 ANTD 团队、Element 和 ElementEF，刚开始设计后台产品时，我对控件、布局等等规范都还不太熟悉，甚至犯了一些很基础的错误，后来通过边参考这些设计体系的内容边实践，才慢慢进步起来。（Respect！）

小彩蛋

寻思着，都整到这份儿上了，顺手给这个不正经的设计系统起个名字儿吧，于是，就叫它 Singularity Design System，未经任何专业严肃认证的名字儿，一听就不是什么正经设计系统哈哈。
Singularity 就是奇点嘛，物理学里头那个奇点，宇宙大爆炸那个奇点，同时也是 “起点”（谐音梗要扣钱的啊喂），所以，起这个名字儿的理由是……我～喜～欢～
最后，感谢我的同事儿 傑少_JiKi 给我整了一个像模像样的 logo 哈哈～

------

相关链接：

SDS 的记录文档（Gitbook）

源文件下载（腾讯微云）