Design Token全面解读，Figma variable教学（上）
本片文章阅读时长8分钟
今年6月份Figma Config 2023 春晚上发布了史诗级更新，其中Variable（变量）也就是俗称的Design Token可以说是更值得设计师们注意的内容，Design Token（设计令牌）作为其中一个关键的概念，为设计系统的一致性提供了强大的支持。在现代的软件开发和设计领域，构建可维护、一致性强的设计系统变得越来越重要。
本片文章阅读时长8分钟，适合听说过Design Token但从未系统学习过以及需要了解新功能Variable的人群食用，或者你只是想看个热闹了解设计趋势也同样欢迎继续；那我们系好安全带，拿好小本本开始咯~
Design Token是个复杂且强大的工作方式，本系列将分为三部分介绍
● Design Token整体介绍
什么是Design Token
Design Token规范体系
为什么要用Design Token
● Design Token怎么用
Design Token命名规范
Figma Variable的使用
将Variable应用于设计
如何与开发对接
由于内容较多，本次先从Design Token整体介绍开始
一、什么是Design Token？
Design Token是一种抽象的、可重用的设计元素，它将设计属性（如颜色、字体、间距等）转化为可被开发团队和设计团队共享的可编程的代码。简而言之，Design Token是设计系统中的一组规范化的值，用于定义视觉和样式，是设计师与前端都能理解的资产语言。
例如，我们可以应用与我们产品中所有类似用法一致的Desgin Token，而不是为图标选择其他样式
1.1 设计属性
设计属性是构成界面的基本元素，比如颜色、字体、间距、阴影等。使用Design Token，这些设计属性被抽象出来，以一种可维护和可重用的方式进行管理。
比如设计规范的制定者往往会对一些中性色定义十个色阶。比如说red-1到redr-10。但是真正在实际应用过程当中，我们会发现设计师很难去做选择，到底哪个用在组件上才是正确的颜色。
所以对设计师来说，设计决策的效率是非常低的那又比如我们会对整个产品的品牌做一个升级和更新，我们的颜色可能只对品牌色做一些调整。这个时候设计师和开发同学就要花大量的人力和时间，对我们的设计稿以及线上的产品做一个更新和迭代。这个成本是非常的高的。
1.2 可编辑性
当产品提出需要修改品牌色，我们会发现有很多的地方是需要修改的，这对于设计和研发来说都是非常大的工作量，可能有人要说设计使用组件去修改也是一样的，可是对于研发来说不一定每一处都运了组件，所以这个时候运用Token就显得非常重要了
二、为什么要用Design Token？
2.1 一致性
Design Token的核心优势之一是它能够帮助我们在设计团队内提供一致的设计语言，提升我们设计产出的一致性。
比如说我们对蓝色做了色阶的设计规范定义。在实际的这个过程中，我们会有不同的设计师产出不一样的设计稿。
但是对于按钮使用的颜色，可能blue-5和blue-6当中用肉眼分辨的话差的也不是很多。那对于不是特别熟悉设计规范的设计师来说的话，它就会产生困惑，到底哪个颜色应该用在button上。这个时候我们给他一个button上的具体的component token的一个定义。这样的话两位设计师产出的设计上使用的颜色一定是一致的那这个蓝色可能不仅仅运用在按钮上，它可能还运用在我们的icon上面，我们的text button上面。运用同样的方法，我们就能确保我们不同设计师产出的设计稿一定是一致的。
通过在整个应用程序或产品中使用相同的Design Token，确保了用户体验的一致性，无论用户使用的是Web、移动端还是其他平台。
2.2 可维护性
设计系统是一个持续演进的过程，不断更新和优化。使用Design Token，设计系统的维护变得更加容易。通过修改或添加Design Token，可以轻松地更新整个系统的外观和样式，而无需深入到每个页面或组件。
例如我们通过这一次文件的变更，任何改动都能及时的变更到我们所有的设计当中。举个li'zi例子，有一个颜色，我们储存在token的一个值，color-brand。我们通过token的Jason文件输出到开发同学，开发同学部署到我们的前端。假设这个颜色做了一个色彩上的变更的话，同样它只需要对Jason文件重新做一个自动的发布。那线上这个产品就能非常迅速的运用到我们最新的这个色值。
2.3 跨平台和多渠道部署
在当前多渠道部署的环境下，一个应用可能需要同时在Web、移动端、桌面端等多个平台上运行。使用Design Token，设计系统可以更容易地适应不同平台的需求，确保在各个渠道上呈现一致的设计。
三、Design Token的规范体系
要理解Design Token的工作原理，我们需要了解它的规范体系。Design Token并非是一个统一的标准，而是基于一系列规范的体系。
3.1 Token类型
我们看一下哪些是哪些元素是可以被Token化的。其实我们日常所使用的，比如说色彩、间距、字体，包括那些圆角、尺寸、阴影这些种类都可以被细分，并且是可以被Token化的那大家可以根据自己的产品和项目的不同，各取所需，确定自己想要token化的一些内容。
3.1.1 颜色Token
颜色Token定义了设计系统中使用的颜色，通过命名和规范定义颜色，确保一致性和易于管理。
3.1.2 字体Token
字体Token规定了设计系统中所使用的字体，包括字体家族、大小、行高等。
3.1.3 间距Token
间距Token定义了在不同元素之间和元素内部的间距值，确保在整个系统中保持一致的布局。
3.1.4 边框和阴影Token
这类Token定义了边框和阴影的样式，确保在整个应用程序中使用相同的边框和阴影效果。
PS：这里我们为大家整理了一套详细且全面的元素表，可以根据自己的需求提炼设计中需要Token化的元素，有需要的小伙伴评论或私信“需要”即可领取
3.2 命名约定
为了确保Design Token的可读性和一致性，命名约定是至关重要的。采用清晰、简明的命名约定，有助于团队更好地理解和使用Design Token。
我们需要定义基础Token也就是上述类型中的元素；为基础token赋予语义化别名token；为了更灵活的使用和调用token我们需要在多一层组件token
例如我们仅有有了颜色Token是不够的，如果此时需要将组件颜色改为其他的颜色或者token，那就意味着我们要去手动更改项目中每个相关的地方，这需要很长的时间。这里重点来了如果，继续像以前那样，仅仅因为都是同一个颜色，就都调用品牌色那个token，这样后期开发改起来就很麻烦，所以现在引入了第二层的token，也叫别名。
这里我们看到，它们中间是多加了一层，大家有没有发现什么区别？答案是这三个名字前面都给限定了一个使用范围，按钮叫button-primary，那说明只在按钮使用，第二个叫checkbox-active，是复选框的激活状态，第三个是radio-active单选框的激活状态。
所以中间这三个token名字都有限定的一个使用范围。图示的三个组件都限定了使用场景的情况，这样做的好处就是把token又给细化了一层，让token更加模块化、自由，设计与开发使用起来也更加灵活
当有了被限定使用范围的别名token后，可以继续加大颗粒度细化为组件token，这就相当于组件库中组件套组件的概念，具体操作将在下篇中详细讲述。
这里为大家整理了一些大厂对于design token的命名。
字节跳动
腾讯
具体要如何对Token进行命名和嵌套让Token为我们的工作带来便利，我们将在下期进行详细的讲解。
3.3 文档化和版本控制
好的规范体系需要有详细的文档，以便设计师和开发者能够理解和正确使用Design Token。同时，设计系统的版本控制确保了对Design Token的更改具有可追溯性，帮助团队管理变更和升级。
结论
Design Token是构建一致性设计系统的重要工具，通过将设计属性转化为可编程的代码，它提供了一种强大的方式来管理和维护设计系统。规范的体系、清晰的命名约定以及文档化和版本控制，是确保Design Token发挥最大效果的关键。通过提高一致性、可维护性，以及适应多平台部署的能力，Design Token助力团队构建出色的用户体验。
我们将在下一篇中详细为大家梳理如何为designtoken规范命名，以及Figma Variable的使用。
如果觉得这篇文章有带你初步了解到DesignToken不妨点个赞吧！
参考文献：
Atlassian Design System：https://atlassian.design/tokens/design-tokens
色彩 - Ant Design：https://ant-design.antgroup.com/docs/spec/colors-cn
TDesign - 开源的企业级设计体系：https://tdesign.tencent.com/
Semi Design：https://semi.design/zh-CN/
