什么是设计 Token？

设计 Token 是一个带名字的值，用来保存单个设计决定，例如一种颜色、一个间距档位或一个字号。给决定起了名字，就能在设计工具和代码里重复使用，而不必在每个地方手写一遍。

为什么要给一个值起名字

想想主按钮用的那个颜色。直接写死的话，它在样式表里是 #2563EB，在 Figma 的填充里是一个十六进制字段，在某位开发上周敲下的代码里是一个字符串。三份副本，彼此毫无关系。

做成 Token，它只出现一次，挂在一个名字下面：

--color-action-primary: #2563EB;

其余地方都引用这个名字。改一次值，所有用到的地方跟着变。这层间接引用就是全部的想法，关于 Token 的其他一切都由此而来。

Token 通常覆盖什么

  • 颜色：调色板、色阶，以及背景、边框、文字、状态这类语义角色
  • 字体：字族、字号、字重、行高、字距
  • 间距：一套一致的刻度，通常以 4px 或 8px 为基准
  • 圆角与边框粗细
  • 阴影与层级
  • 动效：时长与缓动曲线
  • 断点与布局尺寸

Token 不是变量

这个区别很要紧。CSS 变量是一种机制。设计 Token 是一个决定，只是恰好通过这种机制表达出来。

实际差别在于可移植性。Token 独立于任何一种具体技术存在，所以同一套 Token 可以输出成 CSS 自定义属性、Tailwind 配置、Figma 变量、Swift 或 Kotlin。如果它只以一行 CSS 的形式存在，那就是一个变量。

格式

W3C 下的 Design Tokens Community Group 发布了一套 JSON 格式，意在作为工具之间的通用交换。它给每个 Token 一个 $value 和一个 $type：

{
  "color": {
    "action": {
      "primary": { "$value": "#2563EB", "$type": "color" }
    }
  }
}

采用程度参差不齐但在扩大，它是目前最接近设计工具与构建流水线之间中立交换格式的东西。

这与 Flash DSM 的关系

Flash DSM 从一句提示词、一个网址、一个 Figma 文件或一张截图生成完整的 Token 集，再把它导出为 CSS 自定义属性、Tailwind 配置、Tokens Studio JSON 或 Figma 变量。