Figma Variables 怎么为组件切换主题模式

要让 Figma 组件在浅色和深色主题之间切换，关键不是再做一套组件，而是把颜色值放进同一个 Variables 集合的不同 Mode。组件属性绑定变量后，只需切换组件或父级 Frame 的变量模式，背景、文字和强调色就会一起更新。

官方说明：https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables

完整路径是：Variables 建立 Theme 集合与 Light、Dark 两列 → 在 Fill 等属性中绑定颜色变量 → 选中组件或父级 Frame，在 Appearance 的 Apply variable mode 中选择模式。

创建变量模式需要相应套餐支持，单个集合可创建的模式数量也会随套餐变化。开始前还要确认自己对文件有编辑权限。

步骤一：创建 Theme 集合和两种模式

从文件左侧导航栏点击 Variables，打开变量视图。新建集合并命名为 Theme，先创建三个 Color 变量：surface/bg、text/primary 和 accent/brand。

打开 Theme 集合，在列标题右侧点击 New variable mode。Figma 会把第一列的值复制到新列；把左列命名为 Light，右列命名为 Dark，再分别填写两套颜色。集合最左列是默认模式，因此通常把 Light 放在最左侧。

成功标志：变量表里能同时看到 Light、Dark 两列，三个变量在每列都有色块和值；切换列时不存在空白单元格。

步骤二：把变量绑定到组件属性

回到画布，选中组件的背景层。在右侧 Fill 区域点击 Apply styles and variables，从 Theme 集合选择 surface/bg。再选中文字层，用同样方法把 Fill 绑定到 text/primary；按钮或重点元素可以绑定 accent/brand。

成功标志：Fill 不再显示孤立的固定色值，而是显示所绑定的变量名称。若某一层在切换主题后颜色不变，优先检查这一层是否仍使用硬编码颜色。

步骤三：在 Appearance 中切换模式

选中组件实例、组件、组件集或包住组件的父级 Frame。在右侧 Appearance 区域点击 Apply variable mode，悬停 Theme 集合并选择 Dark。Figma 允许 Frame、组件、分组、Section 和页面使用模式，因此更推荐在承载一组界面的父级容器上切换。

成功标志：画布中的背景、文字和强调色同时更新，左侧 Layers 面板中所选对象旁出现模式图标和 Dark 标签。切回 Light 时同一组属性应恢复浅色值。

模式不生效时按这几个位置排查

对象的模式默认是 Auto，会沿父级层级向上寻找已经指定的模式；如果所有父级也都是 Auto，就回退到集合默认模式。主题看似“自己变回去了”时，通常不是变量失效，而是对象正在继承父级或默认列。

为什么切换模式后组件 Variant 没有变化？

颜色变量只会改变已经绑定的设计属性。如果想让组件 Variant 随模式切换，需要把 String、Number 或 Boolean 变量映射到实例的 Variant 属性，而且变量值必须与 Variant 属性值一致。

可以只切换某一个组件吗？

可以。选中该组件，在 Appearance 中为它显式指定 Light 或 Dark。它将不再跟随父级 Auto 模式，适合做主题对照或局部反色区域。

这套做法的核心是“值放进模式，组件只绑定变量”。以后新增高对比主题或品牌主题，只需在 Theme 集合增加模式并填写变量值，不必重新复制组件和逐层改色。