一款无惧“魔改”的设计系统开源了，已支持字节跳动4000多个项目

以你之姓@ 2022-08-28 01:56 636阅读 0赞

对设计师和前端开发来说，个性化设计和高效的实现往往难以兼得：

视觉上的个性化设计往往意味着开发要对设计系统的组件库进行各种魔改和封装，对程序员来说，不仅开发成本高，后期维护也比较困难。

现在，一款名为Arco Design的全新开源设计系统或将打破上述困局。

ArcoDesign的开发者、字节跳动GIP UED和前端架构技术团队介绍，个性化定制能力被列为Arco需要解决的头号问题，除此之外，Arco Design还着力解决了“二次开发+复用能力”以及“设计+开发无缝协作”两大前端开发者最为头疼的问题。目前，Arco Design已经支持了字节内部超过 4000 个项目，是字节内部使用规模最大的设计系统。

官网：[https://arco.design][https_arco.design]

Github React 组件库：  
[https://github.com/arco-design/arco-design][https_github.com_arco-design_arco-design]

Github Vue 组件库：  
[https://github.com/arco-design/arco-design-vue][https_github.com_arco-design_arco-design-vue]

## 务实而浪漫的Arco Design ##

Arco的名字来自于：Agreement（遵从一致）、Rhythm（韵律）、Clear（清晰）、Open（开放）。在意大利语中，Arco还意为一种优雅的音乐演奏手法。

![在这里插入图片描述][ddf71481dae543bb8c6e67aadcceefc2.gif_pic_center]

正如其名字所蕴含的寓意，作为一款企业级设计系统，Arco Design秉承这样的底层设计原则：

**一致**：一致的设计产生品牌信赖感，也指开发与设计达成平衡一致

**韵律**：构建富有韵律的设计美感，是Bytedancer的浪漫

**清晰**：清晰的指向亦是效率的提升

**开放**：开放的平台面向更多的业务和产品提供具有生长性、包容性设计体系，适应更多复杂的业务场景

## 一张图读懂Arco Design ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ1NETui1hOiurw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

ArcoDesign拥有系统的设计规范和资源，同时依据规范提供了丰富的原子组件，覆盖了 React、Vue 两个技术栈。

在原子组件基础上，ArcoDesign也提供了丰富的定制化工具，包括风格配置平台、物料平台等，还提供资源平台包括 IconBox、Arco Pro 最佳实践等。旨在帮助设计师与开发者解放双手、提升工作效率，更高效、高质量的打造符合业务规范的中后台应用。

## ArcoDesign想解决哪些问题 ##

在过去的 3 年里，字节跳动内部中后台产品业务量的迅速增长对传统的设计与开发方式提出了很大的挑战。随着项目变大，模块和页面变多，视觉风格和交互越来越难以统一。

同一个业务平台下，不同的模块的视觉风格和前端开发框架都可能大相径庭，这对于用户体验和平台的一致性造成了巨大的困扰。

ArcoDesign的初衷就是想从源头上去解决平台的差异性和一致性问题，又快又好地提升各个平台的设计质量。

具体来看，ArcoDesign在**个性化定制能力、二次开发+复用能力、设计+开发更好地协作**方面有所突破。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ1NETui1hOiurw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]

## 个性化定制能力 ##

不同的团队风格，不同的业务场景，对视觉风格会有不同的需求。

以往，不论有没有设计参与，整体的技术选型都是比较自由的，有的团队选择 React ，有的选择 Vue；有的组件库是面性设计，有的组件库是线性设计。当设计给出设计图，开发需要在项目里进行各式各样的样式魔改。

在项目变多之后，为了更小成本的维护和代码重用，一般会基于所选组件库封装一个新的组件库，这个二次开发的组件库对组件的风格样式和默认行为进行魔改，魔改需要开发花费大量的时间成本，但基本是唯一的解决方案。

然而，只要涉及到魔改，就不可避免地会遇到升级问题。只要升级底层组件库，就有可能导致样式甚至功能出现出现不可预知的改变，为了求稳，就需要锁版本，锁了版本又没办法享受版本升级带来的新特性和 bug 修复，陷入一个恶性循环的怪圈。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ1NETui1hOiurw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]

> 魔改容易造成的恶性循环

为了解决样式定制难这个痛点，Arco 从设计之初就对组件进行了细致的拆分。

组件是设计系统提供的最底层能力。Arco 提供了 67 个基础组件，这些基础组件足以支撑绝大多数的业务需求。

![在这里插入图片描述][4ee44473ca5e4052a55269f31fc580bd.gif_pic_center]

> 一键切换“暗黑模式”

**风格样式定制**  
ArcoDesign将影响组件视觉的样式都抽离到了 token 之中，token 是最小化描述组件样式的变量，组件库中是以 less 变量的形式存在。从全局变量到组件级变量，用 token 来解释组件，用上千个 token 变量，来保证通过配置变量，就能对样式风格进行任意定制。

比如现在越来越多的网站会考虑支持暗色风格切换，“暗黑模式”会让使用者更加专注自己的操作任务，同时在夜间或暗光环境使用下可以减少屏幕光对眼睛的刺激，避免在黑暗环境中长时间注视高亮光源带来的视觉刺激。ArcoDesign支持一键开启暗黑模式，无缝切换，流畅体验。

**默认行为定制**  
Arco 支持 60+ 组件默认行为的全局配置，以极大的灵活性，减小维护成本、提升开发体验。用户只需要维护一份全局配置，就能定制每一个组件的默认交互。

值得注意的是，**Arco 同时提供了 React 和 Vue 两套 UI 组件库**。Vue 组件库基于 Vue 3.0 开发，提供了面向未来开发的能力，且与 React 组件库底层能力互通，均可完美利用 Arco 生态体系的各项能力。

依托系统的 ArcoDesign 设计规范，**ArcoDesign可以帮助无设计师参与的平台产品，快速构建专业、一致的体验**。

## 二次开发和复用能力 ##

得益于 Arco 组件灵活的 API 设计以及物料平台提供的定制化组件解决方案，用户可以基于 Arco 快速开发满足自身特定需求的定制组件。定制化的组件将更好地复用业务代码，促进团队协作，提升开发效率，更可与社区共享丰富的物料资源。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ1NETui1hOiurw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]

## 设计和开发更好地协作 ##

设计系统是一种思维，是设计师与前端开发沟通的一种语言。Arco希望通过提供全流程完善的生态体系，提升设计、开发全流程工作体验。

**全流程完善的生态体系**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ1NETui1hOiurw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]

**生态平台**

*  风格配置平台：通过协助用户构建个性化主题，帮助用户更好地管理不同风格的主题配置，提高设计和开发的协作效率。
 *  物料平台：基于 Arco 脚手架工具快速进行定制化的业务组件开发、共享，实现业务模块的解耦与复用，提升开发效率，促进团队协作。
 *  图标平台 IconBox：提供规范化、统一化的高质量业务图标库。
 *  中后台最佳实践 Arco Pro：帮助用户快速的从 0 到 1 搭建项目，支持用户自由选用常见页面模版。
 *  色彩配置工具 ：帮助设计师和开发者在线调试颜色，探索 Arco 色彩算法。

**开发工具**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ1NETui1hOiurw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 5]

*  Webpack 插件：帮助开发者在 Webpack 构建中方便地使用主题、实现按需加载、替换组件内置图标。
 *  Arco CLI 脚手架工具：封装了物料操作命令，帮助用户快速创建物料项目并将其发布至 Arco 物料平台。
 *  VSCode 插件：帮助用户在编辑器查阅文档、可视化操作物料等。
 *  Figma 插件：聚合了常见的设计工具，帮助设计师更方便地使用 Arco 的各项能力。

**设计功能**

*  为了方便设计师定位资源，Arco 提供了资源定位的 Figma 插件功能，让设计师可以一键轻松找到目标组件的设计资源以及开发资源。
 *  为了提高设计师的配色效率，Arco 提供了色彩配置的 Figma 插件功能，可以根据指定颜色通过算法智能生成明亮以及暗黑模式下的梯度色板。
 *  为了提高制作图标的效率，Arco 提供了一键拖拽使用 Arco 图标的 Figma 插件功能，在线颜色、线宽、尺寸调整，灵活配置，游刃有余。
 *  为了降低设计师制作 Figma 变体的成本，提高设计师产出符合设计系统规范的设计稿的效率，Arco 探索了 Code to Design，提供了以组件为维度的 Figma 插件功能，设计师可以通过在插件里配置组件属性，自动生成对应的设计元素。同时打通了风格配置平台，让设计稿可以轻松实现 「一键换肤」
 *  为了方便设计师管理图标，Arco 推出了 **Iconbox  
    图标平台**，旨在让设计师可以在该平台上高效地管理自己的图标。并且提供了图标上传的 Figma 插件功能，支持设计师在 Figma 中直接选中图标一键上传至图标平台。

经过了近三年的迭代和众多产品的验证，Arco Design已经成为字节跳动内部使用量最大的设计系统，助力众多字节优秀产品打造高质量的产品体验。Arco Design 在字节跳动内部还做了更多方面的探索，如可视化建站平台、D2C 设计图转代码工具、C2D 代码转设计图工具、品牌库等，未来将陆续开放。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ1NETui1hOiurw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 6]

[https://arco.design/ →][https_arco.design_]

Arco Design 现已正式开放，欢迎使用和体验。Arco 非常重视每一位用户的意见，希望大家踊跃反馈，积极共建。

[https_arco.design]: https://arco.design
[https_github.com_arco-design_arco-design]: https://github.com/arco-design/arco-design
[https_github.com_arco-design_arco-design-vue]: https://github.com/arco-design/arco-design-vue
[ddf71481dae543bb8c6e67aadcceefc2.gif_pic_center]: /images/20220828/6553ca6bfe7541a9bf7ce245f899b874.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ1NETui1hOiurw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/1f9aad3c03bc4604bd820ec466703919.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ1NETui1hOiurw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20220828/35f6fa18e1294392a7d0feb3faa508df.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ1NETui1hOiurw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: /images/20220828/cf68948bc13c41ae9688493b72462c25.png
[4ee44473ca5e4052a55269f31fc580bd.gif_pic_center]: /images/20220828/56c0c46cdc5545388cb908bb528101ea.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ1NETui1hOiurw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]: /images/20220828/b2b1537784834d7ab50fe355ed58d16b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ1NETui1hOiurw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]: /images/20220828/834a4a98198748f58e8b6fca15ca2820.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ1NETui1hOiurw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 5]: /images/20220828/24a0d5a5e9fd4aa8bb47ac2ceb1ed3a9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ1NETui1hOiurw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 6]: /images/20220828/6dc27ec112114d1f9792093e0750217e.png
[https_arco.design_]: https://arco.design/