Build Product From Scratch - Tokens

记录如何从头打造数字产品 - 设计令牌篇

前言

设计令牌（Design Tokens）或可以简称为令牌，是一种管理设计属性与数值的方式，用于构建 UI 最小的元素。适当的使用设计令牌可以让设计系统更加灵活与可扩展，不论是任何职位，只要与设计系统相关的人士都应当了解设计令牌的概念。

令牌实际上是「变量」的概念，一个命名对应一个值，相信对程序语言熟悉的人很快能对应上令牌的概念，或是也可以想象一个可以装载各种内容的箱子，箱子是设计令牌，而箱子内容就是设计令牌的值。

设计令牌可以被装载各种与设计相关的数值像是：颜色、字体、长度、圆角……甚至是指向另一个设计令牌！

使用令牌意味着保持「共通的语言」与「单一真相来源」，描述相同的事物更新设计与开发将会更快速与有效率，并且基于令牌能够指向另一个令牌的特性（Aliasing）能够让设计更加灵活可扩展，一般会将设计令牌分为三种：

交代设计中存在哪些属性和值

主要令牌是系统的根基，交代设计中存在哪些属性和值，举例来说主要令牌会记录系统中的所有变量并赋予对应的名称像是：yellow-600、spacing-2。根据 Figma 建议🔗 主要令牌仅用于延伸其他语义化令牌，不能直接使用于设计当中。

交代令牌意涵、目的与应当如何被使用

语义化令牌替属性赋予了义涵，交代应当如何使用，举例来说全站的警示颜色可以被命名为 warning，并被赋予了 yellow 系列的颜色，这样未来要更换警示颜色时只需要更换 warning 令牌的值即可，而不需要一个一个组件去更换颜色。

语义化命名是设计系统灵活与可扩展的关键，可以设置任意无数层语义化令牌以便更好的定义与抽离设计当中的意涵，在需要时更动也会便捷许多。

交代组件中令牌的意涵、目的与应当如何被使用

组件令牌基本与语义化令牌相同，不过仅用于描述组件的外貌，举例来说一张卡片内标题与内文都使用到了相同的文字颜色，这时候可以统一创造令牌用于管理「整张卡片的文字颜色」，这么做除了消除重复重工之外，也可以在特定场景针对特定组件覆盖系统定义。

组件令牌良好的定义了组件的变量接口，也增加了相同组件在不同场景的灵活性与扩展性。