如何用sketch创建组件库、样式指南和工具包

在每一个项目设计中，无论是 Sketch 专家还是 Sketch 新手，设计师都会发现在 Sketch 中创建样式指南可以成为他们设计工具箱的宝贵资源，可以节省大量时间。 样式指南不仅有助于保持一致，还允许在多个文档中更新颜色和图标等元素，减少麻烦。本教程逐步介绍了创建样式指南和 UI 工具包的过程，并将让设计师更好地理解 Sketch 符号，为他们的设计引用 Sketch 库，并对其设计资产的组织充满信心。

创建sketch样式指南 “样式指南是一个全面的“动态文档”，它跟踪项目的所有重复元素，从品牌规则、按钮、等，根据用户体验. 风格指南可以包括从简单的视觉元素、颜色、图标、字体、文本样式、认可的图像的任何内容等。

第一步：创建一个主文件夹来保存sketch文件
启动一个新的 Sketch 文件并将其命名为“ Client name Library”。例如，如果您的品牌/客户是 weihao，那么您的文件应命名为“Weihao Library”。

第二步：创建配色方案
如果已经选择了颜色，下一步就是将颜色转换为符号。 为此，请制作相同大小的正方形并相应地更改其颜色。单击“创建符号”并使用颜色/ @color-name标签系统保存这些元素。
比如：Color/@pink、color/@background-gray 或 color/@FFFFF 是正确标签的示例。
命名约定对于保持样式指南井井有条很重要，因此应该从一开始就建立并遵守所有内容的格式。 完成后，将它们添加到样式指南页面。 将色板保存在调色板的文档部分。

第三步：创建图标库
将图标变成动态符号可以轻松地将它们的颜色更改为上面第二步中保存的任何颜色。这意味着在将图标放入设计后，可以使用画布右侧的“检查器”通过一个简单的下拉菜单（称为“覆盖”）更改颜色。

第四步：创建文本样式
一旦选择了字体，就该指定文本样式了：H1、H2、H3、H4、H5、正文、链接、标题、标签等，根据需要为尽可能多的样式选择大小、粗细、字符和行距。 写下一个单词（当你按下 T，文本工具时，“Type Something”会自动出现）并格式化它以反映所选的样式细节。 单击“创建新的文本样式”。 在样式指南页面中组织文本样式。

第五步：创建其他组件
搜索条、单选复选、下拉框、按钮...等，不要忘记保持命名一致，并确保在创建资产时将其添加到样式指南页面中。

第六步：保存为自己的风格指南
完成所有这些工作以创建样式指南只有在它实际上使项目运行更顺利时才有用。创建完所有资产后，就可以将库应用于正在设计的文档了。

在 Sketch 中，转到“首选项 -> 添加库...”并添加库文档。

最后，遵循上述六个步骤将使大型和小型设计项目运行得更加高效顺畅，如果它们是独特的或非常具体的，则样式指南、库和 UI 工具包可以用于一个客户，或者如果标准 UI 元素不断创建，例如线框和原型，则可以用于许多项目。 在项目开始时花一些时间来创建这些 Sketch UI 组件将节省大量时间，并可能在未来的许多项目中节省时间。