一套优秀的样式指南能提高工作效率。本教程讲述了如何创建一套UIkit，以及如何自定义（可重用）一套Library。

无论你是刚接触Sketch还是早就能够熟练掌握，大家都明白有一套设计规范能极大的提高效率。而利用Sketch确实能快速制作一套便捷的设计规范。

样式指南不仅有助于保持一致性，还可以更轻松地更新多个文档中的颜色和图标等元素。本教程将逐步介绍创建样式指南和UIkit的过程，并使设计人员更好地理解Sketch的symbol，为其设计引用Sketch Library，以及如何有效组织管理项目资源。

创建你的样式指南

“ 样式指南是一个全面的”生活文档“，可以跟踪项目的所有重复元素，从品牌规则到呼叫操作按钮的斜角量，”by  UXPin。

样式指南可以包括任何东西，从简单的视觉元素，词汇和图像（有版权的）。本教程涵盖组织、颜色、图标、字体、文本样式和资产（assets）。

第一步：组织

1、 创建一个主文件夹来保存草图文件，插件和其他必要的资源，如字体和图标。（插件将在最后讨论。）

2、 新建一个新的Sketch文件并将其命名为“ Client name Library”。例如，如果您的新项目名称是Toptal，那么您的文件应命名为“Toptal Library”。

第二步：颜色

1、制作相同大小的方块（快捷键：R）并相应地改变它们的颜色。注：就是创建矩形后把矩形颜色改成项目中要用到的颜色的颜色。点击“创建符号”（Create symbol）以色值命名。格式如下：颜色/@粉红色，颜色/@背景灰色，或颜色/@FFFFF。注：‘/’为必须，‘@’非必须。命名规范很重要，建议一开始就保持。

2、完成后，将它们添加到样式指南页面。

3、将颜色样本保存在调色板的文档部分中。注：这一点非常效率的，本人之前经常忽略。

在文档调色板中保存颜色样本。

第三步：图标

将图标转换为动态符号，可以轻松地将其颜色更改为上面第二步中保存的任何颜色。这意味着，在将图标放置到设计中之后，可以在画布右侧的“检查器”中利用“覆盖”(override)改变颜色。

1、 将图标保存为符号（Symbol）。尽如果是导入的图标尽量用.svg作为图标后缀名。

2、 进入符号页面找到刚创建的符号，选择之前做好的颜色进行遮罩（mask）。步骤是先将颜色符号覆盖在图标顶部（左侧图层中颜色在图标上面），然后点击工具栏中的“蒙版“（Mask）。也可以右键 - 蒙版。

3、 接下来取消图标本身的颜色填充。步骤是在右侧“检查器”中将图标的“填充”（Fill）复选框取消。

4、 组织图标。在同一部分，指定活动图标和非活动图标的颜色以及任何其他重要的颜色规范都是有帮助的。

首先，让图标成为一个Symbol。

接着，为Symbol创建一个剪切蒙版。

最后可以通过右侧随时修改图标的颜色。

第四步：字体样式

一旦确定了所用的字体，就可以指定文本样式：H1，H2，H3，H4，H5，正文，链接，标题，标签等。网页排版的一个很好的参考是Typecast的这篇博客文章。（需科学上网）

1、 根据需要为多个样式选择大小、重量、字符和行距。

2、 输入一个词或一段话，然后改成相对应的样式。

3、 单击创建新文本样式（Create new Text Style）

4、 在样式指南页面组织文本样式。注：在右侧将修改后的样式命名。

第五步：资产（Assets）

现在是有趣的部分。是时候将前面的所有步骤结合起来创建一些资产了。如果资产已经创建，为了保持一致性，最好使用您已经选择的文本样式、图标和颜色重新创建它们。例如，工作设计文档中可能有许多不同颜色的灰色，而设计没有考虑到这些颜色，因此重新创建资产将确保所选颜色的一致性。不要忘记保持命名的一致性，并确保在创建时将资产添加到样式指南页面中。注：这里就是要结合前面步骤创建一个“组件”如导航栏。

具体请看一些常见组件整合

按钮

1、 像图标一样制作成动态符号（Symbol）。屏蔽默认颜色并删除填充。

2、 文本居中。若要始终保持文本居中，请将文本框的宽度设置为与按钮相同，并将文本居中。

3、 要确保样式的一致性，请使用保存的文本样式。

4、 保存为Symbol，命名格式为按钮/按钮名称。注：未必只保存为两层命名，只要规范命名就行。

5、 使用覆盖功能更改标签和颜色。

搜索栏

1、 使用“调整约束”来设计导航栏，以及他内部的图标、文本。

2、 记得使用以前保存在文档调色板中的文本样式和颜色。

3、 将此元素保存为一个符号，使用Search作为标题，或者如果您有不同类型的搜索，请遵守标签系统，如Search/Standard和Search/no-图标。

单选/复选按钮

1、 通过符号的嵌套可以制作智能的单选框/复选框。

2、 首先先制作按钮。然后使用复选框/选中和复选框/取消选中作为示例标记将此元素保存为符号。

3、 在复选框符号旁边添加占位符文本，然后将整个转换为符号。因为这现在是一个输入，所以建议保存为这样，所以一个很好的标签将是输入/复选框/选择和输入/复选框/取消选中。

第六步：使用样式指南

为们完成了所有以上这些工作，但是只有当它实际上使项目运行更加顺利时，它才是有用的。完成以上步骤后就应该将库应用到正在设计的文档中。在Sketch中，转到“Preferences->Add Library…”并添加库文档。

将库添加到项目设计文件后，可以访问符号部分中的库及其符号。您将注意到Sketch作为库选项附带的IOS UI设计库以及最近导入的库。

您可以在设计文档的符号部分找到所有库。您可以添加和删除任意数量的库。

如果要更新符号，请双击符号本身并显示库文档。完成更改后，返回到设计文档并单击右上角的UPDATE按钮。

当库更新可用时，模式将显示库中更改的符号。单击“Update Symbols”将批准更改。

按照上面列出的六个步骤，大小的设计项目都会运行得更加顺利，最终的结果也会更加完美。在一开始，投入时间来正确地创建这些SketchUI组件将节省大量的时间，并可能跨项目使用。

ps：这次时间有限暂未翻译插件部分，下次更新时补上。