完成后你会拥有一套“主题变量 + 组件库”的最小可用模板：同一个按钮/卡片组件，不用复制两份，就能在浅色与深色之间一键切换；并且颜色、文字、描边、阴影都能统一管理。
1）新建一个 Figma 文件，创建两个页面：01-Foundations（基础）与 02-Components（组件）。
2）在 01-Foundations 里先列出你常用的基础色：Background / Surface / Text / Border / Primary / Danger 等（不用太多，先 12-20 个变量就够）。
1）打开 Assets → Local variables（本地变量），新建一个 Collection，例如命名为 Theme。
2）在这个 Collection 里新增两种模式（Modes）：Light 与 Dark。
3）按语义建变量（推荐语义命名，而不是 #fff 这种值命名）：
• color/bg、color/surface、color/text、color/textSecondary、color/border、color/primary、color/primaryText…
4）给每个变量分别填 Light 与 Dark 的值。例如：
• color/bg：Light=#FFFFFF；Dark=#0B0F14
• color/text：Light=#111827；Dark=#E5E7EB
小建议：深色模式不要纯黑，正文也不要纯白，阅读更舒服。
你可以继续直接用变量上色，也可以把变量绑定到 Color Styles 里，方便团队习惯“样式”工作流。
1）选中一个矩形，填充使用变量 color/surface。
2）在 Fill 右侧点样式按钮，创建样式命名如 Fill/Surface。
3）用同样方式创建：Text/Primary、Text/Secondary、Stroke/Border、Fill/Primary 等。
下面做一个最常见的按钮组件（Button）。
1）在 02-Components 新建一个 Frame，开启 Auto Layout（水平），Padding 设为 12/16，圆角 10。
2）背景填充绑定 color/primary（或 Fill/Primary 样式），文本颜色绑定 color/primaryText。
3）把它做成组件（Create component），命名：Button。
4）添加变体（Variants）：size=sm/md/lg，state=default/hover/disabled。
重点：不要在变体里写死颜色值，所有颜色都来自变量/样式，这样主题切换才会全局生效。
1）在一个新页面（例如 03-Playground）把 Button 拖几个实例出来，再加一个卡片、输入框等组件。
2）打开右侧面板的 Variables（变量）设置，找到 Collection=Theme，切换 Mode 到 Dark。
3）如果你所有组件都在用变量，那么整个画面会立即换肤；若有元素没变，说明那里仍在使用写死的颜色值。
• 只改了 Fill 没改 Text：文本颜色也要用语义变量（color/text、color/textSecondary）。
• 阴影/描边忘记绑定：Shadow、Stroke 都要使用变量（例如 color/border）。
• 深色模式对比度太低：用更亮的 text、降低 bg 的纯度，必要时给 Surface 加一点亮度差。
• 组件里用了硬编码：选中元素 → 在颜色面板里检查是否显示“变量/样式”图标。
方式 A：在同一文件内维护（适合个人/小团队）。把 01-Foundations 与 02-Components 作为母版区，Playground 用来验证。
方式 B：发布为团队 Library（适合多人协作）。把变量与组件发布到 Team Library，项目文件里只用实例与引用。
color/bg、color/surface、color/surface2、color/text、color/textSecondary、color/border、color/primary、color/primaryHover、color/primaryText、color/danger、color/dangerText、color/focus
先把这 12 个跑通，再慢慢加上 Success/Warning、Elevation、Chart 等会更稳。
