ArcoDesign is an enterprise-level design system jointly launched by Bytedance GIP UED team and architecture front end team. After nearly 3 years of polishing, we open-source the ArcoDesign design system through a lot of business precipitation and validation within Byte. It aims to make the community more heard, and create more efficient and beautiful “best practices” for more small and medium enterprises and individual designers and developers.
ArcoDesign has a system design specification and resources that provide atomic components covering React, Vue, and Mobile. Based on the rich atomic components, Arco provides not only style configuration platform, material platform custom chemical tools, but also icon platform, brand library, Arco Pro best practices resource platform, aiming to help designers and developers free hands, improve work efficiency, high quality to create business specifications of the middle and background applications.
Just like the name “Arco”, following the concepts of [Agreement/consistency], [Rhythm/Rhythm], [Clear/Clear] and [Open/Open], Arco hopes to help more users improve work efficiency and happiness, and create better products.
Capabilities provided by ArcoDesign
Complete base components
Based on the ArcoDesign specification, Arco provides 67 basic components that are sufficient to support most business requirements. At the same time, Arco has also opened up fine-grained configurations of these basic components for further expansion.
React and Vue synchronization support
Based on the ArcoDesign specification, Arco provides React and Vue UI component libraries. The Vue component library is developed based on Vue 3.0, which provides future-oriented development capabilities and interconnects with the underlying capabilities of the React component library, making perfect use of various capabilities of the Arco ecosystem.
Dark mode of science
Arco supports one click to open the Dark mode, seamless switching, smooth experience.
Dark mode allows users to focus more on their tasks while avoiding the visual stimulation of staring at a high light source in a dark environment.
In the underlying design, Arco combines the advantages of Less and CSS variables. The Less variable is responsible for the color calculation at compile time, the light/dark gradient palette is calculated based on the primary color, and the CSS variable is responsible for the final reference of the page rendering, thus achieving a seamless switch between light/dark color styles. Users can not only enjoy CSS variables to bring the silk-slip switching experience, but also enjoy Less variables to configure a single main color can generate a whole set of color board convenient, elegant and easy to use.
Out of the box experience
To help users build projects from zero to one more quickly, Arco provides best practices Arco Pro, which organizes common page scenarios to help users quickly initialize projects and use page templates.
In mid-background projects, where the page design pattern is relatively simple, Arco extracted typical business scenarios and separated them into page templates, enabling users to quickly build pages by simple copying and modification.
Extreme personalized customization ability
Arco provides the ultimate in customization from the underlying components to the upper platform.
Underlying components
On the underlying components, Arco provides detailed style customization and default behavior customization.
From the beginning of design, Arco separated all the styles that affected the visual of components into thousands of independent token variables through careful separation, and based on these variables, completed the overall configuration from global styles to component styles.
In terms of default behavior, Arco supports global configuration of the default behavior of 60+ components for great flexibility, reduced maintenance costs and improved development experience. Users can customize the default interactions of each component by maintaining a global configuration.
The upper platform
Arco provides a “style configuration platform” for visual style editing. Based on the style configuration platform’s wySIWYG component configuration capabilities, users can make fine-grained adjustments to global and component styles, achieving “* Arco Design to Any Design”. After the configuration is completed, users can publish the theme to the theme market with one click, providing excellent theme style to the community. In the theme market, users can browse all topics and choose freely.
An immersive document experience
On Arco component documents, users can quickly apply their personal themes to Arco component documents for an immersive document experience by one-click installation style configuration of all themes on the platform.
Secondary development and reuse capabilities
Thanks to the flexible API design of Arco components and the customized component solutions provided by the materials platform, users can quickly develop customized components based on Arco to meet their specific needs. Customized components will enable better reuse of business code, promote team collaboration, improve development efficiency, and share rich material resources with the community.
The whole process of the complete ecosystem
Arco hopes to improve the working experience of the whole process of design and development through a perfect ecosystem.
Ecological platform
- Style configuration platform: Helps users better manage different styles of theme configuration by assisting users to build personalized themes, and improves the efficiency of design and development collaboration.
- Material platform: Quickly develop and share customized business components based on Arco scaffolding tools, realize the decoupling and reuse of business modules, improve development efficiency and promote team collaboration.
- IconBox: provides a standardized and unified service icon library of high quality.
- Arco Pro: Help users quickly build projects from 0 to 1, support users to freely choose common page templates.
- Color Configuration tool: Helps designers and developers debug colors online and explore Arco color algorithms.
The development tools
- Webpack plugin: Helps developers easily use themes in Webpack builds, load on demand, and replace built-in ICONS for components.
- Arco CLI Scaffolding tool: Encapsulates materials operation commands to help users quickly create materials items and publish them to the Arco Materials platform.
- VSCode plug-in: help users to view documents in the editor, visual manipulation of materials, etc.
- Figma plugin: A collection of common design tools to make Arco’s capabilities easier to use.
Design and develop better collaboration
The primary user group of the design system is the designer. Arco has been exploring how to improve the efficiency of designers based on Arco’s surrounding ecology.
- To make it easier for designers to locate resources, Arco provides the Figma plugin for resource location, which allows designers to easily find resource documents and files for Arco components with one click.
- To improve the efficiency of color matching for designers, Arco offers the Figma plugin for color configuration, which intelligently generates gradient color splatters in bright and dark modes based on the specified color.
- In order to improve the efficiency of creating ICONS, Arco provides a one-click drag and drop function to use the Arco icon Figma plug-in, online color, line width, size adjustment, flexible configuration, easy to use.
- In order to reduce the cost for designers to produce Figma variants and improve the efficiency of designers to produce designs that conform to Design system specifications, Arco explored Code to Design and provided Figma plug-in functions with component dimensions. Designers can configure component attributes in the plug-in, Automatically generate corresponding design elements. At the same time through the style configuration platform, so that the design can easily achieve “one key skin”.
- To help designers manage their ICONS, Arco has launched the Iconbox platform, which allows designers to efficiently manage their ICONS. In addition, the Figma plug-in function of icon uploading is provided, which supports designers to directly select ICONS in Figma and upload them to the icon platform by one click.
A good case
Arco is committed to exploring better design systems to solve the experience problems caused by complex business and redundant communication, completely freeing the hands of developers and designers. After nearly three years of iteration and polishing, in Byte, we have served 4000+ projects to achieve efficient and high-quality product building process. Is really incubated from practice, but also widely serve internal business products.
The volcano engine
Through Arco component library, style configuration platform and icon platform, the intelligent generation of personalized theme packages suitable for a variety of business needs, help Volcano engine to improve the experience consistency of each product line, so that it can better provide systematic full-link solution services for enterprises. More than 60% of the volcano engine console is currently built using the Arco component library.
The headline number
Using Arco’s flexible and rich component resources, Today Toutiao quickly builds a “we media” platform toutiao, providing creators with multi-scene practical functions such as creation and release, data analysis and revenue analysis.
ByteEffects
Using Arco Mobile’s custom components and development framework, Byte Ects has developed mobile applications that showcase the capabilities of intelligent image creation, providing customers with immersive preview features and capability trials.
The volcano translation
Using Arco’s own ICONS and brand resources, Volcano completed the design of the landing page of the official website in a short period of time. Diverse visual content helps to focus users’ attention, and the platform provides multi-language translation services.
Starry Starry
Based on the strong interaction ability of Arco components, it helps starry Night intelligent website building platform to achieve more flexible and intelligent website building ability, and improves the efficiency in various scenes such as activity building, middle background building and vertical building.
future
ArcoDesign has also made more explorations inside ByteDance, such as a visual platform, D2C design drawing to code tool, C2D code to design drawing tool, brand library and so on. The above platform tools will meet with you in the future, hope you pay more attention to ~
Feedback and Co-construction
ArcoDesign is now officially open, welcome to use and experience. Arco attaches great importance to the opinions of every developer and user, and we hope that you can actively feedback and build the project.
Liverpoolfc.tv: arco. The design
Github React Component library: github.com/arco-design…
Github Vue component library: github.com/arco-design…