Figma 教程：用 Variables 做主题色与间距 Token，一键切换浅色/深色（可直接照做）

你将学到什么

目标：用 Figma 的 Variables（变量）做一套设计 Token（颜色/间距），并通过 Mode 实现浅色/深色主题一键切换。做完后，你可以把这套 Token 直接复用到按钮、卡片、列表等组件里。

这不是概念介绍，而是一套可照做的操作流程；每一步都能在画布上看到结果变化。

Step 0：准备一个最小示例（避免做着做着迷路）

新建一个 Frame（例如 390×844 或 1440×900）。在里面放 3 个对象：

1）一个标题文本

2）一张卡片（矩形或带内容的容器）

3）一个按钮（建议用 Auto Layout）

这样后面绑定变量、切换模式时，变化会非常直观。

Step 1：创建变量集合（Color 与 Spacing）

打开 Variables 面板，创建 2 个集合（Collection）：

Color：用于颜色 Token（背景/表面/文字/主色等）

Spacing：用于间距 Token（4/8/12/16/24 等阶梯）

在 Color 集合里创建变量，命名建议用语义而不是“红/蓝”。示例：

- color/bg

- color/surface

- color/text

- color/primary

- color/primary-contrast

在 Spacing 集合里创建：

- space/4

- space/8

- space/12

- space/16

- space/24

Spacing 用数字阶梯是最常见的做法，后期维护非常省心。

Step 2：为 Color 集合添加 Mode：Light 与 Dark

在 Color 集合里新增两个 Mode：Light、Dark。然后给每个颜色变量分别填两套值。

示例（可按品牌色调整）：

- color/bg：Light=#FFFFFF，Dark=#0B0F14

- color/surface：Light=#F6F7F9，Dark=#121826

- color/text：Light=#111827，Dark=#E5E7EB

- color/primary：Light=#2563EB，Dark=#60A5FA

- color/primary-contrast：Light=#FFFFFF，Dark=#0B0F14

到这里，你已经拥有了一套“可切换”的颜色 Token。

Step 3：把变量绑定到对象（先让画布动起来）

现在开始把硬编码颜色替换成变量：

1）选中 Frame 背景填充 → 选择变量 → 绑定 color/bg

2）选中卡片填充 → 绑定 color/surface

3）选中文本颜色 → 绑定 color/text

4）选中按钮填充 → 绑定 color/primary；按钮文字 → 绑定 color/primary-contrast

小提示：如果你发现某个对象切换主题时不变，90% 原因是它还在用“普通色值”。把它也绑定到变量即可。

Step 4：用 Spacing 变量统一 Auto Layout 间距

把卡片/按钮设置成 Auto Layout 后，把 Padding 与 Item spacing 绑定到 Spacing 变量：

- 卡片 Padding：space/16

- 卡片 Item spacing：space/8

- 按钮左右 Padding：space/16；上下 Padding：space/12

这样做的价值是：你未来想把整个系统改得更“紧凑”或更“宽松”，不需要逐个组件改数值。

Step 5：一键切换主题（把 Mode 应用到 Frame）

选中顶层 Frame，在右侧面板里找到变量集合的 Mode 选择，把 Color 从 Light 切到 Dark。

正常情况下：背景、卡片、文字、按钮会同时变化。如果只有部分变化，就回到 Step 3 检查绑定。

常见坑与排错清单（按出现概率排序）

1）找不到 Variables：确认 Figma 版本/权限；部分团队需要在设置里开启或升级方案。

2）切换 Mode 没反应：对象没绑定变量，或者绑定到了不带 Mode 的集合。

3）组件实例不跟着变：建议在组件主件里绑定变量；只在实例上绑会导致复用时漏掉。

4）Dark 模式不舒服：优先调整 color/text 与 color/surface 的对比度，再微调主色亮度。

5）命名越来越乱：坚持用语义命名（bg/surface/text/primary），长期收益非常大。

可以立刻扩展的方向（让体系更完整）

- 给 Spacing 也加一个 Mode：Cozy/Compact，用于不同密度布局。

- 新增字体大小 Token：type/body、type/ 等，让排版也能一键调整。

- 给按钮补齐状态：Default/Hover/Pressed/Disabled，并用变量控制不同状态色值。

做完这些，你就拥有一套可长期复用的“主题 + 间距 + 组件”工作流。