目标：在 Figma 里用 Variables（变量）建立一套设计令牌（tokens），覆盖颜色、字号、间距三类常用属性，并把它们接入组件（Buttons / Cards 等），最终实现浅色 / 深色主题一键切换。
适用场景：小型设计系统、组件库交付、多主题品牌、需要统一规范的团队协作。
建议文件结构：1 个 Page 放令牌（Tokens），1 个 Page 放组件（Components），1 个 Page 放示例（Playground）。
命名建议：用“类别/用途/层级”的方式命名，后期搜索和替换会非常省心，例如：
Color：color/bg/default、color/text/primary、color/brand/primary
Type：type/size/body、type/size/
Space：space/2、space/4、space/8、space/12
1）打开 Variables 面板，新建一个 Collection（例如：App）。
2）在 Collection 里创建两个 Mode：Light、Dark。
3）按用途创建颜色变量（示例）：
color/bg/default：Light=#FFFFFF，Dark=#0F1115
color/surface/1：Light=#F6F7F9，Dark=#161A22
color/text/primary：Light=#111827，Dark=#E5E7EB
color/text/secondary：Light=#4B5563，Dark=#A1A1AA
color/brand/primary：Light=#2563EB，Dark=#60A5FA
提示：先覆盖 10-20 个最常用 token 就够用，不要一上来做成“宇宙级”规范。
字号变量（Number）：
type/size/body=14，type/size/sub =16，type/size/ =20
间距变量（Number）：
space/4=4，space/8=8，space/12=12，space/16=16
建议：字号和间距通常不需要区分 Light/Dark，两套主题共享即可；除非你的深色主题需要更大字号或更宽间距（少见）。
1）画一个按钮（Frame）并开启 Auto Layout。
2）给 Padding 和 Gap 绑定间距变量：
Padding 横向=space/12，纵向=space/8，Gap=space/8
3）把按钮背景色绑定到颜色变量：
默认态背景=color/brand/primary；文字色=color/text/onBrand（你可以自己新增这个 token）。
4）文字字号绑定字号变量：type/size/body
5）做两个 Variant：Primary / Secondary。Secondary 可以用：
背景=color/surface/1，描边=color/line/default，文字=color/text/primary
1）在 Playground Page 放一个按钮实例 + 卡片实例（卡片用 color/surface/1、color/text/primary 等 token）。
2）切换 Variables 的 Mode：从 Light 切到 Dark。
3）如果所有绑定变量的地方都正确变化（背景、文字、描边、表面色），说明你的主题切换链路打通了。
1）变量没生效：确认你绑定的是 Variable，而不是手动填的颜色值。
2）命名太随意：后期会非常难维护；尽量用“用途”命名而不是“颜色名”。
3）组件做不下去：先从按钮/输入框这类“高频组件”开始，不要先攻复杂表格。
4）深色主题对比度不够：Dark 模式下，文字 token 往更亮一些调，表面 token 往更深一些调。
5）间距不统一：把所有 padding/gap 都改成 space token，别混用 10、14 这种“奇怪数字”。
6）交付混乱：把 Tokens、Components、Playground 分页，团队更容易理解并复用。
1）增加状态 token：hover/pressed/disabled（例如 color/brand/primary-hover）。
2）增加语义 token：success/warning/danger（用于通知条、标签）。
3）把字体样式也做成体系（标题/正文/说明），并统一行高与字重。
做到这里，你就拥有了一套可维护、可扩展的多主题组件基础设施。
