如果你的设计系统还没有使用语义令牌，就错过了一个提升可扩展性和效率的关键工具。

是什么

语义令牌能让你创建一个结构化、灵活的系统，其中的设计决策由用途而非原始数值来定义。你无需为按钮或文本指定固定的色值，而是使用像 primary-button-bg 或 warning-text 这样的令牌。

这意味着，主按钮的背景色不再直接是 blue/500，而是 primary-button-bg，它的取值为 blue/500（而 blue/500 对应的 HEX 色值为 #5A8DD7）。

我们通过一个直观的例子来试试看，不过要记住，只有在实际应用中才能真正体会到它的价值。

通常情况下，你会这样为元素应用变量：

现在，假设你想把 component-2 的描边改为 #0D0D0D，你需要这样操作：

这看似改动不大，但当系统规模逐渐扩大时，很快就会难以分清哪个 HEX 值应该应用到哪个组件或元素上。

而你真正应该做的是使用语义令牌，让每个元素该用哪个变量一目了然。

这样更新起来就轻松多了——只需修改一次令牌，就会处处生效！我来演示一下……

为什么

可扩展性

随着设计系统的不断壮大，手动跨多个组件更新样式会变得难以维护。语义令牌让你只需在一处修改，就能在整个系统中保持一致的应用。

比如，你决定要修改主色，但只针对 page-title 组件。如果正确使用了语义令牌，你无需改动组件本身，只需在变量面板中修改与之关联的令牌即可。

或者，你发现 #black/600 作为设计系统中的背景色效果不佳，那么只需前往变量设置，将 surface-alt 替换为另一个基础令牌即可。

一致性与可维护性

通过关注功能而非具体数值，语义令牌能够确保产品在视觉上更加统一、一致。你不再需要猜测或记忆该用哪个值——只需选择名称合适的语义令牌即可。

还在纠结主边框该用什么颜色？很简单，就是 stroke-primary。

主题与定制

无论是引入深色模式、进行品牌定制，还是对不同样式做 A/B 测试，语义令牌都能简化流程。你无需大范围地修改原始色值，只需在更高层级替换令牌即可。

面向未来的设计系统

在设计与实现之间建立清晰的抽象层，语义令牌让系统能够随着时间推移不断演进，而不会破坏现有设计。

需要发布一套新配色来匹配公司更新的品牌形象？只需修改基础数值即可。

怎么做

定义核心设计令牌

首先，为颜色、排版、间距等关键设计属性创建基础令牌。

通常，我会把这些原始值放在一个名为 primitives 的独立集合中。

小技巧：可以使用 Tailwind CSS Color Generator 快速生成主色板，并使用 Export/Import Variables 插件在不同文件之间导入和导出配置。

将核心令牌映射为语义令牌

接下来，定义描述这些数值在界面中如何被使用的语义令牌。它们作为一个抽象层，让你在不影响底层结构的情况下更轻松地更新样式。

搭建语义令牌需要时间，方法也可能需要在实践中不断调整。但一旦落地，它们能显著提升可扩展性和可维护性，减少不一致，加快开发速度。这是一项值得的投入。

限制变量作用域

最后，限制某些变量可应用的元素范围。为此，请先前往 primitives 并将其全部禁用。

然后，逐一设置令牌的作用域。在下面的示例中，我将 border 相关的令牌限制为仅适用于描边。

现在，当我想为描边应用变量时，只会显示适用的变量，选择正确的那一个变得非常轻松！

这不是一篇完整教程

如果你想进一步了解如何在设计系统中使用语义令牌，建议先从 Figma 的这篇教程 入手。之后，最好的方式就是亲自上手尝试，将它们应用到你自己的设计系统中，摸索出最适合你的用法。

诚然，搭建语义令牌的过程可能漫长而繁琐，但收益是巨大的。如果你的设计系统还没有使用语义令牌，不妨一试！

请记住：关键在于成果而非产出。关注团队真正需要的东西，而不是追求完美的文档。