新增:智能动画 — 为您的原型添加动画。 了解更多

跳过导航

颜色变量

上次更新于 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。您还可以从网页应用程序检查器复制单个颜色变量的值。