Figma 如何用变量模式切换浅色与深色主题

要在 Figma 中用一套界面切换浅色与深色主题，核心做法是：把颜色从“具体色值”改成“语义变量”，在同一个变量集合里建立 Light 和 Dark 两个模式，再把模式应用到 Frame 或 Page。完成后不需要复制画板逐个改色，切换模式就能让背景、文字、边框和主操作色一起更新。

Figma 官方入口：https://www.figma.com/

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

创建和使用多个变量模式需要 Figma 当前支持该能力的 Education、Professional、Organization 或 Enterprise 方案，可创建的模式数量取决于方案。如果界面里没有新增模式入口，先检查文件编辑权限和当前方案，而不是反复寻找隐藏按钮。

先看最终结果：什么状态才算切换成功

这次以一个设置卡片为例。验收时不要只看画布“变暗了”，而要检查以下四件事：

• 同一个 Frame 能在 Light 与 Dark 之间切换，没有复制另一套图层。
• 页面背景、卡片表面、主文字、次文字、边框和按钮都来自变量，而不是残留的固定色值。
• 切到 Dark 后，文字与背景仍有清楚对比，边框没有消失，主按钮仍然突出。
• 子图层保持 Auto 时会继承父级 Frame 的模式；确实需要例外的局部区域才单独指定模式。

把这四条当作最后的验收表，后面的每一步就不会变成“只会点按钮，却不知道有没有生效”。

步骤 1：打开 Variables 并创建 Theme 集合

1. 打开需要制作主题的 Figma Design 文件。
2. 在左侧导航点击 Variables，进入变量视图。当前版本的变量入口位于左侧导航，不必先在画布上取消选择。
3. 在变量视图的集合区域打开更多选项，选择 Create collection，将集合命名为 Theme。
4. 在集合内点击 Create variable，类型选择 Color。

成功状态：变量视图中能看到名为 Theme 的集合，表格里至少已有一条 Color 变量。若无法创建集合，先创建第一条变量，再回到集合管理入口。

建议从一开始就用语义名称，而不是把变量叫作 white、gray-900。主题切换关心的是颜色承担的职责，例如页面背景或主文字，而不是某个固定色号。

步骤 2：创建 Light 与 Dark 两个模式

1. 打开 Theme 集合，把现有第一列模式重命名为 Light。
2. 在列标题右侧点击 New variable mode，新列会先复制第一列的值。
3. 把新列重命名为 Dark。
4. 依次创建页面背景、表面、主文字、次文字、边框和主操作色变量，再为两列填写对应色值。

这些色值只是示例，实际项目应使用自己的品牌与可访问性标准。重点是两列共享同一组变量名：设计层绑定的是 text/primary，模式决定此刻表达浅色值还是深色值。

成功状态：Theme 表格里能同时看到 Light 和 Dark 两列，同一变量行在两列中拥有不同颜色。最左侧的列是集合默认模式；需要调整默认模式时，可将目标列拖到最左侧，或通过模式标题菜单设为默认。

步骤 3：把颜色变量绑定到界面属性

只创建变量不会让旧界面自动切换。接下来要把画布上的固定颜色逐一替换成变量引用。

1. 选中最外层页面 Frame，在右侧属性面板找到 Fill。
2. 点击颜色属性旁的 Apply variable，选择 Theme → bg/page。
3. 选中卡片或弹窗容器，把 Fill 绑定到 bg/surface，把 Stroke 绑定到 border/default。
4. 分别选中标题、正文和辅助说明，把文字颜色绑定到 text/primary 或 text/secondary。
5. 选中主按钮，把按钮填充绑定到 action/primary。按钮文字应绑定到单独的前景色变量；不要假设所有主题下纯白都合适。

成功状态：重新选中这些图层时，颜色属性显示变量名称或变量图标，而不是只显示十六进制色值。建议从最外层背景一路检查到最内层图标，避免遗漏阴影、描边、图标填充或悬停态。

步骤 4：在 Frame 或 Page 上应用变量模式

变量模式可以应用到图层、组、Frame、组件、组件集、Section 和 Page。做单个页面对照时，给最外层 Frame 指定模式最直观；希望整页一起切换时，可以给 Page 指定模式。

1. 选中最外层 Frame。
2. 在右侧 Appearance 区域点击 Apply variable mode。
3. 悬停到 Theme 集合，选择 Dark。
4. 观察左侧 Layers 面板，指定模式的对象旁会出现带模式名称的标记。

如果要切换整个 Page，先取消画布上的所有选择，然后在右侧 Page 区域点击 Apply variable mode，再选择 Theme → Dark。

成功状态：父级 Frame 或 Page 显示 Dark 模式，内部使用 Theme 变量的图层同步表达 Dark 列中的值。子对象保持 Auto 时会沿父级层级向上查找已指定的模式，这正是主题继承能工作的原因。

步骤 5：切换模式并核对最终结果

为了验收，可以复制一次最外层 Frame 作为对照：左侧指定 Light，右侧指定 Dark。复制 Frame 是为了并排评审，不是为了维护两套颜色。

按下面顺序检查，比凭感觉看“像不像暗色主题”更可靠：

1. 背景层：页面背景和卡片表面是否有层级差，而不是变成一整块相同深色。
2. 文字层：主文字是否清晰，次文字是否仍能辨认，又没有抢走主信息层级。
3. 边界层：输入框、分隔线和卡片边框在 Dark 模式下是否仍可见。
4. 操作层：主按钮是否保持强调，按钮文字是否有足够对比。
5. 继承层：临时把父级从 Dark 切回 Light，所有保持 Auto 的子图层是否同步恢复。

验收通过：两个 Frame 的结构、内容和图层数量一致，只是 Theme 模式不同；两边没有为了修补颜色而新增临时覆盖层。

不生效时按现象修正

只改了背景，文字和边框没有变化

这通常不是模式故障，而是部分属性仍使用固定色值。选中未变化的图层，在 Fill、Stroke、文字颜色和 Effect 中逐项检查变量图标。把遗漏属性绑定到对应语义变量后，再切换父级模式。

子组件没有继承父级模式

先检查子对象是否被显式指定为某个模式。显式指定会覆盖父级继承；希望它跟随父级时，把子对象恢复为 Auto。如果组件来自变量库且出现模式冲突，还要发布变量集合更新，并在使用文件中接受库更新。

找不到 Apply variable mode

对象或其内部图层至少要使用一个拥有多个模式的变量，模式入口才有实际意义。还要确认当前文件有可用的本地变量集合、你有编辑权限，并且方案支持创建和使用多个模式。

切换后对比度不够

不要在图层上直接覆盖一个“看起来更亮”的固定色。回到 Theme 集合调整 Dark 列中的语义值，再检查所有引用位置。这样修一次就能同步整个设计系统，也能留下清晰的主题决策记录。

整理默认模式和交付记录

交付前，把最常用的模式放在集合最左侧作为默认模式。对象或 Page 处于 Auto 或 Default 时，会使用当前默认模式；已经显式绑定到某个具体模式的对象，不会因为默认列改变而自动改绑。

最后建议在设计系统说明页记录三项内容：

• 变量职责：每个语义变量允许用在哪些属性和组件。
• 模式规则：Page、业务 Frame 和组件内部谁负责指定模式，谁保持 Auto。
• 验收结果：Light 与 Dark 对照 Frame、未绑定固定色的检查结果，以及仍需单独处理的插图或图片资源。

完成这些记录后，浅色与深色主题就不再是两套难以同步的画板，而是一套语义变量在两个上下文中的不同表达。以后新增高对比模式或其他品牌主题时，可以继续增加模式列，而不用重新绑定所有图层。

相关问题

Light 和 Dark 必须放在同一个集合吗？

用于同一批语义变量的主题值应放在同一个集合的不同模式中，这样 Frame 切换模式时才能让同一变量表达不同值。

组件内部要不要手动指定 Dark？

多数可复用组件应保持 Auto，让组件从外部容器继承主题。只有组件内部确实需要固定或嵌套另一种上下文时，才显式指定模式。

能不能只给 Page 设置模式？

可以。Page 模式适合整页统一预览；Frame 模式更适合在同一页面并排比较 Light 与 Dark，或展示局部主题。