Figma 变量与模式：一套组件适配浅色/深色与多品牌

你将得到什么

通过 Figma 的 Variables(变量) 与 Modes(模式)，把颜色/字号/圆角/间距等设计Token做成可切换参数。同一套组件不需要复制两份，就能一键切换浅色/深色、品牌A/品牌B，并且可在页面级批量替换。

准备工作(5分钟)

确认你的 Figma 已支持 Variables 功能(一般无需额外开启)。
把组件库与Token维护在稳定的文件/团队结构中，减少跨文件引用断链。
先确定要切换的维度：主题(浅色/深色)或品牌(BrandA/BrandB)。建议先做一个维度跑通流程。

步骤1：建立变量集合(Variable Collections)

创建一个集合，例如：Tokens - Color，并优先用“语义命名”而不是色值命名。

color/bg/default color/bg/surface color/text/primary color/text/secondary color/border/default color/brand/primary

命名建议：用“/”做层级，后期检索、批量管理更顺手。

步骤2：为集合创建模式(Modes)

在 Tokens - Color 集合中添加两种模式：Light 与 Dark，然后给每个变量分别填值。

color/bg/default: Light=#FFFFFF, Dark=#0E0F12 color/text/primary: Light=#111318, Dark=#E9ECF1 color/border/default: Light=#E6E8EE, Dark=#2A2E3A color/brand/primary: Light=#2F6BFF, Dark=#7BA3FF

不要一口气变量化全部颜色。先覆盖背景/文字/边框/主色等核心Token(10~20个)就够验证体系。

步骤3：把组件从固定填色改为绑定变量

以按钮组件为例，逐项替换为变量绑定：

背景 Fill 绑定到 color/brand/primary
文字颜色绑定到 color/text/onBrand(没有就新建)
描边 Stroke 绑定到 color/border/default

如果你之前使用 Color Styles，可以渐进迁移：先让组件绑定变量，旧样式保留一段时间，避免一次性全改难回滚。

步骤4：在页面/Frame 上切换模式(批量见效)

把组件实例放到页面中，选中最外层 Frame 或页面。
在 Variables/Modes 中切换 Light/Dark，观察组件是否整体联动变化。
若某个元素不变：多半是它仍是固定色值或旧样式，或实例被手动覆盖了属性。

实践建议：做一个对照画板，左侧Light右侧Dark，更容易发现对比度与遗漏项。

步骤5：扩展到多品牌(BrandA/BrandB)

多品牌与深色模式同理。你可以把模式改成 BrandA/BrandB，或拆成两个集合分别管理主题与品牌主色，从而组合出 BrandA+Dark / BrandB+Light。

常见坑位与排错清单

只改了主层忘了子层：检查图标、状态层(hover/pressed/disabled)是否也绑定变量。
实例局部覆盖导致不跟随：对实例执行 Reset overrides，再看是否恢复联动。
变量重复创建：统一在一个集合里维护，减少同名Token分散。
深色对比度不够：建议建立文字/背景对照表，至少保证常用字号可读。

最小可用Token清单(建议先做这12个)

color/bg/default color/bg/surface color/bg/elevated color/text/primary color/text/secondary color/text/tertiary color/text/onBrand color/border/default color/border/strong color/brand/primary color/state/success color/state/danger