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.