跳到内容
SiteMonk Learn
中文
Esc
↑ ↓ navigate ↵ open ⌘J preview
本页内容

怎样组织基础、语义与组件令牌?

分清可选原始值、使用用途和部件专用规则,控制改动影响的范围。

令牌分层,是把“有哪些值”和“这些值用来做什么”分开记录。这样调整外观时,团队更容易知道哪些地方会跟着变化。

先记住这几件事

  • 基础令牌 记录原始选择,如某个蓝色;它通常不说明用途。
  • 语义令牌 记录用途,如主要操作背景;它可以引用基础令牌。
  • 组件令牌 只供特定部件使用,如按钮内部距离,不应随意用于别的部件。
  • 别名 是引用另一个令牌的值。它表达关联,不是把同一个值复制两遍。

分层与别名可参考 Spectrum 令牌术语 和 Figma:创建与管理变量 。

调整关联的流程

引用关系的示意

以下是教学用关系,不是项目现有配置。

层次 示例名称 原先引用 局部调整后
基础值 blue-strong 一种蓝色 保持
主要操作 action-background blue-strong 改为另一已定义颜色
链接文字 link-text blue-strong 保持

用一个例子走一遍

团队希望主要按钮更醒目,但链接颜色不变。先查到两者原先引用同一个基础蓝色,再给主要操作换一个合适的引用。这样链接继续使用旧值。最后在实际背景上检查按钮和链接,而不是直接修改共同基础色。

边界与常见误解

不是每个系统都必须建三层,也不是每个部件都必须经过三层引用。层次越多,理解和维护也越复杂。选择足以说明用途和控制变化的结构,并把引用关系记清楚即可。