如果您发现自己在文档之间复制和粘贴相同的符号,或者在显示器旁边放置带有十六进制代码的便利贴,那么可能是时候将设计的核心组件变成库了。
在这篇文章中,我们将引导您了解如何创建库以及可以添加到库中的所有组件。让我们开始吧!
如何创建库
借助库,您可以将组件组织和存储在一个地方,甚至可以在您的工作区中访问它们。它们对于在不同的场景中轻松应用您的品牌或将具有公共元素的大型设计文档分开非常有用。换句话说,库可以保持一致性并改善团队内部的协作。
您可以通过使用文件 > 添加为库将任何文档转换为 Sketch 中的库。在 Web 应用程序中,您可以通过文档设置将现有文档转换为库。
虽然将现有文档转换为库既快速又容易,但有时从头开始更有意义,尤其是在您尚未创建组件的情况下。如果您从头开始,按有意义的顺序添加组件会有所帮助。
考虑库组件的一个好方法是将其分为三个复杂程度的级别。让我们看看每个级别以及构成它们的组件。
级别 1:基本组件
如果您要从头开始构建库,我们建议从样式和颜色的基本构建块开始。
这是您在 Sketch 中的组件入门包 👇
颜色变量
颜色变量对于存储颜色很有用。它们会直接显示在颜色选择器中,方便查找和应用。您可以使用它们为您的品牌或项目创建一个调色板,这将帮助您更快地工作并保持设计的一致性。

文本样式
在处理排版时,文本样式是您最好的朋友。您可以创建字体、粗细和颜色的预定组合,以便在设计中重复使用。这样,您可以为标题、副标题和正文创建不同的文本样式,并避免在文档之间复制和粘贴样式。

图层样式
图层样式的工作方式与文本样式相同,只是它们应用于形状图层。您可以使用它们来保存背景颜色和阴影。例如,您可能为按钮设置了特定的阴影效果,以使其具有微妙的光晕或 3D 效果。如果您想在设计中保持这种处理的一致性,您可以将这些图层保存为样式。

如何结合在一起
您可以根据上下文轻松地在样式和颜色之间切换。也许您想使用两个颜色变量来区分活动按钮和非活动按钮。或者,您可能想要更改不同长度或重要性的副本的文本样式。
您可以通过组件视图快速访问颜色变量和样式,您可以通过在 Mac 应用程序中按 C 来触发组件视图。从这里,您可以将它们拖放到要应用它们的图层上。
准备好基本组件后,您就可以开始处理更复杂的元素了。
级别 2:符号和嵌套符号
现在您已经准备好了构建块,是时候使用它们来制作更复杂的组件了——符号和嵌套符号。让我们看看它们各自的工作原理以及您可以将它们用于什么。
符号
符号是 Sketch 中任何库的核心,尤其适用于处理导航栏、徽标和模块等元素。从技术上讲,符号是一种特殊的画板,其中包含可以重用和更新的图层。您可以无限次地在您的项目中复制此组图层,并根据您的喜好进行编辑。您可以对特定实例进行单独更改,或者通过编辑源一次更新所有实例。
例如,假设您想要设计一个按钮,以便在应用程序项目中使用。您可以创建形状图层和文本图层并将其保存为符号。然后,您可以开始在您的设计中添加该符号的实例。如果您需要更改按钮的整体外观,您可以通过符号源进行更改。或者,您可以编辑特定实例并更改颜色或副本,而不会影响其余按钮。

嵌套符号
使用嵌套符号,您可以将简单的符号(如按钮或徽标)放置在更大的符号中,例如导航栏。这个额外的复杂层——几乎像 2.5 级——在编辑时为您提供了很大的灵活性。您可以单独调整每个部分,同时保持所有内容同步。例如,如果您决定更新您的徽标,它也会在导航栏中更改。
如何结合在一起
这就是将样式和颜色变量应用于您的符号的用武之地。如果您花时间设置它们,您可以在几秒钟内更改应用程序设计的整个外观。您越依赖文本样式、图层样式和颜色变量,管理和扩展您的库就越容易。
级别 3:画板模板
使用画板模板,您可以将任何画板及其内容转换为可重用的组件。它们非常适合保存您的符号和屏幕的整体设计、个人资料、帖子和各种模型。
您所要做的就是选择画板并在检查器中启用用作模板复选框。然后,您将能够在按下 A 后或在“组件”窗口中的下拉菜单中访问您的新画板模板。

不确定何时使用画板模板?想象一下,您正在进行一个新的网页设计,并且刚刚完成了将在大多数屏幕中使用的页眉和页脚。您可以创建一个与屏幕尺寸相同的画板,添加页眉和页脚符号,并将其保存为模板。这样,每次为网站创建新屏幕时,您都可以节省一个步骤,因为页眉和页脚已经就位。
如何结合在一起
一旦您将所有组件精心编织到画板模板中,进行更改并保持一致性将几乎是自动的。对颜色变量的简单更改将会在符号和画板模板中产生连锁反应,同时仍然可以完全控制在必要时进行单独更改。
更重要的是,一个精心设计的库可以很容易地变成一个功能齐全的设计系统,前提是您为您的团队添加更多说明。如果您想深入了解,我们有一份关于如何构建设计系统的完整指南可供您参考。
就是这样!如果您想了解更多关于库的信息,我们有一篇深入的文章随时为您准备好了。