详解｜Design Tokens 在设计系统中的意义与应用.docx

《详解｜Design Tokens 在设计系统中的意义与应用.docx》由会员分享，可在线阅读，更多相关《详解｜Design Tokens 在设计系统中的意义与应用.docx（13页珍藏版）》请在第一文库网上搜索。

1、详解| Design Tokens在设计系统中的意义与应用一什么是 Design TokensDesign Tokens并不是一个新概念，它是一种设计师和开发共同使用的工作思维和方法。Tokens的本意是令牌/指令，与Design连起来可以被理解为设计变量”。如下图，我们可以分别将button的背景色、文字色、文字属性定义成Token ,用代码化的语言，将组件的每一部分属性进行有规律的代码化命名。Button色值：#E5133AToken : color-button-background-primary-normal色值：# FFFFFFToken : color-text-oncolor字

2、体：Roboto,字号：16,字重：Medium,行高：24,字间距Token : font-size-button大家应该都对设计系统有一定的了解（关于组件库和设计系统的相关概念可以阅端组件设计及工作经验系列文章），尽管我们可以通过设计规范、组件库、素材库等手段，对设计和开发的流程进行提效，但实际上却经常遇到令人头疼的细节问题，比如： 开发所用的字号/颜色/间距等细节和设计稿不一样； 设计师根据新的业务需求设计了一张组件库中没有的卡片，但不确定卡片的背景和边框应该用哪个颜色； 产品新增了暗黑模式，设计和开发都面临巨大的工作量； 老板用了已上线的产品，觉得主题色的蓝色太重，想换主题色为浅蓝色。

3、以上这些问题,其实都可以通过Token进行优化解决。Design Tokens相当于将设计组件进一步拆解，使其原子化，将组件的每一种属性都转变为一个前端变量。可以说,Token本质上就是找到了组件.属性和代码之间的对应关系，统一了样式和前端语言，使组件和设计系统可以被快速管理。二、Design Tokens有哪些优势Design Tokens在设计系统中相当于一种正确且唯一的设计决定，在使用时有四大优势：1 .设计语义更易理解；2 .设计产出更加一致;3 .设计成果更准还原;4 .设计改进更易维护。1 .设计语义更易理解每一个组件中的复杂属性都可以被Token进行语义化的描述，帮助设计师和开发

4、建立画面感。举个例子：#495FDF这个颜色，按照设计系统中的命名方式，它可能会被叫做Blue 60o而当我们通过Token语义的方式让它达到组件级别的精度时，它会被叫做：color-button-border-focused。设计师和开发在使用时，就能迅速了解到这个颜色应用在哪里：2 .设计产出更加一致在实际设计过程中，一款产品通常会有不同的设计师参与产出设计稿。对于不熟悉设计规范的设计师，经常会有这样的困惑：组件库的组件不全，我新设计的卡片,背景色应该使用设计系统中的哪一个红色? Red50还是Red60 ? 。这时如果我们给卡片背景色定义一个Token ,不同设计师根据Token来选择颜

5、色，在卡片背景色上使用的颜色就一定是唯一的，这就能确保不同设计师产出设计稿的一致性。3 .设计成果更准还原当设计师在验收开发内容时往往会花很多时间去检查开发结果与设计稿的一致性。使用Token就能确保设计稿被高效、准确地还原。举个例子,在不使用Token的情况下，开发使用的是一个硬代码的模式，当输入不正确的色彩代码的时候，系统无从判断这个颜色是否使用正确，也就不会报错。而在使用了 Token之后，如果开发引用了错误的或根本不存的色值时，系统就会给出报错提示，开发由此得以自行检验，设计师的验收成本也会大幅降低：不使用Token/ buttons.scss1 color:#4254D5/ corr

6、ect color i s #4D5ED7/ no errors使用Token/ buttons . scss1 color:$cScotor-but ton-background-primary-normaScolor-but ton-border-secondary-normalcomponents/button.scss341:1 X color:$color-button-background-norma I4.设计改进更易维护设计的变更和迭代将变得更加轻松。举个例子，你的产品需要更新主题色，如果没有Token ,对于设计和开发来说将会是极大的工作量，需要一个个组件修改,还很容易漏掉或

7、混淆一些细节。但如果用Token ,开发只需重新输入每一个Token对应的新色值，就可以做到产品全局的颜色更换，不需要一个个组件的排查和更改，省时、高效、准确。使用Token刖使用Token后颜色使用该色的组件颜色对应的Tokens使用该色的组件主色：#408FF7件件件件件件rTT rTT nT|一4一夕一夕幺一 幺一12 3 4 5 6主色：#408FF7Token 1Token 2Token 3组件a1 ；组件a2 ；组f组件b1 ；组件b2组件cl组件7；衍生色 1 : #84B7F9嚣；:庙件行衍生色2 ： #E9F8FF件件件件组组组组12 3 4衍生色 1 ： #84B7F9 T

8、oken 4Token 5组件d1 ；组件d2 ；组f组件e1衍生色 2 ： #E9F8FF . I 前:Token 7组件fl ；组件f2 ；组件组件gl三.如何使用Design Tokens1. Token的命名方式关于Token的命名，不同的公司、团队、产品有不同的定义方式，但都遵循一定的逻辑和规则，且设计和前端要达成信息同步。这种命名的思路和给组件命名很相似，都需要先对组件的属性进行分类和整理。我们可以从组件系统中的核心元素入手，将整个组件系统拆解出形、色、字、构、质”这几个大的方面，并依照不同的类别、元件、属性、等级和状态，对Token进行命名上的规范定义:圆角色彩n文字间距阴影_类

9、别Category元件Symbol属性Property等级Variant状态State图标 n 按钮 m 文字 边框 链接 n 容器背景边梅 IT T普通悬浮 点击 失效 聚焦举个例子，下图中的button ,它的背景色Token使用上图中的命名方式，从左到右分别是它的类别、元件、属性、等级、状态，所以这个button的背景色所又寸应的 Token 就是:color-button-background-primary-nomal :Button类别 Category属性 Property状态 Statecolor - button - bBOground - primary - normal元

10、件 Symbol等级 Variant有了这样一个系统性的命名规则之后，我们就可以以表格的形式，将设计系统中所有涉及到Token的元素特征都整理出来，作为设计和开发拉通提效的基准:ButtonTokenRoleColorHEXcolor-button-background-primary-nonnalprimary button nonnal state background colorRed 60E5133Acolor*button-background-primary-hoverprimary button hover state background colorRedBF062Ecolor

11、-button-background-primary-activeprimary button active state background colorRed840021color-button-border-secondary-normalsecondary button nonnal state border colorNeutral 30C6C6C6color*button*background-secondary*hoversecondary button hover state border colorNeutral 80333333color*button-background-

12、secondary-activesecondary button active state border colorNeutral 606F6F6Fcolor button - border-teritary -normalternary button nonnal state border colorRedE5133Acolor-button-background-teritary-hoversecondary button hover state border colorRed 60E5133Acolor-button-background-teritary-ctivesecondary

13、button active state border colorRed 80840021color-button-background-disablebutton disable state background colorNeutral 10F6F6F6color-button-bordf-disablebutton disable state border colorNeutral 30C6C6C6color-button-border-focusedbutton focused state border colorBlue 60495FDFcolor-button-text-ghost-

14、red-normalghost red button normal state text colorRedE5133Acolor-button-text-ghost-red-activeghost red button active state text colorRed 808400212. Token的应用方式通常设计和开发是需要使用一套完整的Token列表来实现信息对齐。如果你的团队在使用Figma作为设计协同工具，也可以使用插件：FigmaTokenso设计师将整理好的Token文档导入到这个插件中，而开发可以利用这个插件高效生成Token对应的JSON文件，直接复制用于编写代码，这样就可以很好的保证设计与开发协作的一致性和准确率:使用Figma & Tokens插件Export JSONbutton14: abackground-primary-nornalM: -value-： Mre5133a,“description”: priary button normal state backcntype*: color-,.bonJer-secondary-nornal s