Figma 原型怎么切换变量模式：从 Set variable mode 到预览验收

做浅色、深色两套原型时，最容易失控的是复制整页后逐个改颜色：一个按钮漏改，预览就会出现半套主题。Figma 的变量模式允许同一组设计绑定多个值，原型交互再用 Set variable mode 切换当前页面的模式。关键不是把模式名称选出来，而是确认哪些对象处于 Auto，哪些对象被显式指定了其他模式。

第1步：先确认变量集合和模式已经准备好

打开 Figma 文件左侧导航栏的 Variables，进入要用于原型的 collection。每个变量需要有对应的多组值，例如 Light 和 Dark。官方说明里，mode 是变量在不同设计上下文中的值集合；颜色、文字和数字都可以参与切换。

如果只有一个 mode，先在变量列标题右侧点击 New variable mode，或者右键已有 mode 选择复制。不要只给页面起一个 Light 或 Dark 的名字；真正参与预览的是变量值是否已经应用到画布对象。

第2步：让页面和对象的模式边界保持清楚

回到画布，选中包含变量的 frame 或组件，在右侧 Appearance 区域找到 Apply variable mode。如果希望它跟随页面级动作，保留 Auto；如果这个组件必须固定使用某个模式，再显式选择 collection 和 mode。显式设置会优先于页面级模式，所以这是最需要记录的边界。

建议先选一个明显的颜色变量做验收，再扩展到字号、间距或文案。这样即使模式没有按预期切换，也能快速判断是变量没有绑定、对象被固定，还是动作配置有问题。

第3步：在 Interaction 面板添加 Set variable mode

选中用来切换主题的按钮或开关，进入右侧 Prototype，新建一个交互连接。在交互动作下拉框里选择 Set variable mode，第一个下拉框选择变量 collection，第二个下拉框选择目标 mode，例如 Dark。保存后回看动作详情，collection 和 mode 都应该有明确名称。

这里的动作作用域是当前页面。页面上处于 Auto 的对象会使用新的 mode；已经在对象或父容器上固定模式的元素继续保持原值。若要做深色主题切换，按钮、背景、文字颜色等都应使用同一 collection 中的变量，避免预览只有部分区域改变。

第4步：用预览状态验收，而不是只看配置文字

点击右上角预览，触发刚才的按钮或开关。先记录初始状态，再触发一次，检查背景、文字和主要控件是否同时变化。若只有部分区域变化，回到画布逐层查看变量绑定和 mode 标签；若出现信息图标，还要检查变量版本或库更新是否造成 mode 冲突。

常见问题

Set variable mode 能切换单个对象吗？

它主要改变当前页面的 mode。单个对象需要在 Appearance 中使用 Apply variable mode 直接指定，或让对象保持 Auto 后跟随父容器。

为什么页面切换后某个组件没有变化？

先检查该组件或父 frame 是否显式指定了 mode；如果是，它不会采用页面动作切换后的值。再确认组件实际使用的是同一个变量 collection。

没有付费计划可以创建原型变量模式吗？

以 Figma 官方帮助页当前列出的计划和文件权限为准；具体账号是否能创建 mode，还要看工作区计划与文件的编辑权限。

把 Figma 变量模式用于原型时，最稳的验收顺序是“集合有多个 mode、对象保持正确继承关系、Interaction 指向目标 mode、预览中多个绑定属性一起变化”。这样切换主题就从一次视觉碰运气，变成可复核的界面操作。