前端开发 如何高效落地 Design Token
1. 什么是 Design Token
Token 是什么
“Token”常见的释义为“令牌、象征、记号、代币”等。
在计算机领域，“token”通常指的是用于身份验证、授权或表示特定操作权限的一种凭证或代码片段。例如，在登录系统时，服务器可能会颁发一个 token 给用户，用户在后续的操作中凭借这个 token 来证明自己的身份和权限。
为什么 UI 设计中要用 Token
想象一个场景：如果一个系统或产品的迭代更改了产品的风格，那么在 UI 设计、开发人员和测试人员之间如何完成这一主题风格的迭代呢？
UI 设计确定了新风格后，设计出一个版本给开发。开发人员根据 UI 设计稿，更改样式（各种颜色、尺寸等），修改完成后交给测试人员，测试人员根据 UI 设计稿，一个一个地核对开发人员的样式是否与设计稿一致。如果中间出现颜色偏差或间距与设计稿不一致，开发人员需要再修改，最后完成一次主题风格的更新迭代。如果领导在此过程中觉得需要调整主题风格，UI、开发和测试人员又要重新进行一次流程。
这一过程存在两个主要问题：
频繁变更需求导致的设计、开发、测试重复修改颜色和尺寸。
人的沟通成本，产品 UI 开发测试反复的确认；人工修改的不可靠性，容易出现遗漏。
从程序员的思维来看，程序中容易变动的常量会用变量代替，这样一个修改就能影响整个应用。UI 设计中也需要这种能够改变一个值就能改变整个项目风格的全局变量（design token）。如果开发和 UI 设计之间提取界面开发中的变量，预定一个对应的变量名，UI 在更新设计时只需更新变量对应的值，开发更新代码中对应变量的值，风格更新在开发流程中这一环节也能快速完成。这样不仅提高了 UI 更新的速度，加快了开发的实现，而且不容易出现人为低级遗漏，测试也只需核对变量是否替换正确。
这就是 design token 产生的原因，它加快了整个产品开发中设计、开发、测试更新迭代的速度。
在 UI 设计中，使用 token 有助于保持设计系统的一致性、可维护性和可扩展性。
2 前端如何落地 Design
变量/Token 归类
抽象才能包罗万象，对界面上风格的改变，一般可以分为以下几类：
Design Token 的命名规范
阿里是这样命名的
我们看看组件库 Vant 的命名方式
总结下来
Design token 就是 变量化 界面设计和实现中的属性设置。
落地的基本逻辑就是：先有一个调色板，然后定义语义化的基础 token，如 颜色、尺寸、圆角、阴影等，然后在每个组件中根据功能属性状态等定义组件级别的 token， 且引用语义化的 token。
相关推荐
前端的世界总是在不断变化，作为开发者，我们需要保持好奇心和学习热情，不断探索新的技术，只有这样，我们才能在这个快速发展的时代中立于不败之地。低代码也是一个值得我们深入探索的领域，让我们拭目以待，它将给前端世界带来怎样的变革。
介绍一款程序员都应该知道的软件JNPF快速开发平台，很多人都尝试用过它，它是功能的集大成者，任何信息化系统都可以基于它开发出来。
JNPF 可以实现应用从创建、配置、开发、测试到发布、运维、升级等完整生命周期的管理。减少了传统应用程序的代码编写量，通过图形化、可视化的界面，以拖放组件的方式，即可快速生成应用程序的产品，大幅降低了开发企业管理类软件的难度。
希望这篇文章对你有所帮助～
摸个鱼，顺便发点有用的东西 2023-06-19 加入
互联网某厂人（重生版）
评论