如果你已经做过一套设计系统，应该遇到过这些痛点：颜色散落在样式里、暗色主题要复制一份页面、改一个主色要挨个替换组件。Figma 的 Variables（变量）就是为了解决“设计 Token 管理”和“多主题切换”而来的。本教程用一个可复用的卡片组件做例子，从 0 开始把浅色/深色主题搭好，并能在几秒内切换预览。
建议先列出你要管理的 Token（不必一次做完）：
1）颜色：Primary/Secondary/Surface/On Surface/Border 等；2）文字：Heading/Body/Caption；3）间距/圆角：Spacing/Radius；4）阴影、描边等。
本篇先做“颜色变量 + 组件绑定”，让主题切换立刻可见。
打开 Variables 面板（右侧 Inspect/Design 里的 Variables）。点击 New collection，命名为 Color。
在该集合里新增两个模式（Mode）：Light 和 Dark。之后你只需要切换 Mode，就能让绑定了变量的组件整体换肤。
在 Color 集合下新增这些变量（示例，你可以按项目调整）：
color/background、color/surface、color/text/primary、color/text/secondary、color/border、color/primary、color/primary-on
然后分别在 Light 与 Dark 模式填入对应色值。命名用“语义”好处是：主色从蓝变绿时，你只改变量，不用改组件命名或样式结构。
很多团队已经有 Color Styles。你可以让 Style 的颜色来源改为变量：
选择一个颜色样式（例如 Primary），把它的颜色从固定色值改为变量 color/primary。同理设置 Text Primary、Surface、Border 等。
这样设计师既能继续用“样式”工作，又能享受主题切换；变量负责底层 Token，样式负责使用入口。
新建一个卡片组件（Card）：
1）容器 Fill 绑定 color/surface；2）描边 Stroke 绑定 color/border；3）标题文字 Fill 绑定 color/text/primary；4）正文文字 Fill 绑定 color/text/secondary；5）按钮 Fill 绑定 color/primary，按钮文字绑定 color/primary-on。
绑定方法：选中某个图层的 Fill/Stroke/文本颜色，点击颜色面板里的变量图标，选择对应变量即可。
回到 Variables 面板，把 Color 集合的 Mode 从 Light 切到 Dark。正常情况下：背景/文字/按钮整体变化，卡片仍保持可读性。
如果发现某个元素不变，基本是它还在用“固定色值”。把它改成变量即可。建议在组件库里做一次全局自检：只要主题切换下出现“孤岛颜色”，就代表还有地方没变量化。
推荐用斜杠分层：color/text/primary 这种形式在面板里很好扫视。不要在名称里夹带具体色值（例如 blue-500），那会让变量在换主题/换品牌时变得不合理。
如果你需要更精细的结构，可以拆成两层：基础色（ ）→ 语义色（semantic）。语义变量可以引用基础变量，后续换品牌更轻松。
1）复制组件导致颜色回到固定值：检查是否复制了旧样式；2）文本颜色忘记绑定：尤其是禁用态/占位符；3）阴影颜色没变量化：暗色主题会很突兀；4）图片/插画过亮：建议给图片容器加 Surface 变量或加遮罩层。
在交付页面准备一页“Token 对照表”：列出变量名 + Light/Dark 的色值 + 使用场景（例如按钮背景、页面背景）。开发拿到后可以直接映射到 CSS Variables / Android / iOS 的主题系统。
当颜色跑通后，你可以把 Radius/Spacing 也做成变量，组件属性（比如 size=sm/md/lg）绑定变量，就能把“组件变体”做得更系统、更省维护。
到这里，你已经有了一套可切换的 Light/Dark 主题骨架。建议先在 1-2 个核心组件上落地，跑通流程，再逐步覆盖整个组件库。
