变量、模式与设计 Token
设计变量保存有类型、可复用的值。把屏幕背景绑定到 color/background 后,改变这个变量可以更新所有引用处。它与组件属性解决不同问题:变量维护共享值,属性配置具体实例。
从一个 Collection 开始
本案例使用 StarMatch / Design tokens Collection,核心路径只有一个 mode。
| 变量 | 类型 | 用途 |
|---|---|---|
| color/background | Color | 绑定屏幕背景 |
| color/primary | Color | 绑定主按钮填充 |
| color/surface | Color | 卡牌默认填充 |
| space/board | Number | 棋盘行间距,基准 12 |
| radius/card | Number | 卡牌圆角,基准 16 |
| size/cardWidth、size/cardHeight | Number | 记录基准规格,适配时按规则计算 |
变量存在不代表所有对象已绑定。必须读回节点的 boundVariables 才能证明某个属性跟随变量。
手动跟做一个绑定
在文件的 Local variables 入口创建 Collection,命名为练习 Token;添加一个 Color 变量 color/background,填入 #0B1026。选中练习屏 Frame,在 Fill 的变量选择入口使用这个变量。随后改变变量值,观察屏幕背景是否同步变化,再恢复。
只有打开变量列表看见同名值,不足以证明绑定成功。选中 Frame 检查 Fill 的变量引用;使用工具时检查 boundVariables.fills。若直接重写原始填充对象,可能清除绑定,所以 AI 修改颜色时要先读现有引用。
类型与模式
入门重点是 Color、Number、String、Boolean。当前 Figma 还提供与 Motion 相关的 Timing、Easing,不能把前四种说成所有类型。
Mode 表示同一组变量在不同上下文中的值,例如明暗主题。Starter 的核心路径使用单 mode;需要额外模式或变量驱动原型时,先核对当前计划。不要为免费跟做强行新增 Dark mode。
别名与语义
项目变大后可以让语义变量引用基础变量,例如 action/primary 指向某个基础绿。别名应表达设计意图;两种颜色恰好同值,不代表它们应该永远共用同一个语义变量。
请读取现有变量 Collection、mode 和绑定关系。
优先复用同语义变量;创建前确认 resolvedType。
将背景绑定到 color/background,将卡牌圆角绑定到 radius/card。
改值验证后恢复基准,并报告实际受影响的对象范围。
变量与运行时不是同一个存储
Figma 的设计变量可以用于导出 Token 清单,但不会自动变成引擎中的常量,更不会同步服务端余额。交付要记录设计变量到代码字段的映射与单位;运行时状态另建数据模型。
失败时如何处理
本次创建变量曾返回连接错误。检查 Collection 中是否出现新变量后,再决定是否重试。核心画布可继续完成,连接恢复后再建立绑定。不要把调用发出或临时失败当成变量已创建。
练习与检查
临时把 radius/card 从 16 改为 20,检查四个变体及棋盘实例,再恢复。若某一张不变,检查它是否有局部覆盖或丢失绑定。保存前后读回结果。