也可以看看我的 milanote [[我的 Figma Token 实践与测试]] ## 待分类 [[Design Tokens 画布.canvas]] 其实大部分前端组件库都是我那样的 基础的就叫 color-[colorName]-level 语义的就是 color-[semantic]-[state] 组件的就是 color-[components]--...-[size]-...-[state]-... ## 概念 设计工程化的重要环节· Token 实际上是将设计中的基础元素与具体的样式进行解耦。 ### W3C 官方 - Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale. - Design tokens were created by the [[Lightning Design System]] team, and the name comes from them ([Jon](https://twitter.com/jonnyl) & [Jina](https://twitter.com/jina)). - 起源于 salesforce  - [[Lightning Design System#^f4f6ab]] ### 微信设计 Design tokens 是存储样式值（如色值、字重）的载体。使用它，能简化设计系统的构建和使用，更能推进设计与代码的统一。[让组件库井井有条](https://mp.weixin.qq.com/s/jw8sfzb1NgYBWqjNLJu6Kw) Design tokens 的概念，能帮助设计师更有条理地理解和整理颜色变量、图层样式、控件等。 Tokens 分为 3 个类型： **Reference tokens** 这是最基础的一类 tokens。 其命名以 . Ref. 开头，指向一个静态值，如：表示颜色的十六进制代码（ #E8DEF8 ）、字重（Roboto Medium）。 ![[Pasted image 20220314200228.png]] **System tokens** 这是一种具备「环境感知」能力的 tokens，也被称作 alias tokens。 其命名以 . Sys. 开头，通常指向多个 reference tokens。具体指向哪个 reference token，将由上下文关系（如设备是否为全面屏、是否为深色模式）来决定。 下图所示的案例中， md. Sys. Color. Background 这一 system token 就会根据系统是否为深色模式来指向不同的 reference tokens： ![[Pasted image 20220314200405.png]] **Component tokens** 这是表达组成控件的元素、值（如元素内标题的字体、图标的的各个样式，或控件的具体状态）的 tokens。 其命名以 . Comp. 开头，通常指向 reference token 或 system token ### 海上星光 > Design Tokens 是一组有着统一命名规则的实体，用于储存视觉设计部分的具体参数，比如 HEX 色值、间距、尺寸等。使用它可以有帮助为 UI 开发工作维护一套具备可扩展性、一致性的视觉体系。 > [Vol 14 instagram正在打破原则、设计系统与代码开发的后半生 | 海上星光](https://hsxg.zhubai.love/posts/2125223110391013376) ## 类型 Token Type？ 通常，我们把它们分为三类: ### Global tokens or Core tokens 例如：blue-700 ### Alias tokens Relates to specific context. 与特定的上下文有关。 例如：cta-bg-color ### Component-specific tokens relates to a component. 组件特定的令牌 例如：button-cta-background-color ## 命名方式 [The Design System Guide](https://thedesignsystem.guide/design-tokens) 命名需要时间。通常，团队会花费大量的脑力去寻找完美的逻辑。你可以在其他开放式设计系统中找到灵感，但这并不意味着它就适合你。我推荐一个研讨会来为您的用例找到最佳的结构。 好的命名应该是有下面的特征 1. Short 精简 2. Meaningful 有意义 3. Easy-to understand 易理解 4. Modular 模块化 5. Consistent 一致性 ### Color #### Global  #### Alias  #### Component-specific names  ### Size  ### States  ## 好处 Benifits？ ### Use of the same language. 改善团队之间的沟通。 ### Synced files. 一个真相的来源，所有平台的一致性。 ### Solid foundations. 稳定的设计系统带来价值。 ### Easy maintenance. 在一个地方编辑，同时更新所有内容。 ### Less design and technical debt. 花费的资源更少。 ### Brand consistency 品牌一致性，通过透明的视觉层次系统，创造新产品、保持一致性和管理品牌正变得更容易、更快、更便宜。 ## 最佳实践 ### 命名实例，以品牌色为例。 $color-background-button-primary-default 更多实例可以查看我的 [Notion](https://www.notion.so/uxchi/5efaa9689baf4dc0b3361fb90d6aee95?v=4cf49c469c8c43dfb6c0f6219ef775b0) 不过还没啥内容，就是随缘收集一些 Token 的案例。 ### 我的疑问 - Token 拆分的原则？例如 Bg 和 Fill？ 我的想法是，为了灵活性拆开的好，例如品牌色蓝色时，链接 100%是和品牌色一致的，那要是品牌色算黄色呢？ 换皮肤呢？ #我的备注 - 要的，举个例子，现在青云控制台所有页面的背景色是 #e4ebf1 ，然后有些组件例如标签、进度条底色也是这个颜色，假设有客户定制了青云控制台，但嫌背景太深，要换成稍微浅一点的 #F5F7FA ，那就无法做到只改背景不改组件了 #网友Asorn 同理，切换主题时，区分开的好处就是可以单独控制。 - 同色号，不同命名，产生多个 token 是正常的吧？语义化为主。 - 如果色彩不多时，有必要跨过一层 Global gray-100 200 这种（一般适用于什么场景？），然后再引用嘛？感觉搞复杂了。 ### From Biscuit #MrBiscuit Global/Base Token 以名词命名 Alias Token 以功能性/实用场景命名 不过 Token (Figma 里叫 style variables) 不光是局限于颜色 像圆角、投影效果、Padding、Margin、描边粗、虚线、字号等等全都要 Token 化掉否则还不如用 #FFFFFF Hex 值收益高 再者就是到组件一层 Token 玩熟之后你们会发现有个概念叫 Mixin 就是多个 Token 组合成的 “一套” 这个给组件用起来要比每次分开写几十个 Token 更上道哦 ### 网友讨论 #### 20220525 ##### 顾魏 - 命名的规范 - 然后不做太细的 token，比如我们这里 bg 不会区分按钮的或者对话框的统一分为 4 级 background/surface/foreground/shape - 然后比如 color 就分级来做 90%以上要用语义颜色，$dark.bg.background/$ dark. Storke. Hero. Actived 9%可以直接用调色盘，$dark.palette.5/$ dark. Palette.10 最后 1%找我来沟通 ##### 河马非马 这边的情况是 1. 因为移动端的通用组件库不完善和更新较慢，没法满足业务的开发节奏的需要—新增样式的场景很频繁，所以在业务文档中各自管理颜色样式，将样式管理的权限交给各业务设计师； 2. 颜色使用分为基础色板和功能色板，设计师根据具体场景来给颜色样式命名（所以样式的命名目前没有标准） 3. 设计师通过内部插件导出样式表给开发，开发直接引入到工程文件中，（目的是让设计师管理样式部分的代码，方便后期做主题管理和风格迭代） 4. 刚才提到的命名规范不统一更多是项目间的，因为不同的设计师命名习惯不同。同时在同一个项目中，因为设计师对非自己产出的样式其作用范围比较迷糊，也会需要沟通成本。 组织沟通会、或者在群里吼一声是一个方法，但感觉长久下去大家也容易忘。 现在想通过前期培训，让大家遵守一套命名规则（参考 < [https://www.figma.com/community/file/1096728307713953219>](https://www.figma.com/community/file/1096728307713953219>) ），然后在插件中录入这些选项，让设计师在新建样式的时候做选择题，而不是填空题 ## 资源 - [Design tokens - Fluent 2 Design System](https://fluent2.microsoft.design/design-tokens) 微软2023年5月最新 Fluent Design ，值得学习。 - [Colors | Nord Design System](https://nordhealth.design/colors/#principles) 挺有参考价值的一个 alias 级别的 token。 - [Design Token 资源汇总](https://www.yuque.com/uixxs/bilibili/oix8ik?) #草帽 的教学文档，非常适合新手。 - [(2) Rolling out design tokens to a branded house with 18+ products - Deborah Lindberg, Lewis Healey - YouTube](https://www.youtube.com/watch?v=m8ZSu9eCsQc) jira 团队的分享，感觉挺有价值。202302  - [[Naming Tokens in Design Systems]] 设计系统专家。 - [大厂都在用！ 万字干货带你读懂并应用 Design Token - 优设网 - 学设计上优设](https://www.uisdc.com/design-token-2) 还不错的一个中文教程。还介绍了 Figma 插件的使用。 - [Moon Design System](https://moon.io/tokens) Figma 里文件做的真不错。 - [Design tokens – Cloudscape Design System](https://cloudscape.design/foundation/visual-foundation/design-tokens/)