Figma 变量模式怎样切换设计主题

Figma 通过同一变量集合中的不同模式切换设计主题：先为同名颜色变量填写 Light、Dark 两套值，再把图层属性绑定到这些变量，最后在画框上选择该集合的模式。切换模式不会自动替换写死的色值，只有已经绑定并按模式解析的属性才会变化。

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

先明确完成后的画面

本例制作一张“阅读卡片”：画框背景、卡片底色和正文颜色分别由 bg/canvas、bg/card、text/body 控制。完成后，在同一个画框选择 Dark，应同时看到深色背景、稍浅的卡片和浅色文字；切回 Light，布局和文字内容保持原样。

需要文件编辑权限，以及支持多个变量模式的方案。可创建模式数量随方案而异；如果看不到新增模式入口，应先确认账号可用功能。下面使用官方文档中的英文界面标签辅助定位，插图均为原创操作说明图，不是真实软件截图或本次操作记录。

步骤一：在 Variables 中建立主题集合与两列模式

点击左侧导航的 Variables 打开变量视图。选用一个专用于本例的集合并命名为 Theme；需要新集合时，在变量侧栏的 More options → Create collection 创建。如果文件尚无变量，可先用 + Create variable → Color 建立首个颜色变量，再整理集合。

在集合内创建下面三个 Color 变量，把第一列模式命名为 Light。然后点击列标题右侧 New variable mode，新增 Dark，并逐项修改 Dark 列的值。新模式起初复制已有列的值，新增一列并不代表已经产生暗色主题。

进入下一步前，确认 Theme 中是三行变量、两列不同模式值，而不是建立两套互不关联的 Light 变量和 Dark 变量。本例色值仅用于演示，不能据此声称完整产品已通过对比度检查。

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

回到画布，创建或选中阅读卡片所在的外层画框。选中画框后，在右侧 Fill → Apply styles and variables 打开选择器，搜索并选择 Theme 中的 bg/canvas。再选中卡片底层矩形，在同一路径选择 bg/card；最后选中正文文字层，为其 Fill 选择 text/body。

完成状态应是三个目标属性都关联到变量，而不是只把颜色手动改成表格里的十六进制值。变量选择器中的颜色变量使用方形色块，颜色样式则使用圆形色块；不要只凭颜色相同就认定选中了同一个变量。

步骤三：在画框 Appearance 中选择 Dark

选中包含上述图层的外层画框，在右侧 Appearance → Apply variable mode → Theme → Dark 选择模式。对象及其嵌套图层需要用到包含多个模式的变量，才能按对应条件切换。设置后，左侧 Layers 的画框名称附近会出现模式标签。

现在分别观察背景、卡片与文字，再用同一路径选择 Light。目标是两套值都能正确显示，而不只是模式菜单里出现了一个名称。如果希望子图层跟随父容器，将其模式设置为 Auto；子图层显式指定 Light 时，不会因为外层切成 Dark 就自动放弃自身的指定模式。

只有部分颜色变化时，按属性排查

集合默认模式也不等于对象显式选择的模式。修改集合默认列会影响依赖默认值的对象；已显式指定某个模式的对象仍保持该指定。第一次练习建议只用本地 Theme 集合，避免同时引入跨文件库更新问题。

交接时保存哪些信息

在设计文件说明中记录集合名 Theme、变量名、两列模式名，以及哪个外层画框负责指定模式。保留一份 Light 和一份 Dark 展示副本可以方便评审，但主题能力本身应来自变量绑定，不靠逐层重新改色。

Figma 界面切成深色，设计会同步变吗？

软件自身的界面外观与画布设计变量是两件事。设计内容需要按上述方式绑定变量并选择对应模式。

每个图层都必须指定 Dark 吗？

不需要。让外层容器指定模式、内部使用 Auto，更容易统一管理；需要独立展示另一主题的局部区域才另行指定。

画框切换主题会自动让上线网页切换主题吗？

不会。这里切换的是设计文件中的变量取值。实际应用仍需要实现自己的主题变量、状态和切换逻辑。

• Figma：创建变量与集合
• Figma：将变量应用到设计属性
• Figma：变量模式和继承