设计标签 (Design Token)
- 文章發表於
前言
在 什么是设计系统？ 提到自己参与了组件库的建置。一开始，我的方法其实非常直接，对照着设计稿的颜色、字体大小、行高等，一个一个照着做，几乎是原封不动地复制贴上！并且在第一次与设计师校稿时很自豪的透过 Storybook 展示组件的各种状态，一边喃喃地介绍：「这是错误状态，这是禁用样式...」心里想着：我一次就把所有状态都做出来了，帅吧！
但就在我沾沾自喜时，设计师突然指出某个组件的错误状态颜色怪怪的，应该是 #FF0000，并请我帮忙确认一下。我顿时一愣，心跳加速地仔细检查，结果还真的被他抓到，主要是我在填色码时打错了。那一刻，我内心除了震惊，更涌现出对设计师火眼金睛的满满敬佩。
校稿结束后，我跟主管分享刚刚设计师的超能力。主管看着我，半开玩笑地问「你是不是眼睛有问题 😂？」我点了点头，坦白说自己有色弱。他则是笑着说：「Jing, 没关系啦，软件工程师还有很多不同领域可以发展一定要做前端啊！」
接着他向我展示，他早已将所有设计标签（如颜色、字体）定义在全域的 CSS 变量里，并提醒我：不要再直接写 Hex code。他形容设计系统是工程师与设计师之间的语言桥梁，有了这层抽象层，我们就能避免直接使用具体值，确保设计一致性与可维护性。
什么是设计标签？
"Design tokens represent the small, repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hexcodes for color, with self-explanatory names.
设计标签最简单的解释就是将视觉元素 (e.g. color - hexcode, size - pixel, ...) 透过键值对的方式，将这些数值转化成标签，让设计师与工程师有用同一种共通的语言。
在 什么是设计系统？，我提到组件库的建置可以参考「原子设计（Atomic Design）」的方法论。在这个模型里，组件（Component）被视为系统中最基本的模块——也就是「原子（Atom）」。如果照这个逻辑延伸，那么设计标签（Design Token）就像是附着在原子上的粒子，赋予它们颜色、字体、间距等视觉与风格属性，让每个原子不只具有功能，也能表现出一致的设计语言。
为什么要使用设计标签？
如同前面提到的，是设计师与工程师之间的共通语言。透过它，双方不再需要用 Hex code 或对齐像素（Pixel）来沟通细节，而是以统一的语义化名称协作，大幅降低沟通成本并提升一致性。
除此之外，设计标签本质上是一组单一来源（Single Source of Truth）的键值对。当一个产品需要同时维护多个平台（例如 Web、iOS 和 Android）时，一但产品有更换品牌色的需求，在没有设计标签的情况下，有可能得让每位工程师分别手动更新代码，还得检查是否有遗漏或误改。若有导入设计标签，只要设计师修改并发布新的设计标签，所有平台就能自动同步更新相关样式，大幅减少沟通与维护成本，也降低人为错误的风险。
根据 Google 设计系统指南 - Material Design 的建议，以下情况适合导入设计标签：
- 计划重新设计现有产品，或正在打造新产品
- 团队的设计系统需应用于多个产品或跨平台（如 Web、iOS、Android）
- 希望更轻松地维护与更新样式，提升一致性与效率
相对地，以下情况则不太适合导入设计标签：
- 现有应用的样式皆采 hardcode，且预计在 1～2 年内不会有重大变更
- 团队或产品尚未建立设计系统，缺乏统一的设计语言
如何设计标签？
前面提到，设计标签是以键值对的形式，将视觉元素转换为语义化的变量名称。那么在实务操作中，我们该如何定义这些标签的层级与结构呢？
定义设计标签的层级
让我们看看几个大型设计系统是如何拆解与实作设计标签的：
- Google - Material Design: 其将设计标签拆分为四个层级：Value、Reference Token、System Token、Component Token
- Pinterest - Gestalt: Pinterest 的设计系统也定义了四层结构：Value、Base Variable、Common、Component Token
我们可以观察到一个共同的设计原则：层级越低的设计标签越抽象，层级越高则越具体，也更贴近实际使用情境。
三层常见设计标签的说明
Reference Token / Base Variable
这一层是最底层、也最抽象的设计标签，通常直接对应实际的数值（value），例如：
- color-red-900 👉 #FF0000
- spacing-4 👉 16px
- text-sm 👉 14px
这些标签的命名不具语义，仅是视觉属性的抽象化表示，常见于色彩、间距、字体等设计变量的底层定义。
System Token
这一层是在 Reference Token 的基础上加入语义层次，将抽象的值对应到具体的设计用途，例如：
- color-red-900 👉 color-error
- spacing-4 👉 spacing-form-padding
如此一来，即使底层数值（如色码、间距）变动，语义命名仍然一致，设计师与工程师也能更直观地理解其实际用途与设计语境。
Component Token
最上层的 Component Token 与具体元件（Component）样式绑定，具高度语义性，常用于元件的状态与变体设定，例如：
- button-primary-background-hover
- input-error-border
这类标签命名方式可以提升样式语义清晰度与一致性，尤其适用于大型设计系统中。
CTI (Category → Type → Item)
以下是各层的说明：
- 类别 (Category): 最高层级的分类，例如：color, size, font, spacing
- 类型 (Type): 描述类别的属性，例如：background, text, border
- 项目 (Item): 对于元素的描述，例如：dropdown, control, container
- 子项目 (Sub Item): 元素的变体 (variant)，例如：primary, secondary, success.
- 状态 (Status) : 用来描述状态，例如：hover, focus, active, disabled
这种命名方式有助于设计师与工程师快速理解样式设定，并确保一致性。
总结
以上我们介绍了许多设计标签的核心概念，接下来的章节会透过实作工具 Style Dictionary，将这些概念一步步落地实践。而在进入实作之前，我们可以先从这里窥见整体的运作流程
延伸阅读
