Development

10 Best Design Systems in 2020

Published on Aug 9, 2020
10 Best Design Systems in 2020

A great design system helps you design and build digital products a lot faster because they give you access to icons, typography rules, color palettes, and other design rules to follow during app or web development.

However, that’s not the only reason to use design systems. According to a survey done by Sparkbox in 2019, design systems are used for several reasons such as maintaining design consistency across various web properties, needing a more efficient way to work, and more.

There is no shortage of design systems that you can use and in this post, we’ve rounded up the best design systems for 2020 projects.

1. Material

Material is a comprehensive design system developed by Google and released in 2014. This design system includes a color palette picker, design best practices, typography rules and guidelines, and more. You can use it to develop both mobile apps and various web projects. Material has 10.6k stars on GitHub.

2. Fluent

The Fluent design system is an open design language developed by Microsoft. This design system is a great choice if you want the end project to have a clean and simple, yet cohesive design. The system itself revolves around five basic principles: light, depth, motion, material, and scale. It was designed to be used across all platforms and devices. FluentUI alone has 8.8k stars on GitHub.

3. Shopify Polaris

The main purpose behind Shopify Polaris design system was to provide a unified and beautiful design guidelines for store designs. This design system lays out the rules for designing every part of a Shopify store’s interface, including content, components, design, and pattern guidelines. Polaris has 3.4k stars on GitHub.

4. Liquid

The Liquid design system was developed to make creating UI/UX designs easier and faster as well as more enjoyable. Inside the design system, you’ll find a plethora of colors, illustrations, typography, grid, and components. The design system works with Figma and Sketch and has 1,500 UI assets, 42 elements, 18 components, 14 modules, and 9 templates.

5. Lightning Design System

The Lightning Design System focuses on application logic and user experience. The system was developed by Salesforce and includes thorough guidelines and examples covering design, accessibility, icons, and more. It also comes with a number of useful components for a unified design. Lightning Design System has 2.9k stars on GitHub.

6. Clarity

Clarity is another comprehensive design system that was released in 2016. It contains UX guidelines as well as an HTML/CSS framework, and Angular and web components. You’ll find thorough documentation along with rules for color, typography, navigation, buttons, checkboxes, alerts, and more. Clarity has 5.9k stars on GitHub.

7. Carbon

Carbon is an open-source design system developed by IBM and it uses IBM Design Language as its foundation. The design system has visual, user interface, and code guidelines along with numerous elements such as forms, buttons, icons, and more to help you create a modern UX design. Carbon has 3.2k stars on GitHub.

8. Ant Design

The Ant Design system touts itself as the design system for enterprise-level products. This system is based on the following values: meaning, growth, certainty, and natural user cognition and behaviour. The system contains a number of useful features such as React components, internationalization support, color, typography, and layout rules, and more. It was built with internal applications in mind. Ant Design has 61.k stars on GitHub.

9. Spectrum

Developed by Adobe, Spectrum has UI Kits, typography rules, icons, and even CSS that you can download and use in your projects for a cohesive and modern look and feel. You’ll also find data visualization, navigation, and various status components. Spectrum has 634 stars on GitHub.

10. Eva

The Eva design system is the youngest of the bunch but has plenty of components to get you started. The design system works with Sketch and Figma and comes with layer styles, typography rules, icons, symbols, and more. It’s a great choice for both web and mobile projects. Eva has more than 10k stars on GitHub between their web and mobile components.

Final Thoughts

With these ten design systems, you’ll have plenty of resources and inspiration to guide the design on your next project. Which design system is your favorite?


Continue reading

Get great content updates from our team to your inbox.

No spam — notifications only about new products, updates and freebies.

Follow us on Dribbble, Twitter, Facebook, and Instagram.