Sketch怎样创建样式指南、组件库和UI kit

无论是Sketch使用专家还是新手，都可以使用UI组件，虽然并非每个设计者都会选择这样做，但在Sketch中创建样式指南可以为之后的设计节省更多时间。

样式指南不仅能使内容保持一致，而且可以轻松地更新多个不同文档中诸如颜色和图标这样的元素。本教程分步骤介绍创建样式指南和UI组件的过程，也将使设计师更好的理解Sketch的组件，为他们的设计提供一个可参考Sketch组件库，并对设计资源的管理和组织充满信心。

创建Sketch样式指南

UX Pin表示：“样式指南是一个全面的'活动文档'，可跟踪项目中的所有重复元素，从品牌规则到呼吁用户采取行动的按钮的斜角。”

样式指南可以包含任何东西，从简单的视觉元素到文本和已有版权的图像。本教程覆盖了组织、颜色、图标、字体、文本样式和资源。

第一步：组织

1. 创建一个主文件夹来管理Sketch文件、插件和其他必要的资源，如字体和图形。（插件将在本教程的末尾讨论）

2. 新建一个Sketch文件，并起名为“客户端名称+组件库”。例如，如果你的客户端是Toptal，你的文件可命名为“Toptal Library”。

第二步：颜色

如果颜色已经选好，下一步是要把你的颜色都转化成组件。

1. 为此，创建相同尺寸的矩形，相应的更改其颜色。单击“创建组件”，使用Color/@Color-name命名系统保存这些元素。合适的标签示例：Color/@pink,Color/@background-gray,或者Color/@FFFFFF【备注：@为非必须元素，/为必须元素】。为保持样式指南的统一，命名规则是很重要的，因此应从一开始就建立并遵循所有格式。

2. 完成后，将这些颜色都添加到样式指南页面。

3. 将色彩样式保存在调色板的“文档”部分中。

R-矩形工具，T-文本工具，Alt-测量距离

在色板中的文档中保存颜色

第三步：图标

将图标转化为动态组件，可以使其颜色轻松更改为以上两步已保存的任何颜色。这意味着当一个图标放入设计中，可使用画布右侧面板中的“检查器”通过简单的下拉菜单（称为‘替代’）更改颜色。

1. 保存图标为组件（若有可能，坚持使用.svg格式）

2. 进入组件页面，找到图标，从已建立的颜色中选择一个默认颜色对其创建遮罩。为此，叠加颜色组件在图标上，然后单击工具栏的“遮罩”（或者右击，从快捷菜单中选择“遮罩”）。

3. 给图标建立遮罩之后，在面板中的“填充”区域，通过不勾选，移除图标的默认填充。

4. 在样式指南页面，组织排列好所有图标。在同一部分中，为活动、不活动的图标和其他任何重要的颜色做好规范是有很有帮助的。

首先，将图标创建为组件

下一步，用之前的颜色组件建立蒙版。

有需要时，在下拉菜单中选择icon的颜色进行替换。

第四步：文本样式

当字体已经选好后，就该指定文本样式了：H1，H2，H3，H4，H5，正文，链接，标题，标签等等。Typecast的这篇博客文章是一个很好的参考。

1. 根据需要选择多种样式的大小，粗细，字符，行间距。

2. 写下一个单词（当你按下“T”文本工具将自动出现“输入文本”），并对其设置格式。

3. 单击“创建新文本样式”

4. 在样式指南页面中组织排版文本样式。

创建文本样式可使UI样式指南保持一致。

第五步：资源

现在到了有趣的部分。是时候将之前所建立的进行组合创建一些资源了。如果资源已经被建立了，为了一致性，最好使用文本样式，图标和你已选择好的颜色重建一次。例如：在工作中的设计文件中，可能会有很多不同的灰色未曾考虑到，因此重新建立资源可以保证选择颜色的一致性。别忘了保持命名的一致性，并确保在创建资源时将其放入样式指南页面中。

以下是资源的一些意见，可用于：

• 按钮

1. 用默认的颜色作为按钮的遮罩并移除填充，可使这些动态组件像图标一样。

2. 在所有情况下都保持文本居中，保持文本框的宽度和按钮和中间文本宽度

3. 为确保一致性，确认使用了已保存的文本样式。

4. 使用“btn/btn-name”命名系统保存这些元素为组件。

5. 使用样式改变标签和颜色。

• 搜索栏

1. 将大小调整约束 resizing constraints 应用于搜索字段，以及该字段本身使用的图标和文本。

2. 别忘了使用之前已保存在色板中的文档分类中的颜色和文本样式。

3. 使用搜索作为标题将此作为组件保存，或者如果你有不同的搜索类型，使用诸如search/standard和search/no-icon之类的命名。

• 单选按钮和复选框

1. 组件嵌套是有可能存在的。进行测试的一种好方法是创建智能单选按钮和复选框资源

2. 首先，建立按钮。保存其为组件，命名方式为checkbox/selected和checkbox/deselected

3. 现在创建输入。在复选框符号旁添加占位符文本，然后将整个资源转化为组件。由于现在是输入，因此建议按原样保存，一个好的命名可为input/checkbox/selected和input/checkbox/deselected

第六步 使用样式指南

创建样式指南所做的这些工作，只在它实际更平稳运行才是有用的。当这些资源都被建立后，就可以将组件库应用到要设计的文档中。在Sketch中，“首选项-组件库-添加组件库”添加组件库文档。

将Sketch样式指南应用到未来的文档中

当已添加组件库到你的项目设计文档后，可在组件访问该组件库和其组件。你将注意到Sketch中作为库选项附带的IOS UI设计组件，和最近建立的组件库。

在设计文档中的组件，可找到所有组件库。你可以根据你的喜好添加和移除任意数量的组件库。

如果你想更新某个组件，选中该组件，然后按Enter键，你的组件库文档将会出现。当你已经做了改变，返回设计文档，在顶部右侧角落点击更新按钮。

“组件有更新可用”将出现在Sketch顶部的右上角。

当组件有更新可用时，将显示组件中已更新的组件。点击“更新组件”将更新改变。

彩蛋

• 导入/导出文本样式

文本样式不会随组件库一起保存，但Shared Text Styles这个插件可解决这个问题。下载插件后，打开组件库文档，进入菜单：“插件-共享文本样式-导出...”在你的组件库文档所在的文件夹里保存这个文件。然后，在设计文档中，再次打开菜单“插件-共享文本样式-导入文本样式...”，导入刚保存的文件。你的文本样式就会出现了。

• 导入/导出色板

与文本样式类似，文档颜色不会随Sketch组件库一起保存， 但Sketch Palettes plugin这个插件可以解决这个问题。同上步骤，导出色板使用“插件-Sketch Palette-文档颜色-保存色板”，导入“插件-Sketch Palette-文档颜色-载入色板”。记得要将它保存在你组件库文档所在的文件夹中。

• 字体

Invision公司的Craft插件是一个很好用的插件，它使Sketch提升到一个新的水平。Craft可让你使用库存图片替换图像，原型并同步到InVision，建立组件库等。如果Craft已下载，在文档中同时按住“Cmd-Shift-C”，将生成样式表。字体将在这里列出。

遵循以上的6个步骤，大型和小型设计项目都可运转顺畅，最后结果也将更好。如果他们是独特或者非常特定的，则样式指南、组件库、UI套件可被应用于一个客户端 。如果标准的UI元素持续被创建，例如线框和版式，则可用于许多项目。从一开始，花费时间正确建立这些SketchUI元素将节省大量的时间，甚至可能节省许多项目的时间。