你将做出什么
最终你会得到一套可复用的小型设计系统：颜色与字号来自 Variables；同一套组件（按钮/输入框）可在 Light 与 Dark 两种模式间一键切换；后续新增页面也能保持风格一致。
准备工作（5分钟）
- 新建一个 Figma 文件，创建两页：Foundation（基础变量）与 Components（组件）。
- 打开右侧面板的 Variables（如果你没看到，先确认 Figma 版本已支持 Variables）。
- 确定你要覆盖的最小主题色集合：背景、文字、主色、边框、输入框填充、危险色（可选）。
第 1 步：创建颜色变量（Color Variables）
- 在 Variables 新建一个 Collection，命名为 Color。
- 先只建 8~12 个变量就够用，建议命名：
- bg/default、bg/elevated
- text/primary、text/secondary
- border/default
- brand/primary、brand/primary-hover
- field/fill、field/fill-hover
- 先给这些变量填一套 Light 的颜色（随便用你熟悉的配色即可）。
提示：变量命名尽量用“语义”而不是“具体色值”（不要叫 blue-500），否则后期换主题会变得很痛苦。
第 2 步：为同一套变量建立 Light/Dark 两个 Mode
- 在 Color Collection 里新增 Mode：Light 与 Dark。
- 切换到 Dark Mode，为每个变量填对应的暗色值（重点是对比度：背景更暗、文字更亮、边框更柔和）。
- 保持变量数量不变：两套 Mode 共用同一组变量名，这样切换才是“整体替换”。
第 3 步：创建字号变量（Typography Variables）
- 新建一个 Collection，命名为 Type（或 Typography）。
- 创建 Number 变量：font/body=14、font/ =20、font/caption=12（示例即可）。
- 如果你会做得更细：再加 lineHeight/body、radius/s、space/4 这类变量，但不要一上来铺太多。
第 4 步：做一个按钮组件，并把颜色/字号绑定到变量
- 在 Components 页，新建一个按钮：Auto Layout 水平，左右 padding 16，上下 padding 10，圆角 10。
- 按钮背景填充绑定到 brand/primary；文字颜色绑定到 text/on-brand（如果你没建这个变量，就先用 text/primary 的反色思路补一个）。
- 文字字号绑定到 font/body。
- 把按钮做成 Component，并加一个 Variant：state=default/hover/disabled。
- hover：背景绑定 brand/primary-hover
- disabled：背景与文字改为更低对比度（建议也用变量，例如 bg/disabled 与 text/disabled）
第 5 步：做一个输入框组件（Input），同样绑定变量
- 容器：Auto Layout，padding 12，圆角 10，背景绑定 field/fill。
- 边框：Stroke 绑定 border/default，1px。
- 占位文字：颜色绑定 text/secondary，字号绑定 font/body。
- 做 Variant：state=default/focus/error。
- focus：边框绑定 brand/primary 或单独建 border/focus
- error：边框绑定 danger/default（没有就补一个语义变量）
第 6 步：一键切换主题（验证是否成功）
- 在画板上放一套“登录页”：背景、标题、按钮、输入框都用上。
- 打开 Variables 的 Mode 切换：从 Light 切到 Dark。
- 如果一切绑定正确，整页会整体切换，而不是只变一两个图层。
常见坑与排错清单
- 只改了颜色没生效：检查图层是不是还在用固定色值；重新绑定到变量。
- Dark 模式文字发灰：不要盲目降低不透明度，优先给 text/primary 一个足够亮的值。
- 变量命名失控：先稳定语义层（bg/text/border/brand/field），再扩展层级。
- 组件难维护：Variant 不要做太多状态；把“可变的东西”尽量抽为变量，而不是复制组件。
下一步怎么扩展
你可以在同一套变量之上继续添加：阴影（Shadow styles）、栅格间距变量（space/*）、图标颜色变量（icon/*），以及更完整的组件（导航栏、卡片、弹窗）。只要遵守“语义变量 + 多 Mode”的结构，规模越大越省心。
