你好，欢迎阅读我的周刊第30期。在这里，我将分享近期我读到的、看到的有趣或有用的东西，也分享我的一些灵感和想法。
本周分享一些关于 Design Token 的学习资源。
我所理解的 design token，就是开发和设计对画面元素（如颜色、字体、间距、圆角、阴影等）使用统一的语义化或场景化命名，用这些名称作为变量，样式值储存在变量中，每次需要修改样式时，只需要修改样式值，好处是打破了设计与开发的沟通障碍，能更好地保证开发还原度，减小双方工作量。
https://semi.design/zh-CN/basic/tokens
Semi Design 是由抖音前端团队，MED 产品设计团队设计、开发并维护的设计系统。
变量实际上是将设计中的基础元素与具体的样式进行解耦。
对于设计师来说，如果产品的风格需要迭代更新，比如需要更新 危险 的功能色，即 color-danger，只需要修改其对应的颜色默认值，既可以完成整套产品的 UI 迭代。
对于研发来说，为了配合产品风格的更新迭代，使用 Design Token 时可以更快速地完成所有组件的样式更新，而无需一处处地进行修改，这也是为什么在开发的过程尤其需要注意使用变量而不是固定的数默认值。如果产品的风格有多个平台共用的话，也能事半功倍。
特别地，对于有暗色模式需求的平台，需要使用 Semi Design 的颜色变量才能实现一键切换明暗色的效果。
https://spectrum.adobe.com/page/design-tokens/
Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. — represented as data. These can represent anything defined by design: a color as a RGB value, an opacity as a number, an animation ease as Bezier coordinates. They’re used in place of hard-coded values in order to ensure flexibility and unity across all product experiences. Design tokens are directly integrated into our component libraries and UI kits. They cover the various options of platform scales, color themes, component states, and more.
设计变量是构建和维护设计系统所需的所有值——间距、颜色、排版、对象样式、动画等——表示为数据。这些可以表示任何由设计定义的内容：颜色为 RGB 值，不透明度为数字，动画缓动为贝塞尔坐标。它们用于代替硬编码值，以确保所有产品体验的灵活性和统一性。设计变量直接集成到我们的组件库和 UI 工具包中。它们涵盖了平台比例、颜色主题、组件状态等的各种选项。
https://m3.material.io/foundations/design-tokens/overview
Tokens store style values, such as colors and fonts, allowing style values to be applied consistently across designs, code, tools, and platforms.
变量存储样式值，例如颜色和字体，允许样式值在设计、代码、工具和平台之间一致地应用。
https://www.lightningdesignsystem.com/design-tokens/
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
设计变量是设计系统中的视觉设计原子。它们是一组有着统一命名规则的实体，用于存储视觉设计部分的具体参数，比如 HEX 色值、间距、尺寸的像素等。使用它可以有帮助为 UI 开发工作维护一套具备可扩展性、一致性的视觉体系。
https://gestalt.pinterest.systems/design_tokens#Token-values
Gestalt 是 Pinterest 的设计系统。
Design tokens represent the values used within a design system to construct layouts and components, such as spacing and color. Because the tokens are an abstraction, the underlying value can change in different scenarios without affecting the designer or developer experience.
设计变量代表了在设计系统中用来构建布局和组件的值，如间距和颜色。因为变量是一种抽象，所以应用的值可以在不同的情况下改变而不影响设计者或开发者的体验。
https://nordhealth.design/tokens/
Nord 是 Nordhealth 的产品、数字体验和品牌设计系统。
Design tokens are a tech-agnostic way to store variables. We use tokens instead of hard coded values to ensure a better UI consistency across different platforms.
设计变量是一种与技术无关的存储变量的方式。我们使用变量而不是硬编码值来确保不同平台之间更好的 UI 一致性。
https://devui.design/components/zh-cn/design-animation/demo
DevUI Design 是华为云使用的一套设计系统。
https://mp.weixin.qq.com/s/eg_hP8o3oEAAVwAxmqhvGw
腾讯写的一篇指南，是关于如何通过 Design Token 更有效地保障设计、开发落地的一致性和可拓展性，有以下三个方面的详细讲解。
https://mp.weixin.qq.com/s/9LJT89vqjdVwsafDckh6Pw
这是蚂蚁集团体验设计师昱星和元尧在 SEE Conf 2022 的演讲内容，包括演讲视频及文字内容。
他们总结了 Design Token 的四大优势：
并通过万里汇(WordFirst)这个实际项目分享了如何在设计系统中创建 Design Token。
https://github.com/sturobson/Awesome-Design-Tokens
Github 上的一个关于 Design Token 的资源列表，内容非常详细，包含设计系统、GitHub库、文章、工具、插件等。
订阅： 本站所有内容首发于 tangweijuan.com，同步更新于微信公众号"Afterwork Time"，欢迎扫描下方二维码订阅。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。