Figma变量可以把颜色、尺寸、内容或状态值集中管理，再绑定到组件和页面。可以先从一枚提交按钮开始：用颜色变量管理主题，用字符串变量表达状态，再分别绑定到填充与组件变体属性。变量不是把所有数值集中起来就结束，还要约定命名、作用范围和交付映射。
如果团队正在比较工具，可以先看墨刀与Figma的原型、设计和协作场景差异，再按当前项目是否需要变量模式、多人协作和迁移成本做决定。如果继续维护 Figma 文件，先完成下面这枚按钮的主题和状态配置，再考虑把规则扩展到整个组件库。
先区分集合、模式和组件状态
变量是一个有类型的值，集合是管理一组变量的容器，模式是同一集合在不同上下文中的一组取值。浅色与深色属于主题上下文；默认、禁用、加载属于按钮状态。两者需要能独立组合，否则每增加一种主题，就可能重复创建整套状态配置。
本例先建立三个集合：Primitives 放原始色值，Theme 放背景和文字的语义颜色，Runtime 放原型运行时使用的提交状态。命名可采用斜杠分组，例如 color/action/primary；也可以沿用团队已有的点号命名，关键是同一套库始终一致。Figma 的集合和模式关系可参考官方变量说明。
先定语义，再建原始值
原始颜色如 blue-500 只说明色值，不说明用途。组件更适合绑定 color.action.primary、color.text.muted 这类语义变量；主题模式再为同一语义提供不同值。间距、圆角和字号同理，先确定用途，再决定基础尺度。
| 变量类别 | 示例 | 绑定对象 | 检查重点 |
|---|---|---|---|
| 颜色 | color.surface.page | 页面背景、卡片 | 对比度与主题切换 |
| 间距 | space.control.gap | 表单和按钮组 | 不同内容长度 |
| 字符串：状态值 | submitState | 按钮实例的 state 变体属性 | default、disabled、loading 与属性值一致 |
| 内容 | copy.action.submit | 按钮、提示 | 多语言长度 |
建立能切换浅色和深色的颜色关系
打开文件的变量管理视图，先在 Primitives 集合创建 Color 类型的 blue/600、blue/300、white 和 slate/900。再创建 Theme 集合，将下表中的语义名称做成 Color 变量。不要在每个组件内重新粘贴十六进制颜色。
| 语义变量 | Light 模式 | Dark 模式 | 应用位置 |
|---|---|---|---|
| color/action/primary | blue/600：#2563EB | blue/300：#93C5FD | 默认提交按钮背景 |
| color/action/onPrimary | white：#FFFFFF | slate/900：#0F172A | 默认提交按钮文字 |
| color/surface/page | white：#FFFFFF | slate/900：#0F172A | 表单所在页面背景 |
表里的色值是练习材料。先在原始变量中填值，再把语义变量的值设为 Alias，引用同类型的原始变量；这样调整 blue/600 时，使用它的语义值可以一起变化。两个颜色当前相同，不代表必须合并为同一个语义变量：页面背景和按钮文字的用途不同，未来改主题时仍可能分开。
为 Theme 添加 Light、Dark 两个模式，将每行对应值填齐。多模式需要支持该能力的计划；Figma 官方目前列出 Education、Professional、Organization 和 Enterprise，模式数量随计划不同。若当前账户不能新增模式，先完成单模式的变量绑定，不要把两个独立页面误当成已建立多模式。具体机制见模式与继承规则。
接着选中按钮背景，把填充绑定到 color/action/primary；选中文字，绑定 color/action/onPrimary；页面背景绑定 color/surface/page。对父画框指定 Dark，检查页面与按钮是否一起变化。没跟着变的子层，优先检查它是否写死了颜色，或被单独指定了 Light 模式。
把提交状态绑定到按钮实例
建立按钮组件集，创建 state 属性，值设为 default、hover、pressed、disabled、loading。默认、悬停、按下分别给出反馈，禁用时说明不可提交的原因，加载态显示“提交中…”并留出反馈空间。颜色仍使用 Theme 中对应语义变量，不再把 Light/Dark 复制成另一套按钮。
- 在 Runtime 集合创建 String 变量 submitState，初始值填 default。字符串必须与组件的 state 属性值匹配，包括大小写。
- 把组件实例放入报名表单，选中实例，将 state 变体属性关联到 submitState。这里绑定的是实例的变体属性，不是给背景填充绑定一个字符串。
- 在需要演示的点击交互中使用 Set variable，将 submitState 改为 loading。另设“返回编辑”动作改回 default，便于反复演示；没有真实请求时，不把加载动画当作提交成功。
- 需要展示不可提交状态时，把变量设为 disabled，并在表单旁说明缺失字段。主题切到 Dark 后，再走一次 default→loading→default，确认主题与状态互不干扰。
变量绑定文档说明了字符串、数字和布尔值与变体属性的对应方式；原型变量动作目前属于付费计划能力。只有静态绑定需求时，不必为了这篇练习先实现完整交互逻辑。
用一个组件验证变量链
以“提交按钮”为例，先建立默认、悬停、按下、禁用和加载状态，再为浅色和深色模式绑定背景、文字与边框变量。把按钮放入表单和弹窗，填入长文案，检查变量变化是否造成溢出。主题应决定同一语义的配色，状态决定当前显示的组件变体；不要让切换主题顺带把“提交中”恢复成“可提交”。
变量没生效时，沿绑定链找原因
| 看到的问题 | 先检查 | 具体修正 |
|---|---|---|
| 改了原始颜色，按钮没变 | 按钮是否绑定语义变量；语义是否引用原始值 | 从填充属性回查引用，不靠颜色外观判断已绑定 |
| 切深色后只有卡片没变 | 子画框是否显式设为 Light | 需要跟随父级时改为 Auto；确需固定主题则保留 |
| 状态变量变化，按钮仍停在默认态 | 变量值与 state 属性值是否完全匹配 | 统一 default/loading 等命名；查清绑定的是哪个实例 |
| 间距调整后失去联动 | 数值变量是否已脱离绑定 | 重新绑定间距；避免把手动数值覆盖误当为库更新 |
| 候选列表里找不到变量 | 变量类型、Scope 与目标属性是否对应 | 只为合法用途设置作用域，别把颜色变量当宽度使用 |
Scope 的用途是减少选错变量，例如只让圆角变量出现在圆角属性候选中；它不是访问权限，也不会限制变量只能用于某个业务页面。可按变量创建与作用域说明设置。检验一套变量是否好维护，不看数量，而看改一次语义值能否影响正确对象、同时不碰无关对象。
交付时说明变量能做什么
研发需要知道变量名称、语义、可选模式、默认值和使用范围；设计需要知道哪些值允许页面覆盖，哪些必须通过组件变体修改。导出时保留变量表和组件映射，避免只交一张静态图。迁移到其他工具前，先列出无法一一对应的变量，再决定降级方式。
交付表再补三项：变量对应的代码名称、谁可以新增语义、废弃变量如何替换。对上面的按钮，应能回答“Dark 下 loading 使用什么配色”“页面能否临时覆盖 disabled”“重置演示后状态是什么”。先把这一条链讲清楚，再扩展输入框和弹窗，能够避免变量数量先增长、使用规则却一直缺席。
