使用颜色变量,您可以设置在整个文档中同步的颜色和渐变。当您更改颜色变量时,这些更改将反映在使用它的所有图层中。您可以创建特定于某个文档的颜色变量,也可以将其共享到库中,以便在其他设计中使用。
- 颜色变量
可以加快您的工作流程,并使设计井井有条。
- 它们在您的文档中同步。当您更改颜色变量时,它会更新所有使用它的图层。
- 所有现有的全局颜色预设现在都是颜色变量,并存在于它们自己的本地库中。
- 您可以将颜色变量导出为 颜色标记 或 复制其各个值 从 Web 应用检查器。
我们还添加了对 Web 应用检查器中的颜色变量 的支持,使其非常适合交付。
创建颜色变量
您可以从检查器、组件视图或查找和替换菜单创建新的颜色变量。
从检查器创建颜色变量
选择任何图层,然后单击检查器中任何样式属性的颜色井。选择您要使用的纯色 ,然后单击创建颜色变量。为其命名,然后单击创建或按 ↵ 保存。您也可以使用吸管工具
从 Mac 应用内或应用外的显示器中创建颜色变量。
从组件视图创建颜色变量
切换到组件视图 ,单击工具栏中的颜色选项卡
,然后单击
或创建颜色变量按钮。使用检查器选择您想要的颜色,并为颜色变量命名。单击预览网格中的任意位置保存。
组织颜色变量
对颜色变量进行分组
要对颜色变量进行分组,请切换到组件视图 ,转到颜色选项卡,按住 ⇧ 并选择您要分组的颜色变量。按住 Control 键单击您的选择,然后选择分组。然后,您可以双击左侧边栏中组的标题
并根据需要对其进行重命名。您也可以将颜色变量拖放到左侧边栏中的现有组中
。
与符号或文本样式类似,您也可以通过在颜色变量名称中使用“/”来对颜色变量进行分组。所有“/”之前的部分将成为组名,所有“/”之后的部分将成为该组中组件的名称。例如,Primary/light 和 Primary/dark 将成为名为 Primary 的组的一部分。
在组件视图中组织颜色变量
颜色变量和组将按字母顺序自动组织。您可以在颜色变量之前使用数字,以便它们按最适合您的顺序显示。
应用颜色变量
从检查器应用颜色变量
您可以通过两种方式从检查器应用颜色变量。在这两种情况下,您都需要选择要应用颜色变量的图层。在任何样式属性的颜色井中,您可以从网格中选择您想要的颜色变量。您可以在该文档或已启用的任何库的颜色变量之间切换。您也可以通过单击颜色井旁边的颜色色板图标 来应用颜色变量。
注意:当您将颜色变量用于文本图层的颜色,然后在同一文档中创建新的文本图层时,您的新文本图层也会使用该颜色变量。
从插入窗口应用颜色变量
选择窗口 > 组件打开插入窗口,或使用键盘快捷键 C。单击左上角边栏中的颜色 选项卡,然后将您想要的颜色色板拖放到您要应用它的图层上。您也可以将颜色变量拖放到检查器中填充面板中的任何颜色井。
从查找和替换菜单应用颜色变量
在查找和替换菜单中,单击“替换为”旁边的颜色井,然后选择您要应用的颜色变量。单击任意位置关闭颜色选择器,然后点击替换更新颜色。
编辑颜色变量
您可以从检查器、组件视图或查找和替换菜单编辑颜色变量。
您可以按住 Control 键单击任何颜色变量,然后选择将 HEX、RGB、HSL、Objective-C 或 Swift 代码颜色值复制到剪贴板。
从检查器编辑颜色变量
选择任何图层,然后单击检查器中的颜色井。单击编辑变量并选择新的颜色。选择更新保存。请记住,您只能编辑特定于文档的颜色变量。如果您要编辑库中的颜色变量,则必须在库文档中编辑它们。
从组件视图编辑颜色变量
切换到 组件视图 ,然后单击颜色
选项卡。单击您要编辑的颜色色板,并使用检查器选择新的颜色。更改将自动预览和保存。
重命名颜色变量
要重命名颜色变量,请切换到组件视图,然后单击颜色选项卡。然后,选择您要重命名的颜色色板。在检查器中的名称部分,输入您的新名称。您的更改将自动保存。您也可以按住 Control 键单击颜色色板并选择重命名。
删除颜色变量
要删除颜色变量,请切换到组件视图,然后单击颜色 选项卡。选择您要删除的颜色变量的色板,然后按退格键。您也可以按住 Control 键单击颜色色板并选择删除。
分离颜色变量
您可能希望更改使用颜色变量的单个图层的颜色,而不更新颜色变量本身。在这种情况下,您需要先分离该颜色变量。
要从检查器分离颜色变量,请选择要从其分离颜色变量的图层,单击检查器中样式菜单中的颜色井,然后单击分离变量。

查找和替换特定的颜色或颜色变量
选择编辑 > 查找和替换颜色…(或按 ⌘⌥F)打开查找和替换颜色菜单。从那里,选择您要从设计中查找的颜色或颜色变量,以及您要替换它的颜色或颜色变量。

启用“包含此颜色的所有不透明度”,以查找所有具有不同 alpha 但 RGB 或 HEX 值相同的所有颜色。
启用“保留原始不透明度”,以在替换颜色时保持这些不同的 alpha 完好无损。
注意:我们发布了一个 颜色变量迁移器 插件,可以轻松地将颜色变量应用于旧文档中的图层和样式。
在开发者交付中使用颜色变量
颜色变量对于保持设计和代码项目之间的一致性非常有用。您可以将颜色变量下载为颜色令牌、CSS 变量或 JSON 格式,甚至生成一个动态更新最新值的 URL。您还可以从网页应用程序检查器复制单个颜色变量的值。