资讯专栏INFORMATION COLUMN

字节跳动旗下 ArcoDesign 开源啦

jayce / 2821人阅读

摘要:脚手架工具封装了物料操作命令,帮助用户快速创建物料项目并将其发布至物料平台。非常重视每一位开发者和用户的意见,希望大家踊跃反馈,积极共建。

ArcoDesign 提供的能力

完善的基础组件

基于 ArcoDesign 设计规范,Arco 提供了 67 个基础组件,这些基础组件足以支撑绝大多数的业务需求。同时,Arco 在这些基础组件的设计上,也开放了细粒度的配置,方便后续拓展。

开箱即用的体验

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

在中后台项目中,页面设计模式较为单一,Arco 提取了典型的业务场景,并将其抽离为页面模板,使用户通过简单的复制和修改就能快速搭建页面。

极致的个性化定制能力

从底层组件到上层平台,Arco 提供了极致的定制能力。

底层组件

底层组件上,Arco 提供了细致的样式定制默认行为定制

样式方面,Arco 从设计之初就通过细致的拆分,将影响组件视觉的样式都抽离为上千个独立的 token 变量,并基于这些变量完成了从全局样式组件样式的全面配置。

在底层能力的加持下,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+ 项目实现高效高质的产品搭建流程。是真正从实践中孵化而来,也广泛服务于内部业务的产品。

ByteEffects

使用 Arco mobile 的定制组件与开发框架,BytedEffects 开发了对智能图像创作能力进行展示的移动端应用,方便为客户提供沉浸式的功能预演和能力试用。

未来展望

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

反馈和共建

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

官网:arco.design

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

Github Vue 组件库:github.com/arco-design…

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/122749.html

相关文章

  • Shotcut 一款跨平台支持的免费开源视频剪辑软件(支持简体中文)

    摘要:老蒋有在这五款免费视频剪辑软件推荐无需专业技能也会剪辑文章中有整理到大部分视频自媒体平台有为创作者开发的免费视频编辑软件,不过大部分都是有支持手机移动端的。随着网络当前的火热领域肯定属于视频自媒体,我们很多原本可能安逸一方的技术从业者、教育行业,甚至我们很多全职妈妈、上班族、甚至学生也都有加入到视频创作领域。目前视频创作平台除了来自字节跳动的抖音、头条,腾讯旗下的视频号,百度旗下的百家号,阿...

    jsbintask 评论0 收藏0
  • 字节跳动开源微服务中间件CloudWeGo

    摘要:近日,字节跳动正式宣布开源,这是一套以语言为核心专注于微服务通信与治理的项目集合。目前,有四个项目集合是字节跳动研发的下一代高性能强可扩展的框架。据悉,字节跳动基础架构团队将会在内外部维护一套代码,统一迭代演进。 .markdown-body{color:#595959;font-size:15px;font-family:-apple-system,system-ui,Blink...

    Yuqi 评论0 收藏0
  • 性能优化全新思路!实践腾讯、字节、阿里、百度、网易等互联网公司项目实战+案例分析(附PDF源码)

    摘要:不努力不奋斗,可能就会在基层一辈子止步不前。不过,只一句,如果你还在做这一行,还是一名程序猿媛,想走上坡路的你,也许我这到手的十几家一线互联网公司性能优化项目实战可能会对你有所帮助。 ...

    ytwman 评论0 收藏0
  • 字节跳动Web Infra发起 Modern.js 开源项目,打造现代 Web 工程体系

    摘要:月日举办的稀土开发者大会上,字节跳动正式发起开源项目,希望推动现代开发范式的普及,发展完整的现代工程体系,突破应用开发效率的瓶颈。字节跳动一直在字节内部支持现代开发的实践,发展了完整的字节前端研发体系,项目就是来自其中的现代工程体系。 @charset UTF-8;.markdown-body{word-break:break-word;font-weight:400;line-h...

    taoszu 评论0 收藏0
  • ❤️字节跳动学姐熬了一个月才完成这份内部软件测试开发手册,在GitHub标星27k,开源下载

    本文是为了帮大家快速回顾了测试中知识点,这套面试手册整整花了一个月的时间整理出来,上传到Git上目前star数达到了27K+。内容涵盖了诸多技术栈的面试题和答案,相信可以帮助大家在最短的时间内用作面试复习,能达到事半功倍效果。 同时用XMind画了一张导图记录软件测试的学习笔记,有需要的朋友,帮作者关注点赞收藏三连一下,即可无偿下载一份! 测试开发手册完整版PDF☞☞☞ 软件测试核心知识点目录内容...

    tinna 评论0 收藏0

发表评论

0条评论

jayce

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<