技术文章

如果您发现自己在文档之间复制并粘贴相同的符号，或者在显示器旁边保留带有十六进制代码的便利贴，那么可能是时候将设计的这些核心组件转换为 Library了。

在这篇文章中，我们将引导您了解如何创建库以及可以添加到其中的所有组件。让我们开始吧！

如何创建库

借助库，您可以将组件组织和存储在一个位置，甚至可以在整个工作区中访问它们。它们对于在不同场景中轻松应用您的品牌非常有用，甚至可以使用通用元素拆分较大的设计文档。换句话说，图书馆可以让事情保持一致并改善团队内部的协作。

您可以使用“文件” > “添加为库”将任何文档转换为 Sketch 中的库。在网络应用程序中，您可以通过文档设置将现有文档转换为库。

虽然将现有文档转换为库既快速又容易，但有时从头开始是有意义的，特别是如果您还没有创建组件的话。如果您从头开始，按有意义的顺序添加组件会有所帮助。

考虑库组件的一个好方法是将复杂性分为三个级别。让我们看看每个级别以及其中的组件。

第 1 级：基本组件

如果您要从头开始构建库，我们建议您从样式和颜色的基本构建块开始。

这是 Sketch 中的组件入门包 👇

颜色变量

颜色变量对于存储颜色很有用。它们将直接显示在颜色选择器中，使它们易于查找和应用。您可以使用它们为您的品牌或项目创建调色板，这将帮助您更快地工作并保持设计的一致性。

文本样式

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

图层样式

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

这一切是如何结合在一起的

您可以根据上下文轻松地在样式和颜色之间切换。也许您想使用两个颜色变量来区分活动按钮和非活动按钮。或者您可能想要更改不同长度或突出程度的副本的文本样式。

您可以通过“组件”视图快速访问颜色变量和样式，您可以通过按CMac 应用程序中的 来触发该视图。从这里，您可以将它们直接拖放到您想要应用的图层上。

准备好基本组件后，您就可以开始处理更复杂的元素。

第 2 级：符号和嵌套符号

现在您已经有了构建块，是时候将它们与一些更复杂的组件（符号和嵌套符号）一起使用了。让我们看看它们各自的工作原理以及它们的用途。

符号

符号是 Sketch 中任何库的核心，对于处理导航栏、徽标和模块等元素特别方便。用技术术语来说，符号是一种特殊类型的画板，其中包含可以重复使用和更新的图层。您可以在项目中无限复制这组图层，并根据您的喜好进行编辑。您可以对特定实例进行单独更改，或通过编辑源一次性更新所有更改。

例如，假设您想要设计一个在应用程序项目中重复使用的按钮。您可以创建形状图层和文本图层并将其另存为符号。然后，您可以开始在整个设计中添加该符号的实例。如果您需要更改按钮的整体外观，可以通过符号源来执行此操作。或者，您可以编辑特定实例并更改颜色或副本，而不影响其余按钮。

嵌套符号

使用嵌套符号，您可以将简单的符号（如按钮或徽标）放置在较大的符号（如导航栏）内。这种额外的复杂性层（几乎就像 2.5 级）为您在编辑时提供了很大的灵活性。您可以单独调整每个部分，同时保持所有内容同步。例如，如果决定更新您的徽标，它也会在导航栏中发生变化。

这一切是如何结合在一起的

这就是将样式和颜色变量应用到符号中派上用场的地方。如果您花时间进行设置，您可以在几秒钟内更改应用程序设计的整体外观和感觉。您越依赖文本样式、图层样式和颜色变量，管理和扩展库就越容易。

第 3 级：画板模板

使用画板模板，您可以将任何画板及其内容转变为可重用的组件。它们非常适合保存您的符号以及屏幕、配置文件、帖子和各种模型的整体设计。

您所要做的就是选择画板并在检查器中启用“用作模板”复选框。A然后，在组件窗口中按 或 后，您将能够通过检查器中的下拉菜单访问新的画板模板。

不确定何时使用画板模板？想象一下，您正在开发一个新的网页设计，并且刚刚完成了将在大多数屏幕中使用的页眉和页脚的组合。您可以创建与屏幕尺寸相同的画板，添加页眉和页脚符号并将其另存为模板。这样，每次为应用程序创建新屏幕时，您都可以节省一个步骤，因为页眉和页脚已经就位。

这一切是如何结合在一起的

一旦您将所有组件仔细地融入到画板模板中，进行更改和保持一致将几乎是自动的。对颜色变量的简单更改将影响符号和画板模板，同时仍然保留对必要时进行单独更改的完全控制。