Design Systems

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

The goal of a design system is to create a consistent user experience across all applications, regardless of the platform or device. This consistency helps to build trust with users and makes it easier for them to navigate and interact with your products. Design systems also help to speed up the development process by providing a library of pre-built components that can be easily reused.

A good design system should include the following elements:

• Design principles: The core values and beliefs that guide the design of the system.
• Typography: The fonts and styles used in the system.
• Color palette: The colors used in the system, including primary, secondary, and accent colors.
• Spacing and layout: The spacing and layout guidelines used in the system.
• Components: The reusable components that make up the system, such as buttons, forms, and navigation bars.
• Guidelines: The rules and best practices for using the system, such as accessibility standards and responsive design guidelines.

Key of success

The experience shows that a design system can work only if

• it is maintained by both designers and developers.
• It is important to keep the design system up to date and make sure that all team members are using the latest version of the components.
• a team is in charge of maintaining the design system
• it is well documented and easy to use

Tools

• Storybook: a good to present
• Figma
• Mui: the library is very customizable and fits very well to create a design system

Useful links:

• https://www.nngroup.com/articles/design-systems-101/
• https://www.invisionapp.com/inside-design/guide-to-design-systems/