Figma 怎样用变量统一组件颜色

如果按钮、标签和卡片的颜色散落在各个组件里，改一次品牌色就要逐个检查。Figma 的变量可以把颜色集中到变量集合，再把组件的 Fill 绑定到变量；需要浅色和深色预览时，只需为同一变量提供不同模式的值。

这篇只处理三个动作：定义颜色变量、把变量应用到组件、切换模式预览。示例使用一个名为 Brand Colors 的集合和一个名为 color/brand/primary 的颜色变量。

官方资料：https://help.figma.com/hc/en-us/articles/14506821864087-Overview-of-variables-collections-and-modes

创建与管理说明：https://help.figma.com/hc/en-us/articles/15145852043927-Create-and-manage-variables-and-collections

先把颜色从组件里集中出来

打开一个可以编辑的 Figma Design 文件，在左侧导航进入 Variables。这里的目标不是马上调整某个按钮，而是先建立一个能被多个组件使用的颜色来源。变量集合负责归类，变量负责保存具体颜色值，模式则负责保存同一个变量在不同场景下的值。

1. 在 Variables 视图打开集合区域，点击 More options，选择 Create collection。
2. 把集合命名为 Brand Colors，让后续的品牌色、文字色和状态色有明确归属。
3. 在集合中点击 New variable，类型选择 Color，命名为 color/brand/primary。
4. 在 Light 列填入主品牌色。颜色变量支持颜色值和透明度，因此按钮填充与其他颜色属性都可以从这里引用。

完成后，变量表里应能看到一个颜色类型的变量。此时它只是一个可复用的颜色定义，还没有改变画布上的任何组件。

为同一个颜色变量补上深色模式

如果只需要统一品牌色，一个模式就够用；如果组件需要在浅色和深色界面间切换，就在变量集合中增加第二个模式。模式属于集合，不是每个组件单独保存的一份颜色副本。

1. 在 Brand Colors 集合的列标题区域点击 New variable mode。
2. 将新列命名为 Dark，保留 Light 作为默认模式。
3. 在 color/brand/primary 的 Dark 列填入深色界面中需要的品牌色。
4. 如果颜色变量较多，可以按 text、surface、border 等组名整理；分组只改变查找方式，不会自动改变组件绑定。

这里要记住一个容易混淆的点：变量模式是同一变量的多组值。组件先绑定变量，之后才根据页面或容器使用的模式读取对应颜色。

在组件的 Fill 中应用颜色变量

回到画布，选中按钮组件或按钮主组件。右侧属性面板的 Appearance 区域会显示 Fill。不要直接覆盖颜色值，而是从 Fill 的变量入口选择刚才创建的 color/brand/primary。

1. 选中按钮组件，在右侧 Appearance 的 Fill 位置打开变量选择器。
2. 展开 Brand Colors，选择 color/brand/primary。
3. 观察 Fill 旁边的变量标记；它表示这里保存的是变量绑定，而不是一次性的手动颜色。
4. 如果画布中有多个相同组件实例，优先在主组件或共享样式使用的位置绑定，避免只改到某一个实例。

绑定后，组件仍然可以保持自己的结构、圆角和文字，只把颜色值交给变量管理。以后修改变量值时，依赖它的组件会一起读取新值。

切换页面模式，确认组件颜色一起变化

定义了 Light 和 Dark 两列后，预览重点是确认“多个组件都绑定了变量”，而不是只看一个按钮是否变色。先取消画布上的对象选择，让右侧显示 Page 区域，再从 Apply variable mode 中选择对应模式。

1. 点击画布空白处，确保当前没有选中具体图层。
2. 在右侧 Page 区域找到 Apply variable mode，展开 Brand Colors。
3. 选择 Dark，观察已绑定颜色变量的按钮、标签或卡片同步使用 Dark 列的颜色。
4. 切回 Light，确认这些组件恢复 Light 列的颜色。

如果只有一个组件发生变化，优先检查其他组件的 Fill 是否仍是手动颜色；如果全部没有变化，再检查页面是否确实存在多模式集合，以及选中的变量是不是 Brand Colors 中的目标变量。

后续改色时只改变量值

当颜色绑定关系稳定后，品牌改版只需要回到 Variables，修改 color/brand/primary 在 Light 或 Dark 列中的值。不要为了“看起来一样”再给组件填一个相同的手动颜色，否则以后切换模式时，这个组件不会跟随变量。

这套做法适合什么场景

按钮、链接、输入框边框、卡片背景和品牌强调色都适合使用颜色变量。它最有价值的地方，是把“组件长什么样”和“当前主题采用什么颜色”分开：组件负责结构，变量集合负责主题值，模式负责上下文。

如果只是一次性的装饰色，直接设置 Fill 可能更快；如果一个颜色会被多个组件复用，或者设计需要浅色、深色、多品牌切换，先建立变量再绑定更容易长期维护。

常见问题

变量和颜色样式要怎么选？

颜色变量适合保存可按模式变化的原始颜色值，也能被多个设计属性引用；已有颜色样式的项目可以逐步把需要主题切换的颜色迁移到变量，不必一次性重做所有组件。

改了 Light 值，Dark 模式为什么不变？

因为两个模式保存的是同一变量的两组值。你修改的是 Light 列，预览仍处于 Dark 时自然不会读取 Light 的颜色；切换到对应模式或分别维护两列即可。

怎样判断组件是真的绑定成功？

选中组件查看 Fill 旁边的变量标记，再切换页面模式。如果组件在两个模式之间同步变化，且多个实例都跟随，说明绑定链路已经建立。