做完这套设置，你会拥有一套可维护、可复用、能一键切换主题的 Figma 设计基础设施：
1）颜色统一管理（主色/强调色/背景/文字/分割线）
2）字号与行高统一管理（标题/正文/辅助文本）
3）组件库可以直接“绑定”这些变量与样式，后续改规范不需要挨个改组件
建议文件结构：在页面最上方放一个 “Styles & Variables” 区域，用来存放色板、文本样式示例、说明。
命名规则（关键）：统一用 / 分级，后面会直接影响可读性。
颜色变量建议：color/text/primary、color/bg/default、color/brand/primary
字号变量建议：type/size/body、type/size/h1；行高变量建议：type/line/body、type/line/h1
1）打开 Variables 面板（右侧或菜单里找到 Variables）。
2）新建一个 Collection：命名为 Theme。
3）在 Collection 里创建两个 Mode：Light 和 Dark。
4）开始创建颜色变量（至少先建这些）：
- color/bg/default（页面背景）
- color/bg/elevated（卡片背景）
- color/text/primary（主文字）
- color/text/secondary（次级文字）
- color/border/default（分割线/边框）
- color/brand/primary（品牌主色）
5）给 Light / Dark 分别填值：Light 用浅底深字，Dark 用深底浅字；品牌色保持一致或略调深浅。
检查点：任何一个颜色在 UI 里要能“说清楚用途”，不要出现 blue1/blue2 这种不可维护的命名。
1）创建一个最小按钮组件：背景、文字、描边（可选）、hover（可选）。
2）选中按钮背景填充色，点击颜色右侧的变量图标，把填充绑定到：color/brand/primary。
3）选中文本颜色，绑定到：color/text/onBrand（如果没有就补一个变量）。
4）描边绑定到：color/border/default。
要点：不要直接填十六进制颜色；组件里只出现变量引用，这样主题切换才会“自动生效”。
1）在 Variables 里新建 Collection：命名为 Typography。
2）创建 Number 类型变量：
- type/size/h1（例如 32）
- type/size/h2（例如 24）
- type/size/body（例如 14 或 16）
- type/line/h1（例如 40）
- type/line/body（例如 22 或 24）
3）在文本图层里把字号/行高分别绑定到对应变量。
为什么这么做：当你把全站正文从 14 调到 16，或者行高从 22 调到 24，不需要重新做一遍样式。
变量是底层能力，但团队协作更常用的是 Text Styles。建议把样式做成“对外接口”。
1）创建样式 H1 / H2 / Body / Caption。
2）每个样式内部：字号/行高用变量；字体家族、字重按项目设定。
3）把文本颜色也绑定到变量（如 color/text/primary）。
使用方式：设计时只选样式，不直接手动改字号；需要改规范时只改变量或样式定义。
1）在页面上放一个示例区域：按钮、卡片、正文、标题、输入框。
2）切换 Variables 的 Mode（Light → Dark）。
3）观察：背景、文字、边框、按钮是否同时正确变化。
常见问题排查：
- 只有部分元素变化：说明有地方还在用“直接颜色”，没绑定变量。
- 文字对比度不够：调整 color/text/secondary 或背景层级变量。
- 组件状态不一致：把 hover/pressed 也做成变量（例如 color/brand/primaryHover）。
颜色：
color/bg/default / color/bg/elevated / color/text/primary / color/text/secondary / color/border/default / color/brand/primary / color/brand/primaryHover / color/state/danger
字号：
type/size/h1 / type/size/h2 / type/size/body / type/size/caption
行高：
type/line/h1 / type/line/body / type/line/caption
1）先在一个小范围组件（按钮、输入框、标签）落地变量绑定。
2）把旧组件逐步替换为“只引用变量”的新组件。
3）每次新增组件都遵守：颜色/字号不允许直填，只能选变量或样式。
4）每周用一次“切换主题”的方式做回归检查，能立刻揪出遗漏绑定的地方。
按这个方式做，你的组件库会越用越轻松：规范变化不再是灾难，而是一次配置更新。
