Design Token 的探索与应用

1. 提效神器 Design Token 的探索与应用昱星｜元尧蚂蚁集团体验设计师

2. 设计系统的建设设计系统的建设是一个庞大复杂的工程尽管我们通过设计规范、组件库、素材库等等手段试图进行产研过程的提效但是人员和项目的复杂性产品不同生命周期的迭代以及产品设计趋势变化带来的冲击导致我们经常遇到一些细微但棘手的问题图片来自：https://agentestudio.com/blog/design-systems-guide

3. 哪个是边框的颜色？

4. 品牌色更新了？ #E5133A #E5135A

5. 开发又“看错”了色号？首⻚首⻚ #4D5ED7 #4254D5

6. 增加了暗黑模式设计工作量 X 2 ？

7. ✅ 如何提升设计师的决策效率

8. ✅ ⏱ 如何提升设计师的如何让设计变化应用的决策效率更快更准

9. ✅ ⏱ ? ? ? 如何提升设计师的如何让设计变化应用的如何在不同系统和设备上决策效率更快更准快速拓展设计

10. DESIGN TOKEN

11. DESIGN TOKEN

12. ? ?? ? “Token”原本的意思是 “令牌”，在工程逻辑中用于用户身份与服务器端进行验证。

13. “Design Token 是正确且唯一的设计决定助力大团队进行设计、感知和开发。” “A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.”

14. 目录 01 什么是 Design Token 02 如何在设计系统中创建 Design Token 03 Design Token 在 WorldFirst 中的实战与展望

15. /01 什么是 Design Token

16. Token 就像是一个“昵称” 易烊千玺四字弟弟

17. Token 就像是一个“昵称” 易烊万玺四字弟弟

18. Token 就像是一个“昵称” 易烊万玺 #E5133A 四字弟弟 WF-Primary

19. Token 就像是一个“昵称” 易烊万玺 #18E7CF 四字弟弟 WF-Primary

20. Design Token 的优势 • 设计语义易理解 • 设计产出更一致 • 设计变更易维护 • 设计还原度提升

21. 设计语义易理解将设计变量转化为语义化的 Token 帮助使用者建立界面的“画面感”

22. Token 的语义化转换通过语义化的方式进行描述和管理，能够大幅提升设计的决策效率

23. Token 的语义化转换通过语义化的方式进行描述和管理，能够大幅提升设计的决策效率

24. 设计产出更一致在设计团队内针对组件使用统一的 Token 能够提升设计产出的一致性

25. ?

26. color-button-background-primary-normal ?

27. color-button-background-primary-normal color-icon-primary color-text-button

28. 设计变更易维护通过对 JSON 文件的变更任何改动都能够及时的变更所有设计中

29. #E5133A WF-Primary Tokens.json Web Mobile

30. #18E7CF WF-Primary Tokens.json Web Mobile

31. 设计还原度提升只要确保正确的使用 Token 设计能够高效安全的还原落地

32.

33.

34. Design Token 的类型 • • • • • • • Colors 色彩 Font 字体 Font Size 字号 Opacity 透明度 Line Height 行高 Spacing 间距 Radius 圆⻆ • • • • • • Sizing 尺寸 Shadow 阴影 Time 时间 Touch 触摸 Media Query 多媒体 Z-index Z轴

35. /02 如何在设计系统中创建 Design Token

36. 为跨境电商卖家和中小企业提供更加快捷、方便、安全和实惠的跨境收款服务。

37. WF Design System 设计规范组件库图标&插画

38. 7 APAC ? 设计决策难 ? 还原度差 4 8 特招 UK 6 DEV ? 协同效率低四方合作设计协同效成本很高，需要点对点人肉沟通。

39. Global Token Component Token 设计系统中的原始变量不带有上下文环境因素为产品专项定制与特定的组件库强绑定 #E5133A #E5133A Red 60 Red 60 color-button-background-primary-normal ? ?

40. Design Token 的命名提炼设计中的核心元素：形/色/字/构/质，并拆解成结构化的树状图，帮助我们系统性的对token进行命名形色字构质

41. Design Token 的命名提炼设计中的核心元素：形/色/字/构/质，并拆解成结构化的树状图，帮助我们系统性的对token进行命名类别 Category 形色字构质圆⻆色彩文字间距阴影

42. Design Token 的命名提炼设计中的核心元素：形/色/字/构/质，并拆解成结构化的树状图，帮助我们系统性的对token进行命名类别 Category 形色字构质圆⻆色彩文字间距阴影元件图标按钮属性背景边框等级一级二级三级普通悬浮点击 Symbol Property Variant 状态 State 文字边框链接失效聚焦容器

43. Button Example：

44. Button Example：类别 Category 属性 Property 状态 State color - button - background - primary - normal 元件 Symbol 等级 Variant

45. Design Token资产将Token以固定格式整理成资产库，作为拉通提效的基准。

46. Design Token资产将Token以固定格式整理成资产库，作为拉通提效的基准。 Token 案例 Token名称 Role ⻆色 color-button-background-primary-normal primary button normal state background color Color 色阶 Red 60 Value 色值 #E5133A

47. /03 Design Token 在 WorldFirst 中的实战与展望

48. Figma

49. Figma Figma Tokens

50. 使用 Figma & Tokens 插件

51. 使用 Figma & Tokens 插件 ?? ?? ?? 设计师 ?? 开发

52. 使用 Figma & Tokens 插件

53. Export JSON 使用 Figma & Tokens 插件

54. 应用案例 · 基础组件

55. 基础组件高级组件

56. 基础组件单一的原子级别的组件高级组件

57. 基础组件高级组件单一的原子级别的组件组合的区块级别的组件

58. 基础组件高级组件单一的原子级别的组件组合的区块级别的组件通用各种需求场景

59. 基础组件高级组件单一的原子级别的组件组合的区块级别的组件通用各种需求场景适用专业、专用需求场景

60. 基础组件高级组件单一的原子级别的组件组合的区块级别的组件通用各种需求场景适用专业、专用需求场景快、准

61. 基础组件高级组件单一的原子级别的组件组合的区块级别的组件通用各种需求场景适用专业、专用需求场景快、准更快、更准、更专业

62. 以 WorldFirst 结果⻚为例

63. - 插图（必有）：内容与功能相关联； - 标题文案（必有）：纯文字标题； - 内容文案（必有）：包含文字描述、链接等； - 行动按钮（必有）：一般为一到两个按钮； - 表单和表格（可选）：表单、表格等信息呈现； - 相关链接（可选）：较低概率事件的解决方案或渠道链接；

64. - 标题文案 - 内容文案 - 行动按钮 - 相关链接

65. - 标题文案 - 内容文案 - 行动按钮 - 相关链接

66. - 标题文案 - 内容文案 - 行动按钮 - 相关链接

67. - 标题文案 - 内容文案 - 行动按钮 - 相关链接

68. 中文常规设计样式 CN EN

69. 英文版本设计样式 CN EN

70. 变换主题颜色 color-button-background-primary-normal

71. 更改字体特征 header1： Title Title

72. Text Body: 16px —> 14px 设计师在设计工具中更新某个字号

73. Text Body: 16px —> 14px 设计师在设计工具中更新某个字号传统工作流输出给开发更新设计规范开发更新代码设计师更新设计稿设计师验收开发结果 ? 最快 2-3 天

74. Text Body: 16px —> 14px 设计师在设计工具中更新某个字号传统工作流输出给开发更新设计规范开发更新代码设计师更新设计稿设计师验收开发结果 ? 最快 2-3 天 Token工作流更新Design Token参数导出JSON 开发应用JSON 设计稿自动更新 ? 最快 1 小时

75. WorldFirst Design System 的未来 • 适配多终端设计 • 注重无障碍设计 • 顺应本地化设计

76. 适配多终端设计将响应式的设计规范通过 Token 高效输出到多终端响应式设计规范 Tokens.json Web Mobile

77. 注重无障碍设计在不同模式下严格遵循 WCAG 标准，通过 Token 高效管理 ? Dark Mode ? Light Mode ? WF Token Library Light Theme Dark Theme

78. 顺应本地化设计在海外地区尊重本地用户文化差异，通过 Token 管理本地化设计近期收入 Income ¥ 238,231,22.00 $ 238,231,22.00 上升：红色上升：绿色 CN Token：Color-icon-increase EN Token：Color-icon-increase

79. 扩大 Design Token 的价值在支付宝国际事业部 B 端产品线扩大应用范围，提升价值影响

80. 谢谢观看