怎样组织基础、语义与组件令牌?
分清可选原始值、使用用途和部件专用规则,控制改动影响的范围。
令牌分层,是把“有哪些值”和“这些值用来做什么”分开记录。这样调整外观时,团队更容易知道哪些地方会跟着变化。
先记住这几件事
- 基础令牌 记录原始选择,如某个蓝色;它通常不说明用途。
- 语义令牌 记录用途,如主要操作背景;它可以引用基础令牌。
- 组件令牌 只供特定部件使用,如按钮内部距离,不应随意用于别的部件。
- 别名 是引用另一个令牌的值。它表达关联,不是把同一个值复制两遍。
分层与别名可参考 Spectrum 令牌术语 和 Figma:创建与管理变量 。
调整关联的流程
引用关系的示意
以下是教学用关系,不是项目现有配置。
| 层次 | 示例名称 | 原先引用 | 局部调整后 |
|---|---|---|---|
| 基础值 | blue-strong |
一种蓝色 | 保持 |
| 主要操作 | action-background |
blue-strong |
改为另一已定义颜色 |
| 链接文字 | link-text |
blue-strong |
保持 |
用一个例子走一遍
团队希望主要按钮更醒目,但链接颜色不变。先查到两者原先引用同一个基础蓝色,再给主要操作换一个合适的引用。这样链接继续使用旧值。最后在实际背景上检查按钮和链接,而不是直接修改共同基础色。
边界与常见误解
不是每个系统都必须建三层,也不是每个部件都必须经过三层引用。层次越多,理解和维护也越复杂。选择足以说明用途和控制变化的结构,并把引用关系记清楚即可。