跳过导航

颜色变量

上次更新于 2024年9月17日
6 分钟阅读

使用颜色变量,您可以设置在整个文档中同步的颜色和渐变。 当您更改颜色变量时,这些更改将显示在使用它的所有图层中。 您可以创建特定于某个文档的本地颜色变量,或在库中共享它们以在其他设计中使用。

  • 颜色变量 颜色变量 可以加快您的工作流程并保持设计井然有序。
  • 它们在您的文档中同步。 当您更改颜色变量时,它将更新使用它的任何图层。
  • 任何现有的全局颜色预设现在都是颜色变量,并位于其自己的本地库中。
  • 您可以将颜色变量导出为 颜色令牌 或从 Web 应用程序检查器 复制它们的单个值

我们还增加了对 Web 应用程序检查器中的颜色变量 的支持,使其非常适合交付。

创建颜色变量

创建颜色变量

观看课程

您可以从检查器、组件视图或查找和替换菜单中创建一个新的颜色变量。

从检查器创建颜色变量

选择任何图层,然后在检查器中单击其任何样式属性的颜色框。 选择您想要使用的纯色 椭圆,然后单击创建颜色变量。 为其命名,然后单击创建或按 保存。 您还可以使用取色器工具 取色器工具 从您的显示器,Mac 应用程序内部或外部创建颜色变量。

从组件视图创建颜色变量

切换到组件视图 组件视图标签,单击工具栏中的颜色标签 颜色变量,然后单击 创建创建颜色变量按钮。 使用检查器选择您想要的颜色,并为您的颜色变量命名。 单击预览网格中的任意位置以保存。

组织颜色变量

组织颜色变量

观看课程

分组颜色变量

要对您的颜色变量进行分组,请切换到组件视图 组件视图标签,转到颜色选项卡,按住 并选择您要分组的颜色变量。 在您的选择上按 Control 键单击,然后选择分组。 然后,您可以双击左侧边栏中组的标题 组 并根据需要重命名。 您还可以将颜色变量拖到左侧边栏中现有的组中 组

与符号或文本样式一样,您也可以通过在其名称中使用 / 来分组颜色变量。 / 之前的任何内容都将成为组名,之后的任何内容都将成为该组内组件的名称。 例如,Primary/light 和 Primary/dark 将成为名为 Primary 的组的一部分。

在组件视图中组织颜色变量

颜色变量和组将自动按字母顺序排列。 您可以在颜色变量前面使用数字,以便它们以最适合您的顺序显示。

应用颜色变量

应用颜色变量

观看课程

从检查器应用颜色变量

您可以通过两种方式从检查器应用颜色变量。 在这两种情况下,您都需要选择要应用颜色变量的图层。 在任何样式属性的颜色框中,您可以从网格中选择所需的颜色变量。 您可以在该文档的颜色变量或您已启用的任何库之间切换。 您还可以通过单击颜色框旁边的颜色样本图标 颜色样本 来应用颜色变量。

注意:当您将颜色变量用于文本图层的颜色,然后在同一文档中创建新的文本图层时,您的新文本图层也将使用该颜色变量。

从插入窗口应用颜色变量

选择窗口 > 组件以打开插入窗口,或使用键盘上的快捷键 C。 单击左上方侧边栏中的颜色 颜色变量选项卡,然后将所需的颜色样本拖放到要应用到的图层上。 您还可以将颜色变量拖放到检查器中填充面板中的任何颜色框中。

从查找和替换菜单应用颜色变量

查找和替换菜单中,单击“替换为”旁边的颜色框,然后选择要应用的颜色变量。 单击任意位置以关闭颜色选择器,然后点击替换以更新颜色。

编辑颜色变量

编辑颜色变量

观看课程

您可以从检查器、组件视图或查找和替换菜单编辑颜色变量。

您可以按 Control 键单击任何颜色变量,然后选择将其 HEX、RGB、HSL、Objective-C 或 Swift 代码颜色值复制到剪贴板。

从检查器编辑颜色变量

选择任何图层,然后在检查器中单击颜色框。 单击编辑变量并选择一种新颜色。 选择更新以保存。 请记住,您只能编辑文档本地的颜色变量。 如果要编辑库中的颜色变量,则必须在其库文档中进行编辑。

从组件视图编辑颜色变量

切换到 组件视图 组件视图标签,然后单击颜色 颜色变量选项卡。 单击要编辑的颜色样本,然后使用检查器选择新颜色。 更改将自动预览和保存。

重命名颜色变量

要重命名颜色变量,请切换到组件视图,然后单击颜色选项卡。 然后,选择要重命名的颜色样本。 在检查器的“名称”部分下,键入您的新名称。 您的更改将自动保存。 您还可以按 Control 键单击颜色样本,然后选择重命名

删除颜色变量

要删除颜色变量,请切换到组件视图,然后单击颜色 颜色变量选项卡。 选择要删除的颜色变量的样本,然后按退格键。 您还可以按 Control 键单击颜色样本,然后选择删除

分离颜色变量

您可能想要更改使用颜色变量的单个图层的颜色,而不更新颜色变量本身。 在这种情况下,您需要先分离该颜色变量。

要从检查器中分离颜色变量,请选择要从中分离颜色变量的图层,单击检查器中“样式”菜单中的颜色框,然后单击分离变量

An image showing how to detach a Color Variable from the Inspector

查找和替换特定颜色或颜色变量

查找和替换颜色

观看课程

选择编辑 > 查找和替换颜色...(或按 F)以调出“查找和替换颜色”菜单。 从那里,选择您想要在您的设计中查找的颜色或颜色变量,以及您想要替换它的颜色或颜色变量。

An image showing the Find and Replace Color sheet in Sketch

启用“包括此颜色的所有不透明度”以查找具有不同 alpha 值但具有相同 RGB 或 HEX 值的所有颜色。

启用“保留原始不透明度”以在替换颜色时保持这些不同的 alpha 值不变。

注意:我们发布了一个 颜色变量迁移器 插件,可以轻松地将颜色变量应用于旧文档中的图层和样式。

在开发者交付中使用颜色变量

颜色变量非常适合在设计和代码项目之间保持颜色一致。 您可以将颜色变量下载为 颜色令牌、CSS 变量或 JSON 格式,甚至生成一个 URL,该 URL 会动态更新为最新值。 您还可以从 Web 应用程序检查器 复制单个颜色变量的值。