About the Wix Design System
The Wix Design System is a comprehensive toolkit for developers and designers to craft beautiful and intuitive product experiences.
You can use the Wix Design System to create dashboard pages and panels for Wix applications. Dashboard pages are for site admins to manage data and business operations, while panels allow them to control the design and behavior of your app.
The Wix Design System offers:
- A React library with core UI components.
- A React library with advanced components for common functionalities.
- A set of design patterns implementing best practices for Wix app development.
- A Figma kit with components, icons, and ready-to-use page templates.
- Detailed component documentation, including demos and props reference.
- An interactive playground for hands-on exploration.
- Wix color palettes.
- Wix MadeFor font.
- Over 400 icons.
Developers
For developers, the Wix Design System includes a React library of core reusable components. Each component is documented in Storybook, accompanied by a demo and playground for exploration. This library streamlines the rapid prototyping and development of Wix-styled applications. Get started developing.
Patterns
The Wix Design System also includes an advanced component library called Patterns. These advanced components offer a higher level of sophistication and functionality compared to the core components, and are specifically designed to meet typical use cases in both app design and functionality. Components in the Patterns library provide developers with ready-to-use solutions for common design patterns, enhancing the efficiency and effectiveness of developing Wix-styled applications.
Use Patterns together with Wix Design System's core components to develop a robust Wix app. Start by looking for components in Patterns to quickly and easily implement common functionalities with a Wix style and layout. Components in the Patterns library are documented in Storybook, accompanied by a demo and playground for exploration. Get started developing with Patterns.
Designers
For designers, the Wix Design System includes a Figma kit to integrate Wix design assets into their design workflow. This kit fosters enhanced collaboration and iteration throughout the design process, simplifies cooperation with developers, and ensures adherence to Wix's visual standards. Get started designing.