ArcoDesign：字节跳动企业设计系统实践与思考

1. ArcoDesign：字节跳动企业设计系统实践与思考姚立｜ arco.design 字节跳动架构前端平台架构团队负责人

2. 在此键入姓名在此键入Tittle

3. 大纲一. 背景与起源二. 发展与挑战三. 未来与思考

4. 什么是 ArcoDesign A. Agreement 一致 “ Arco Design 是由字节跳动「GIP UED 团队」和「架构前端团队」联合推出的企业级设计系统。ArcoDesign 拥有系统 R. Rhythm 韵律的设计规范和资源，同时依据规范提供了丰富的原子组件， C. Clear 清晰组件基础上也提供了丰富的定制化工具，包括⻛格配置平 O. Open 开放覆盖了 React、Vue、Mobile、Chart 等框架和方向。在原子台、物料平台等，也提供了资源平台包括 IconBox、品牌库、Arco Pro 最佳实践等。旨在帮助设计师与开发者解放双手、提升工作效率，更高效、高质量的打造符合业务规范的中后台应用。 2021-08

5. —— 字节跳动 GIP UED & 架构前端 C U S T OM IZA T ION A BI LI TY Arco design 是什么？

6. ArcoDesign —— 字节跳动 GIP UED & 架构前端 B ACK GR OU ND & OR IGIN 背景与起源 InfoQ

7. 业务发展与困境 —— 字节跳动 GIP UED & 架构前端 B USI NES S C HALLE NGE 业务发展快技术栈不同二次开发与复用使用第三方组件库生态不健全业务场景不一致 InfoQ

8. 设计系统痛点 —— 字节跳动 GIP UED & 架构前端 OT HER S DE S IG N SYSTEM W EAKN ESS 基于业务定制⻛格成本很高一致性差设计⻛格单一，中后台产品千篇一律 8 交互体验不好效率低全局配置和二次开发难，后续难以维护公司内部物料积累困难灵活性弱设计稿到开发反复 UI 走查 InfoQ

9. 项目起源 —— 字节跳动 GIP UED & 架构前端 PR OJE C T OR I GI N 字节文化业务痛点新员工入职后需要「新人串讲」 ByteDesign 正式成为团队项目业务落地正向反馈团队基建团队内统一设计标准，快速扩大视频云团队内部项目试水业务落地集团基建集团内部推广，100+部⻔使用品牌升级 ArcoDesign 技术升级，构建Arco生态，覆盖280+部⻔ InfoQ

10. ArcoDesign —— 字节跳动 GIP UED & 架构前端 DE VELOP MENT & CH AL LEN GE 发展与挑战 InfoQ

11. 挑战与机遇 —— 字节跳动 GIP UED & 架构前端 DE SI GN LANG UAG E 定位的变化核心竞争力品牌升级同类产品众多业务推广开源 InfoQ

12. 定位变化 —— 字节跳动 GIP UED & 架构前端 C UST OM IZ AT ION ABI LIT Y 组件库升级设计系统 InfoQ

13.

14. 设计系统 01 设计系统是可复用的组件的集合，通过明确的标准引导，用来高效的构建⻚面和应用的系统。当然，设计系统不仅包含组件库，还包含以组件为基础，覆盖设计到开发的一系列标准、工具和产品，包括但不限于设计语言（规范）、组件库、设计工具、设计插件、主题配置器、物料、品牌、图标、字体、文档等等。图片来自网络 InfoQ

15. 核心竞争力 —— 字节跳动 GIP UED & 架构前端 C OR E C OM PETE NCE 极致的定制能力从⻛格样式到默认行为的灵活定制，使你的组件千变万化 InfoQ

16. 样式 token 设计 02 最小化用于描述和构成组件样式的变量，在组件库中以 less 变量和 css 变量的形式存在。组件库的 token 有数千个，主要分为两块： 1. 全局变量 2. 组件级变量 InfoQ

17. 样式 token 设计 02 ⻛格配置平台底层基于 token，提供全面的 UI 配置。全局配置 InfoQ

18. 样式 token 设计 02 ⻛格配置平台底层基于 token，提供全面的 UI 配置。组件级配置 InfoQ

19. 主题商店 02 ⻛格配置平台提供丰富的主题商店 InfoQ

20. 「子主主题」设计 02 支持父主题修改后同步至子主题。 InfoQ

21. 产品生态体系 —— 字节跳动 GIP UED & 架构前端 PR OD UC T I NT RODUC TIO N Arco 产品生态体系 InfoQ

22. 辅助开发工具链 —— 字节跳动 GIP UED & 架构前端 PR OD UC T C APAB IL IT Y IN TRODU CT ION Arco 辅助开发工具链 Webpack 插件 Arco CLI 脚手架 VSCode 插件 Figma Toolbox InfoQ

23. 辅助开发工具链 —— 字节跳动 GIP UED & 架构前端 PR OD UC T C APAB IL IT Y IN TRODU CT ION Arco 辅助开发工具链 Webpack 插件 Arco CLI 脚手架 VSCode 插件 Figma Toolbox Webpack 插件，帮助用户更方便的在 Webpack 中使用主题、按需加载

24. 辅助开发工具链 —— 字节跳动 GIP UED & 架构前端 PR OD UC T C APAB IL IT Y IN TRODU CT ION Arco 辅助开发工具链 Webpack 插件 Arco CLI 脚手架 VSCode 插件 Figma Toolbox 脚手架 Arco-cli，封装了物料操作等命令，用来帮助用户快速创建项目并将其发布至 Arco 物料平台

25. 辅助开发工具链 —— 字节跳动 GIP UED & 架构前端 PR OD UC T C APAB IL IT Y IN TRODU CT ION Arco 辅助开发工具链 Webpack 插件 Arco CLI 脚手架 VSCode 插件 VSCode 插件，帮助用户在编辑器查阅文档、可视化操作物料。 Figma Toolbox

26. 辅助开发工具链 —— 字节跳动 GIP UED & 架构前端 PR OD UC T C APAB IL IT Y IN TRODU CT ION Arco 辅助开发工具链 Webpack 插件 Arco CLI 脚手架 VSCode 插件 Figma Toolbox Fimga Toolbox 插件，聚合了常⻅的设计工具，帮助设计师更方便地使用 arco 的各项能力

27. 品牌升级 —— 字节跳动 GIP UED & 架构前端 B R AND UPGR ADE ByteDesign 品牌升级技术升级 ArcoDesign InfoQ

28. 如何从同类产品中脱颖而出 —— 字节跳动 GIP UED & 架构前端 ST ANDI NG OU T 极致的服务意识，自动化 Oncall 快速落地 + 标杆项目 + 口碑建设站在设计师的视⻆思考「好看的产品」 == 成功了一半定制化及强大生态能力官网建设、文档建设对大型业务团队的能力支持持续的技术创新和产品创新 InfoQ

29. 如何业务推广 —— 字节跳动 GIP UED & 架构前端 B USI NES S DEVE LOPMENT 与业务团队合作快速落地与技术平台合作二次放大价值业务深度绑定深度定制符合技术演进路线跨团队共建得与失，海纳百川 InfoQ

30. 开源 —— 字节跳动 GIP UED & 架构前端 OPE N SO UR C E 后「开源」时代主动寻求变化未知领域 X InfoQ

31. 业务数据 03 InfoQ

32. 业务数据 03 物料平台 70+ 个团队发布了 x00+ 个物料，累积下载量超过 x,x00,000 共有 - 数据截止到 2022-08 ⻛格配置平台 140+ 个团队在⻛格平台上创建主题，共创建 x000+ 个主题，其中有效发布主题 x000+ 个。目前已经有 - 数据截止到 2022-08 InfoQ

33. 业务数据 —— GIP UED & 架构前端 B USI NES S DATA 4000 + x,000 K + 服务平台数下载量服务平台数 InfoQ

34. ArcoDesign —— 字节跳动 GIP UED & 架构前端未来与思考 InfoQ

35. ArcoDesign Roadmap 更多生态工具 A R COD E SI GN R OAD MAP 资源库打造智能化设计生态 D2C 平台打通，工作流打通实现设计工程化 BrandStore Chart Space ToolBox ArcoSite 创意点生产 ArcoDesign Pro ⻛格配置平台 Arco Material 开源 Figma 插件、资源库智能化回馈社区，最大化产品价值 ArcoDesign组件完善阶段 ArcoDesign 补⻬设计规范，完善生态平台 InfoQ

36. ArcoDesign —— 字节跳动 GIP UED & 架构前端最新进展 InfoQ

37.

38.

39. 未来挑战 —— 字节跳动 GIP UED & 架构前端 FUT UR E C HALLENGE 社区影响力进一步构建生态护城河与技术创新产品服务质量 InfoQ

40. 生态平台 A R COD E SI GN V I SI ON GIP UED & 架构前端资源库生态互联理论基石 InfoQ

41. —— 字节跳动 GIP UED & 架构前端 InfoQ

42. 在此键入姓名在此键入Tittle

43.