把颜色、间距等“设计规范”变成可复用的变量（Design Tokens），并做两套主题（浅色/深色）。之后你在组件里只引用变量，不直接填具体色值；需要换主题时一键切换即可。
适用版本：Figma 变量（Variables）功能在较新版本可用，确保你能在右侧面板看到 Variables/变量入口。
建议结构：一个文件内新建 2 个页面：01-Tokens（放变量与说明）和 02-UI（放组件与界面）。
1）打开右侧面板的 Variables（变量）→ 新建 Collection，命名为：Color。
2）在 Color 集合里创建 2 个 Mode：Light 和 Dark（主题模式）。
3）开始创建颜色变量（建议用语义命名，而不是“红/蓝”）：
例如：
• bg/primary（主背景）
• bg/secondary（次背景）
• text/primary（主文本）
• text/secondary（次文本）
• brand/primary（品牌主色）
为每个变量分别填写 Light 与 Dark 两个模式下的色值。
很多团队已经用 Styles 管理颜色。你可以让 Styles 指向变量，这样历史习惯不被破坏。
操作：打开一个颜色 Style（例如 Text/Primary）→ 在颜色值处选择“使用变量（Use variable）”→ 选择 text/primary。
这样做的好处：旧组件使用样式不需要全改；后续只维护变量即可。
1）创建一个按钮组件（Button）。
2）按钮背景色选择变量：brand/primary；按钮文字选择变量：text/on-brand（如果没有就补一个）。
3）同理给输入框、卡片等组件把背景/边框/文字都替换为变量。
关键原则：组件只认“语义变量”，不认具体色值；这样主题切换才会自动生效。
在页面任意选中一个使用了变量的图层（或 Frame）。在右侧 Variables 面板里找到当前 Collection 的模式切换，把模式从 Light 切到 Dark。
如果你发现有元素没变色，通常是因为：
• 仍然用了硬编码色值（直接选了 #xxxxxx）
• 用的是 Style，但这个 Style 没有绑定变量
• 文本/描边/效果（阴影）漏改
你可以再建 2 个集合：
Spacing：s=4、m=8、l=16、xl=24… 统一间距体系；
Radius：sm=6、md=10、lg=16… 统一圆角体系。
然后把组件的 Auto Layout padding、gap、圆角都改成变量引用。这样不止颜色，布局尺度也能统一管理。
1）命名尽量语义化：text/primary、bg/primary，而不是 blue-500。
2）别混用：同一组件内尽量不要“变量 + 硬编码”混杂。
3）有阴影/描边时别忘了也可以绑定变量。
4）如果你要交付给开发：在变量描述（De ion）里写清用途与对比度要求（例如 WCAG AA）。
Color / Light：
bg/primary=#FFFFFF；bg/secondary=#F6F7F9；text/primary=#111827；text/secondary=#6B7280；brand/primary=#2563EB；text/on-brand=#FFFFFF
Color / Dark：
bg/primary=#0B1220；bg/secondary=#111A2E；text/primary=#E5E7EB；text/secondary=#9CA3AF；brand/primary=#3B82F6；text/on-brand=#0B1220
把这些变量绑定到按钮/卡片/输入框，你就能立刻看到主题切换效果。
