如何充分利用颜色变量

无论您是从事单个网页还是整个设计系统，您选择的颜色都会产生巨大影响——从可用性和可访问性，到品牌标识和特征。 使用颜色变量，您可以轻松地在设计中同步和管理颜色。

在这篇文章中，我们将分享一些技巧和窍门，以帮助您充分利用颜色变量。

让我们从快速回顾开始吧！

什么是颜色变量？

假设您正在设计公司徽标，并且想要确保在您的着陆页设计中使用相同的颜色。使用颜色变量，您可以保存使用的颜色，以便它们在颜色选择器弹出窗口中显示为方便的颜色样本。但是颜色变量的作用远不止存储颜色以供将来使用——您所做的任何更改实际上都会自动更新到使用它们的所有图层。

您可以创建特定于某个文档的颜色变量，也可以在库中共享它们以在其他设计中使用。 但是稍后会详细介绍！

如何创建颜色变量

您可以从检查器或组件视图创建一个新的颜色变量。下面，我们将为您快速介绍每个示例，但您可以随意使用最适合您的示例。

使用检查器。选择任何图层，然后单击检查器中其任何样式属性的颜色样本。选择要使用的纯色，然后单击创建颜色变量。为其命名，然后单击创建或按 ↵ 保存。

使用组件视图。转到组件视图中的颜色选项卡，然后单击 图标。使用颜色选择器选择所需的颜色，然后为您的变量命名。对它感到满意后，单击弹出窗口外部的任意位置以保存。

如何使用颜色变量更新设计中的颜色

假设您正在重新处理该着陆页，并且几乎完成了...只是您的客户现在告诉您他们想要更改其徽标的颜色。其他设计师可能会惊慌失措，但是您不必！使用 Sketch，您只需要调整颜色变量，它们就会在您的徽标和着陆页上的任何地方更新——无论您是在单个文档中使用它们还是作为库的一部分。

为此，请选择具有要更新的颜色变量的图层，然后前往检查器。打开颜色选择器，然后单击编辑变量按钮。对新颜色感到满意后，单击更新。 然后，颜色变量将自动在其他所有地方更改！

组织您的颜色变量

一旦颜色变量成为您设计中的主要内容，您可能会受益于保持其组织。 组织良好的颜色变量易于编辑，甚至更易于使用。 您可以使用组件视图重命名、分组和编辑它们。

分组。按住 ⇧ 的同时选择要分组的颜色变量，然后按住 Control 单击您的选择，然后选择分组。您也可以将颜色变量拖到左侧边栏中的现有组中。

重命名。创建组后，双击左侧边栏中的标题，然后键入新名称。

编辑。单击任何颜色变量，然后使用颜色选择器进行更改。

使用覆盖

虽然符号和颜色变量的主要目标是保持设计的一致性，但有时您需要对特定实例进行调整。 这就是覆盖的用武之地。 检查器中有一个专门用于覆盖的面板，您可以使用它将颜色变量分配和替换为嵌套符号或符号内的图层——而不会影响符号源或其其余实例。

您可以覆盖任何颜色变量，无论您将其应用于填充、边框、阴影还是文本图层。 您还可以在网格或列表视图中查看所有颜色，并将鼠标悬停在它们上方以获取方便的信息，例如名称或 HEX 值。

色调

色调是将纯色应用于整个符号或图层组的一种简便方法。 色调非常适合用于图标或 iOS 样式的选项卡栏，这些选项卡栏将图标与文本标签组合在一起。 常见的用例是为您的按钮创建不同的状态——例如活动和非活动状态。 您可以将这些色调设置为颜色变量，以便它们自动更新。

删除和分离颜色变量

不适合您当前的颜色变量？ 没问题！ 您可以通过单击要删除的颜色变量并按退格键，在组件视图的颜色选项卡中轻松删除颜色变量。 您也可以按住 Control 单击颜色样本，然后选择删除。

在其他情况下，您可能想要更改使用颜色变量的单个图层的颜色，而无需更新颜色变量本身。 在这种情况下，您需要先分离该颜色变量。 为此，请选择要从中分离颜色变量的图层，打开检查器中的颜色选择器弹出窗口，然后单击分离变量。

使用查找和替换表

您可以使用“查找和替换颜色”工作表来查找设计中相似的颜色，并将其替换为颜色变量。 您还可以使用它来替换同一颜色的多个不透明度——只需记住，当您使用颜色变量替换它们时，它不会保留这些不透明度。

要替换颜色变量，请选择编辑 > 查找和替换颜色...（或按 ⌘⌥F）以调出“查找和替换颜色”菜单。 从那里，选择要在设计中查找的颜色或颜色变量，以及要替换它的颜色或颜色变量。

使用颜色令牌轻松交付

我们知道颜色变量使在 Sketch 中进行设计变得轻而易举，但是交付又如何呢？ 使用 颜色令牌，我们已经涵盖了它。

颜色令牌为您提供了一组始终最新的值，这些值与您的文档或库中的颜色变量相匹配。 您可以通过组件 Web 视图轻松生成颜色令牌。 只需打开“颜色变量”视图，然后单击左下角的“导出颜色令牌”按钮。

目前，颜色令牌可以 CSS 和 JSON 格式下载，您可以从将颜色变量导出为令牌模式窗口中的下拉菜单中选择。 完成后，按下载以保存颜色令牌的副本。

公共链接

您还可以为任何格式生成一个 URL，该 URL 会随着您所做的任何更改而保持最新。 有三个选项可供选择，您可以在底部下拉菜单中找到它们

• 启用最新更新的链接
• 启用最新 Star 的链接
• 禁用链接

这就是您所需要的 — 充分利用颜色变量所需的一切。我们希望您喜欢使用它们，如果您设计出任何让您自豪的作品，请 与我们分享！谁知道呢，您甚至可能成为我们的下一个 #MadeWithSketch 英雄 👀