大厂技术高级前端Node进阶

点击上方程序员成长指北，关注微信官方账号

回复1，加入高级Node交流群

ArcoDesign 简介

ArcoDesign 由字节跳动 GIP UED 企业级设计系统由团队和架构前端团队队共同推出的。近乎抛光 3 几年后，通过字节内大量的业务沉淀和验证，我们开源了 ArcoDesign 设计系统。旨在让社区听到更多的声音，为更多的中小企业、个人设计师和开发者创造更高效、更美观的最佳实践。

ArcoDesign 根据本规范，拥有系统的设计规范和资源，提供覆盖范围 React、Vue、Mobile 原子组件。基于丰富的原子组件，Arco 除了定制的风格配置平台和材料平台外，还包括图标平台、品牌库Arco Pro 最佳实践资源平台旨在帮助设计师和开发者解放双手，提高工作效率，打造符合业务规范的中后台应用。

正如 「Arco」 同名，遵循【Agreement / 一致】、【Rhythm / 韵律】、【Clear / 清晰】、【Open / 开放的概念，Arco 希望能帮助更多用户提高工作效率和愉悦度，打造更好的产品。

ArcoDesign 提供的能力

完善的基本组件

基于 ArcoDesign 设计规范，Arco 提供了 67 这些基本组件足以支持绝大多数的业务需求。Arco 细粒度配置也开放在这些基本组件的设计中，便于后续扩展。

React 和 Vue 同步支持

基于 ArcoDesign 设计规范，Arco 同时提供了 React 和 Vue 两套 UI 组件库。Vue 组件库基于 Vue 3.0 开发为未来的发展提供了能力 React 可以完美利用组件库底层的能力交换 Arco 生态体系的各项能力。

黑暗模式科学

Arco 一键开启暗黑模式，无缝切换，体验流畅。

暗黑模式 它将使用户更加注重自己的操作任务，同时避免在黑暗环境中长时间注视亮光源造成的视觉刺激。

Arco 结合底层设计 Less 和 CSS 变量各有优势。Less 变量负责编译时的颜色计算，基于主色计算亮度 / 暗两套梯度色板，CSS 变量负责页面渲染的最终引用，从而实现无缝切换亮 / 暗色风格。用户可以享受 CSS 变量带来的丝滑切换体验可以享受 Less 变量带来通过配置单个主色来生成整个色板，既优雅又易用。

开箱即用体验

为了帮助用户更快地从 0 到 1 搭建项目，Arco 提供了 最佳实践 Arco Pro ，整理常见的页面场景，帮助用户快速初始化项目，使用页面模板。

页面设计模式在中后台项目中相对单一，Arco 通过简单的复制和修改，提取典型的业务场景，将其抽离成页面模板，使用户能够快速构建页面。

极致的个性化定制能力

从底层组件到上层平台，Arco 提供终极定制能力。

底层组件

在底层组件上，Arco 提供提供 样式定制 和 默认行为定制 。

样式 方面，Arco 从设计开始，影响组件视觉的，将影响组件视觉的风格分为数千种独立的风格 token 基于这些变量，从 全局样式 到 组件样式 综合配置。

默认行为 方面，Arco 支持 60 组件默认行为的全球配置大大降低了维护成本，提高了开发体验，具有很大的灵活性。用户只需维护一个全球配置，就可以定制每个组件的默认交互。

上层平台

在底层能力的加持下，Arco 上层平台再次无限放大定制能力。

Arco 提供样式可视化编辑 「风格配置平台」 。基于风格配置平台 所见即所得 对于组件配置能力，用户可以调整整体风格和组件风格的细粒度 「 Arco Design to Any Design」 。配置完成后，用户可以一键将主题发布到主题市场，为社区提供优秀的主题风格。在主题市场上，用户可以浏览所有主题并自由选择。

沉浸式文档体验

在 Arco 在组件文档中，用户可以一键安装风格配置平台上的所有主题，人主题应用到平台上 Arco 沉浸式文档体验在组件文档上。

二次开发和再利用能力

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

生态系统全过程完善

Arco 希望通过完善的生态系统，提升设计和开发全过程工作体验。

生态平台

• 风格配置平台：帮助用户构建个性化主题，帮助用户更好地管理不同风格的主题配置，提高设计与开发的合作效率。

• 材料平台：基础 Arco 脚手架工具快速开发和共享定制的业务组件，实现业务模块的解耦和再利用，提高开发效率，促进团队合作。

• 图标平台 IconBox：提供标准化、统一的优质商业图标库。

• 中后台最佳实践 Arco Pro：帮助用户快速服从 0 到 1 建设项目，支持用户自由选择常见的页面模板。

• 配色工具 ：帮助设计师和开发者在线调试颜色 Arco 色彩算法。

开发工具

• Webpack 插件：帮助开发者 Webpack 构建中方便使用主题，按需加载，更换组件内置图标。

• Arco CLI 脚手架工具：包装材料操作命令，帮助用户快速创建材料项目并发布到 Arco 物料平台。

• VSCode 插件：帮助用户在编辑器中查阅文档、可视化操作材料等。

• Figma 插件：聚合了常见的设计工具，帮助设计师更方便地使用 Arco 各种能力。

更好和开发更好的合作

设计系统的主要用户群是设计师。Arco 一直在探索如何基础 Arco 周边生态提高工作效率。

• 为方便设计师定位资源，Arco 提供资源定位 Figma 插件功能，让设计师一键轻松找到 Arco 组件的资源文件和文件。

• 为了提高设计师的配色效率，Arco 提供色彩配置 Figma 根据指定的颜色，通过算法智能生成明暗模式下的梯度色板。

• 为提高制作图标的效率，Arco 提供一键拖拉使用 Arco 图标的 Figma 插件功能，在线颜色，线宽，尺寸调整，配置灵活，方便。

• 为减少设计师的制作 Figma 变体成本，提高设计师生产符合设计系统规范的设计稿的效率，Arco 探索了 Code to Design，以组件为维度维度的维度 Figma 设计师可以在插件中配置组件属性，自动生成相应的设计元素。同时，开辟了风格配置平台，使设计草轻松实现 「一键换肤」。

• 为方便设计师管理图标，Arco 推出了 Iconbox 图标平台旨在让设计师在平台上有效地管理自己的图标。并提供图标上传 Figma 支持设计师的插件功能 Figma 一键上传到图标平台。

优秀案例

Arco 我们致力于探索更好的设计体系，解决复杂业务和冗余沟通带来的经验问题，彻底解放开发和设计师的双手。经过近三年的迭代和抛光，我们为字节服务 4000 项目实现高效高质的产品搭建流程。是真正从实践中孵化而来，也广泛服务于内部业务的产品。

火山引擎

通过 Arco 组件库、风格配置平台和图标平台智能生成个性化主题包，满足各种业务需求，帮助火山发动机提高各产品线体验的一致性，更好地为企业提供系统的全链接解决方案服务。目前，火山发动机控制台已超过 60% 产品使用 Arco 构建组件库 。

头条号

使用 Arco 组件资源灵活丰富，今日头条快速搭建自媒体平台头条，为创作者提供创作发布、数据分析、收益分析等实用功能。

ByteEffects

使用 Arco mobile 定制组件和开发框架，BytedEffects 开发了展示智能图像创作能力的移动应用程序，为客户提供身临其境的功能预演和能力试用。

火山翻译

使用 Arco 自有的图标及品牌资源，火山翻译在短时间内完成了官网落地页的设计工作，多样的视觉内容帮助聚焦用户关注，引流平台提供的多语言翻译服务

星夜Starry

基于 Arco 组件的强交互能力，帮助星夜智能建站平台实现更加灵活智能的建站能力，在活动搭建、中后台搭建、垂直搭建等多种场景中提效。

未来展望

ArcoDesign 在字节跳动内部还做了更多方面的探索，如可视化建站平台、D2C 设计图转代码工具、C2D 代码转设计图工具、品牌库等。上述平台工具都会在未来陆续与大家见面，希望大家多多关注～

反馈和共建

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

官网：https://arco.design

Github React 组件库：https://github.com/arco-design/arco-design

Github Vue 组件库：https://github.com/arco-design/arco-design-vue

Node 社群




我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

   “分享、点赞、在看” 支持一波👍