Figma Variables 如何让同一组件切换浅色和深色主题

同一个卡片组件既要放在浅色页面，也要放在深色页面时，不必复制两份再逐个改颜色。用 Figma Variables 保存两套值，再给组件指定对应的 mode，就能让背景和文字一起切换。官方地址：https://www.figma.com/

关键做法是“同一变量、两套 mode、一次绑定”：先把主题值放进变量集合，再让组件继承或指定 mode。只切换变量面板里的列，不会自动改变画布，必须完成组件绑定和应用 mode 两步。

先把主题值放进同一个变量集合

第1步：打开变量视图。先在画布空白处按 Esc 取消选择，在右侧边栏找到 Local variables，点击 Open variables。新建集合并命名为 Theme，再创建两个 Color 类型变量：surface 用于卡片背景，text 用于主要文字。

第2步：增加深色 mode。在 Theme 集合表头右侧点击 New variable mode，把新列改名为 Dark。保留第一列为 Light，例如 surface 使用浅色背景、text 使用深色文字；在 Dark 列填入深色背景和浅色文字。两列的变量名必须相同，这样组件只需要绑定一次。

看到同一行同时出现 Light、Dark 两个值，就说明 mode 建立完成。变量集合的默认 mode 通常是第一列；如果暂时没有指定对象 mode，组件会先使用它。

把 surface 和 text 绑定到同一组件

第3步：绑定组件属性。关闭 Variables 视图，选中卡片的背景图层，在右侧 Appearance 区域点击填充颜色旁的变量图标，选择 Theme/surface。再选中文字图层，进入 Text 或颜色属性，选择 Theme/text。

绑定完成后，属性面板显示的是变量名，而不是一个孤立的十六进制颜色值。若卡片由多个嵌套图层组成，优先在主组件中完成绑定，实例会沿用这些变量；局部覆盖时再检查该图层是否被写入固定颜色。

切换 mode 后如何确认组件真的变了

第4步：指定深色模式。选中卡片组件或包含它的 Frame，在右侧 Appearance 区域点击 Apply variable mode。悬停 Theme 集合，选择 Dark。页面级切换时先取消所有对象选择，再从右侧 Page 区域使用同样的入口。

先看画布：卡片背景应变为 Dark 列的值，文字应变为另一列的值；再看 Layers 面板：组件名称旁应出现 mode 图标和 Dark 标签。最后切回 Light，确认两种状态都能恢复，而不是某个图层被固定值卡住。

切换没有生效时先查这三处

第一，检查颜色是否真的绑定到 Theme/surface 和 Theme/text，只建立 mode 不会替换固定颜色。第二，检查变量是否属于同一个本地集合，跨集合时需要分别确认集合的 mode。第三，检查父级是否已经指定了 mode：对象处于 Auto 时会继承父容器的设置，父级没有设置才回退到集合默认 mode。

如果只有文字变化而背景不变，通常是背景填充仍是固定色；如果组件切换后又恢复，检查实例是否存在局部覆盖。把 Light、Dark 两个状态各留一个验收 Frame，能更快发现遗漏。

相关问题

变量 mode 能不能用于间距或字号？

可以。变量不只保存颜色，也能保存数字、字符串和布尔值，因此可以用不同 mode 表达设备尺寸、文案语言或组件开关。不过每种变量仍要绑定到它支持的设计属性，不能把颜色变量直接用于字号。

组件和页面应该在哪里切换？

需要局部预览时选组件或 Frame，在 Appearance 中切换；需要整页预览时取消选择对象，在 Page 区域切换。局部对象设为 Auto，就会继续继承父级的 mode。