无论你是在制作一个 网页 还是一个完整的 设计系统，你选择的 颜色 会产生巨大的影响，从可用性和 无障碍性 到品牌标识和个性。使用颜色变量，你可以轻松同步和管理设计中的颜色。
在这篇文章中，我们将分享一些技巧和窍门，帮助你充分利用 颜色变量。
让我们从快速回顾开始！
颜色变量到底是什么？
假设你正在制作公司标志，并且希望确保在 目标网页设计 中使用相同的颜色。使用颜色变量，你可以保存你使用的颜色，这样它们就会在 颜色选择器弹出窗口 中显示为方便的颜色色板。但颜色变量不仅仅是存储你将来的颜色，你所做的任何更改都会自动更新到所有使用它们的图层中。
你可以创建特定文档的本地颜色变量，也可以将它们分享到库中，并在其他设计中使用。但更多内容将在后面介绍！
如何创建颜色变量
你可以从 检查器 或 组件视图 创建新的颜色变量。下面，我们将为你简要介绍每个示例，但你可以自由选择最适合你的方式。
使用检查器。 选择任何图层，然后单击检查器中任何样式属性的颜色框。选择你想要使用的纯色，然后单击 创建颜色变量。给它命名并单击 创建 或按 ↵ 保存。
使用组件视图。 转到组件视图中的 颜色 选项卡，然后单击 
图标。使用颜色选择器选择你想要的颜色，并为你的变量命名。满意后，单击弹出窗口外部的任何位置保存。
请记住为你的颜色变量命名，以便于查找！
如何使用颜色变量更新设计中的颜色
假设你回到了目标网页的设计工作，并且已经完成了大部分工作……但你的客户现在告诉你他们想更改标志的颜色。其他设计师可能会慌了，但你不必！使用 Sketch，你只需要调整颜色变量，它们就会在你的标志和目标网页上的所有位置更新，无论你是在单个文档中使用它们还是作为 库 的一部分。
为此，请选择带有你想要更新的颜色变量的图层，然后转到检查器。打开颜色选择器并单击 编辑变量 按钮。满意新颜色后，单击 更新。然后，颜色变量将在其他所有位置自动更改！
单击更新后，使用“冬日快乐”颜色变量的每个图层都会变为绿色。
组织你的颜色变量
一旦颜色变量成为你设计中的主打元素，你可能就会从保持它们的组织中受益。排序良好的颜色变量易于编辑，使用起来也更方便。你可以使用组件视图对其进行重命名、分组和编辑。
分组。 按住 ⇧ 选择你想要分组的颜色变量，然后右键单击选择并选择 分组。你也可以将颜色变量拖放到左侧边栏中的现有组中。
重命名。 创建组后，双击左侧边栏中的标题并输入新名称。
编辑。 单击任何颜色变量并使用颜色选择器进行更改。
你也可以将颜色变量拖放到左侧边栏中的现有组中。
使用覆盖
虽然符号和颜色变量的主要目标是保持设计的一致性，但有时你需要对特定实例进行调整。这就是覆盖的用武之地。检查器中有一个专门用于覆盖的面板，你可以使用它将颜色变量分配给嵌套的符号或符号内的图层，而不会影响符号源或其其他实例。
你可以覆盖任何颜色变量，无论你将其应用于填充、边框、阴影还是文本图层。你也可以以网格视图或列表视图查看所有颜色，并将鼠标悬停在它们上以获取方便的信息，例如名称或十六进制值。
色调
色调是将纯色应用于整个 符号 或图层组的简单方法。色调非常适合图标或 iOS 样式的标签栏，这些标签栏将图标与文本标签结合在一起。一个常见的用例是为按钮创建不同的状态，例如活动和非活动。你可以将这些色调设置为颜色变量，以便它们自动更新。
覆盖色调的工作方式相同，只是你会在 样式 下找到该选项。
删除和分离颜色变量
不喜欢你当前的颜色变量？没问题！你可以在组件视图中的 颜色 选项卡中轻松删除颜色变量，方法是单击你想要删除的颜色变量并按退格键。你也可以右键单击颜色色板并选择 删除。
其他时候，你可能想更改使用颜色变量的单个图层的颜色，而不会更新颜色变量本身。在这种情况下，你将需要先分离该颜色变量。为此，选择你想要分离颜色变量的图层，打开检查器中的颜色选择器弹出窗口，然后单击 分离变量。
使用查找和替换表
你可以使用查找和替换颜色表在设计中查找类似的颜色，并将它们替换为颜色变量。你也可以使用它来替换相同颜色的多个不透明度，请记住，当你用颜色变量替换它们时，不会保留这些不透明度。
要替换颜色变量，请选择 编辑 > 查找和替换颜色… （或按 ⌘⌥F）以调出查找和替换颜色菜单。从那里，选择你想要在设计中查找的颜色或颜色变量，以及你想要替换它的颜色或颜色变量。
使用颜色令牌轻松交付
我们知道颜色变量让 Sketch 的设计变得轻而易举，但对于移交呢？有了 颜色令牌，我们已经涵盖了这一点。
颜色令牌提供了一组始终最新的值，这些值与您文档或库中的颜色变量匹配。您可以通过组件 Web 视图轻松生成颜色令牌。只需打开颜色变量视图，然后点击左下角的 **导出颜色令牌** 按钮。
目前，颜色令牌可以以 CSS 和 JSON 格式下载，您可以在 **将颜色变量导出为令牌** 模态窗口的下拉菜单中选择这些格式。完成后，按 **下载** 保存颜色令牌的副本。
公开链接
您还可以生成两种格式的 URL，这些 URL 会随着您所做的任何更改而保持最新。您可以在底部下拉菜单中找到三种选择。
- 启用最新更新的链接
- 启用最新星标的链接
- 禁用链接
选择您喜欢的选项后，点击 **复制链接** 并将其添加到您的 CSS 或 JSON 文件中！
就是这样——充分利用颜色变量所需的一切。我们希望您喜欢使用它们，如果您设计出令您感到自豪的东西，请 与我们分享！谁知道呢，您甚至可能是我们下一个 #MadeWithSketch 英雄 👀
