每个设计项目都可以从一个深思熟虑的风格指南中受益. 使用本教程构建UI工具包，同时创建用于快速原型的自定义(和可重用)库.

是否 素描专家 or 素描新手, 设计师会发现，在草图中创建风格指南是他们设计工具箱的宝贵资源，可以节省大量时间.

样式指南不仅有助于保持内容的一致性，而且还允许跨多个文档更新颜色和图标等元素，从而减少麻烦. 本教程逐步介绍创建风格指南和UI工具包的过程，并将使设计师更好地理解草图符号, 参考草图库进行设计, 以及对设计资产组织的信心.

创建你的草图风格指南

“风格指南是一个全面的‘活文档’，它记录了项目中所有重复的元素, 从品牌规则到号召按钮的斜面数量,根据… UXPin. 风格指南可以包括从简单的 视觉元素 词汇和认可的意象. 本教程涵盖组织、颜色、图标、字体、文本样式和资产.

第一步:组织

1. 创建一个主文件夹来保存草图文件, 插件, 和其他必要的资产，如字体和图标. (插件将在本教程的最后讨论.)
2. 创建一个新的草图文件，并命名为列出 图书馆.例如，如果您的客户端是Toptal，那么您的文件应该命名为“Toptal 图书馆”.”

第二步:颜色

如果已经选择了颜色，下一步是将颜色转换为符号.

1. 要做到这一点，制作相同大小的正方形，并相应地改变它们的颜色. 点击“创建符号”，保存这些元素，颜色为/@color-name 标签系统. 颜色/ @pink, 颜色/ @background-gray, or 颜色/ @FFFFF 是否有适当标签的例子. 命名约定对于保持风格指南的条理性非常重要, 因此，从一开始就应该为每件事建立一个格式并坚持下去.
2. 完成后，将它们添加到样式指南页面.
3. 将色板保存在调色板的文档部分.

有用的快捷键:R -矩形工具，T -文本工具，alt -测量距离.

第三步:图标

将图标转换为动态符号，可以很容易地将其颜色更改为上述第二步中保存的任何颜色. 这意味着在将图标放入设计之后, 颜色可以通过一个简单的下拉菜单来改变, 被称为“覆盖”,，使用画布右侧的“Inspector”.

1. 将图标保存为符号(坚持) .SVG作为资产类型(如果可能的话).
2. 进入符号页面, 找到图标, 用之前保存的颜色中的默认颜色蒙版. 要做到这一点, 将颜色符号叠加在图标上方，点击工具栏中的“蒙版”(或右键单击弹出菜单中的“蒙版”).
3. 遮罩图标后, 通过取消检查器中“填充”部分下的复选框来移除填充.
4. 在样式指南页面中组织图标. 在同一部分, 为活动图标和非活动图标指定颜色很有帮助, 加上任何其他重要的颜色规格.

第四步:文本样式

一次 字体 被选中了, 是时候指定文本样式了:H1, H2, H3, H4, H5, body, 链接, 标题, 标签, 等. 一个很好的网页排版参考是这样的 博客 通过定型.

1. 根据需要选择字体的大小、粗细、字符和行间距.
2. 写出一个单词(按下T键时自动出现“Type Something”), 文本工具)并将其格式化以反映所选择的样式细节.
3. 点击“创建新文本样式”.”
4. 在样式指南页面中组织文本样式.

第五步:资产

现在是有趣的部分. 现在是时候结合前面的所有步骤来创建一些资产了. 如果已经创建了资产, 为了保持一致性, 最好使用文本样式重新创建它们, 图标, 颜色你已经选好了. 例如，在工作中可能有许多不同颜色的灰色 设计文档 这种设计没有考虑到, 因此，重新创建资产将保证所选颜色的一致性. 不要忘记保持命名的一致性, 并且确保在创建样式指南页面时将资产添加到样式指南页面中.

以下是一些建议的资产:

按钮

1. 制作这些动态符号, 就像图标一样, 通过用默认颜色屏蔽按钮并移除填充.
2. 使文本始终处于中心位置, 将文本框的宽度设置为与按钮的宽度相同，并将文本居中.
3. 为了确保一致性，一定要使用保存的文本样式.
4. 将这些元素保存为符号 按钮/按钮名称 命名系统.
5. 使用覆盖功能来更改标签和颜色.

搜索栏

1. 应用 调整约束 到搜索字段，以及字段本身中使用的图标和文本.
2. 不要忘记应用以前保存在文档调色板中的文本样式和颜色.
3. 将此元素保存为符号 搜索 作为标题，或者如果你有不同类型的搜索，坚持标签系统，如 搜索/标准 和 搜索/没有图标.

单选按钮和复选框

1. 一个符号中有一个符号是可能的, 测试它的一个好方法是创建智能单选按钮和复选框资产.
2. 首先，创建按钮资产本身. 将此元素保存为符号 复选框选中/ 和 复选框/去掉的时候 举个标签的例子.
3. 现在创建输入. 在复选框符号旁边添加占位符文本，然后将整个资源转换为符号. 因为现在这是一个输入，所以建议这样保存资产，所以一个好的标签应该是 输入/复选框选中 和 输入/复选框去掉的时候.

第六步:使用风格指南!

做所有这些工作来创建一个风格指南，只有当它确实使项目运行得更顺利时才有用. 一旦创建了所有资产，就可以将库应用于正在设计的文档了. In 草图, go to “Preferences ‐> Add 图书馆…” 和 add the library document.

将库添加到项目设计文件后, 您可以在符号部分访问库及其符号. 你会注意到iOS 用户界面设计库，它带有草图作为库选项, 还有最近导入的库.

如果你想更新一个符号, 双击符号本身，就会出现库文档. 一旦你做出了改变, 回到设计文件，点击右上角的更新按钮.

奖励:导入/导出文本样式

文本样式不会保存在库中，但是 共享文本样式 草图插件解决了这个问题. 一旦你下载了插件, go to the library document 和 then to the menu: “Plugins ‐> 共享文本样式 ‐> Export…” Save this file in the same folder as your library document. 然后, in your 设计文档 go to the menu again: “Plugins ‐> 共享文本样式 ‐> Import Text Styles…” 和 import the file you just saved. 您的文本样式将出现.

奖励:导入/导出调色板

与文本样式类似，文档颜色不会保存在草图库中，但是 素描调色板插件 解决了,. 和上面差不多, export the palette using “Plugins ‐> 草图 Palette ‐> Document Colors ‐> Save Palette” 和 import it with “Plugins ‐> 草图 Palette ‐> Document Colors ‐> Load Palette.记得把它和其他库文档保存在同一个文件夹里.

好处:字体

工艺 由InVision是一套插件，把草图软件到一个新的水平. 工艺允许您用库存照片替换图像, 原型和同步到InVision, 创建库, 和更多的. 如果工艺已经下载了，在文档中点击“cmd-shift-c”，样式表就会生成. 字体将在这里列出.

遵循上面列出的六个步骤将使大型和小型设计项目更顺利地运行，最终结果将更加完善. 如果它们是唯一的或非常具体的, 风格指南, 图书馆, 和UI工具包可以用于一个客户端, 或者对于许多项目来说，如果标准UI元素是不断创建的, 比如线框图和原型. 投入的时间, 一开始, 正确地创建这些草图 UI组件将节省很多时间, 并且可能跨越许多项目.