技术文章

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

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

让我们先快速回顾一下！

颜色变量到底是什么？

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

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

如何创建颜色变量

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

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

使用组件视图。转到“组件视图”中的“颜色”选项卡，然后单击sketch.com/images/icons/mac/monochrome/17x17/plus.svg" alt="创造" title="创造" style="box-sizing: border-box; border: 0px none; font: inherit; margin: 0px; padding: 0px; vertical-align: -12.5%; display: inline-block;"/>图标。使用颜色选择器选择您想要的颜色并为您的变量命名。一旦您对它感到满意，请单击弹出窗口之外的任意位置进行保存。

专业提示：您还可以使用吸管工具从 Mac 应用程序内部或外部的显示屏创建颜色变量。

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

假设您回到该登录页面上工作，并且几乎完成了......但您的客户现在告诉您他们想要更改徽标的颜色。其他设计师可能会惊慌失措，但您不必如此！使用 Sketch，您只需调整颜色变量，它们就会在您的徽标和登陆页面上的所有位置进行更新 - 无论您是在单个文档中使用它们还是作为库的一部分。

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

组织你的颜色变量

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

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

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

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

专业提示：立即创建颜色变量，以便您可以使用它们而不是标准的“非活动灰色”。

使用覆盖

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

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

专业提示：从事复杂的项目？将颜色变量应用到文本和图层样式以使其保持最新状态并使其更易于编辑。

色调

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

删除和分离颜色变量

没有与您当前的颜色变量产生共鸣？没问题！您可以通过单击要删除的颜色变量并按退格键，轻松删除“组件视图”的“颜色”选项卡中的颜色变量。您还可以按住 Control 键并单击色样，然后选择 “删除”。

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

使用查找和替换表

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

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

使用颜色令牌轻松切换

我们知道颜色变量使 Sketch 中的设计变得轻而易举，但是切换呢？有了Color Tokens，我们就解决了这个问题。

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

通过这个示例项目 尝试一下 Color Tokens 。

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

公共链接

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

• 启用最新更新的链接

• 启用最新 Star 的链接

• 禁用链接