指南

设计令牌，用真实文件讲清楚

设计令牌就是一个有名字的设计决策：一种颜色、一个间距、一个字号。只存储一次，设计工具和代码都能处处使用。

为什么需要设计令牌

没有令牌时，按钮的蓝色先写在设计文件里，再写一遍在 CSS 里，然后又写一遍在应用里。改一次，就得到处去找。有了令牌，你只需修改 color.brand，所有用到它的地方都会随之更新。

令牌文件长什么样

W3C 设计令牌社区组（Design Tokens Community Group）定义了一种 JSON 格式，其中每个令牌都有一个 $value 和一个 $type。

{
  "color": {
    "brand": { "$value": "#2F5BEA", "$type": "color" },
    "ink":   { "$value": "#121214", "$type": "color" }
  },
  "space": {
    "4": { "$value": "16px", "$type": "dimension" }
  }
}

同样的决策，转换成浏览器可以使用的 CSS 变量：

:root {
  --color-brand: #2F5BEA;
  --color-ink: #121214;
  --space-4: 16px;
}

Kalka 如何使用令牌

一个文件夹：每个项目都有一个 design-system/ 文件夹，里面是 W3C 格式的 tokens.json，旁边是 tokens.css。
在画布上使用：你在设计面板里选择颜色或间距时，选的就是一个令牌，CSS 中使用的也是对应的变量。
用 Git 做版本管理：修改品牌色就是一次可以审查的提交，和任何代码改动一样。

Kalka 正在开发中，并且是开源的。上面的文件夹结构来自我们的产品规格。