手把手教你在Sketch中创建样式规范，库以及UI组件

——————————

原文：https://uxplanet.org/how-to-create-a-sketch-style-guide-library-and-ui-kit-af032b4610af

样式指南不仅可以使内容保持一致，还可以轻松地更新多个文档中的颜色和图标等元素。本教程分步介绍了创建样式指南和UI套件的过程，并将使设计人员对Sketch的Symbols有更好的理解。一起跟着本文来创建你自己的规范吧。

在Sketch中创建样式规范

“样式规范是一个全面的“活动文档”，可跟踪项目的所有重复元素，“ 本教程涵盖颜色，图标，字体，文本样式和其它设计资产。

第一步：组织文件

1. 创建一个主文件夹，以保存Sketch文件，插件和其他必要的资产，例如字体和图标。（插件将在本教程的最后进行讨论。）
2. 创建一个新的Sketch文件，并将其命名为你希望的名称。

1. 请制作相同大小的正方形，并相应地更改其颜色。单击“创建元件（Symbols）”，然后使用“颜色/ @ color-name”标签系统保存这些元素。“颜色/ @粉色”，“颜色/ @背景灰色”或“颜色/ @ FFFFF”是适当标签的示例。命名规则对保持样式指南的组织很重要，因此应从一开始就建立并遵循所有格式。
2. 完成后，将它们添加到Style Guide页面。
3. 将颜色样式保存在调色板的“文档”部分中。

1. 将图标设定为元件（Symbols），（如果可能，请使用.svg作为资产类型）。
2. 进入元件页面，找到图标，并使用先前保存的颜色中的默认颜色对其进行遮罩。为此，将颜色符号覆盖在图标上方，然后单击工具栏中的“蒙版”（或右键单击并从弹出菜单中选择“蒙版”）。（在新版本的Sketch中，你可以使用Hint功能轻松完成图标颜色更改，不必再用遮罩了-静电注。）
3. 遮罩图标完成后，通过取消选中检查器中“填充”部分下的复选框来删除填充。
4. 组织样式指南页面中的图标。为活动和非活动图标分别指定颜色。

1. 根据需要选择样式，尺寸，粗细，字符和行距。 
2. 随意写几个文字（当您按下文本工具T时，默认的“ Type Something”会自动出现）并对其进行格式化以反映所选样式的细节。
3. 点击“创建新的文字样式”。
4. 在样式指南页面中组织文本样式。

1. 要始终使文本居中按钮，请让文本框的宽度与按钮相同，然后使文本居中。
2. 为确保一致性，请确保使用保存的文本样式。
3. 使用“按钮/ 按钮名称”这样的命名规则，系统将这些元素另存为Symbols。
4. 使用替代功能（Override）更改标签和颜色。

1. 使用元件的自适应布局来使搜索字段和搜索栏中的icon能自适应文本长度。
2. 不要忘记应用以前保存在文档调色板中的文本样式和颜色。
3. 规范命名，如果您具有不同类型的搜索栏，例如“搜索/标准”和“搜索/无图标”。