Top 10 best Design Systems for 2020

Every year, more and more tools and processes appear to optimize the work of designers and developers. Design systems have become the new black as a solution to the problem in this sphere. Helping build digital products much faster, design systems have gained high popularity recently. When using them, you have access not only to icons, typography, in-depth effects, color palettes but for organized rules that you can employ during mobile and web development.

Packed with numerous tools and components, they also relieve you from creating design fully on your own. Just customize it to your brand following detailed guidelines and obtain a ready for use solution with such benefits as saved time, reduced costs, simplified project implementation process are those benefits that you will get.

Last year, Sparkbox conducted a survey in which respondents were asked about situations when they suggest using a design language. Below, you can see challenges that can be solved with it together with the percentage of selected answers.

Image source: 2019 Design Systems Survey by Sparkbox

Let’s review 10 design systems that will dominate in 2020. Take a look at their functionality, peculiarities, and achievements.

1. Google Material Design

Material Design is perhaps the most popular design system that comprises instructions, tools, and components for building beautiful mobile (iOS, Android) and web solutions. Released by Google in 2014, it supports the best UI/UX practices and helps development teams create modern products faster and easier.

The first version of Material Design had one drawback that was important for brands that want to adapt it to their style. All Material Design applications were extremely similar. So in 2018 Google launches Material Design 2.0. This version was an answer to the above criticism. With multiple styles, layouts, depth effects, cool animations, they are empowered to make truly unique branding themes.

We know this Design System very well as all of the apps that we use in our day-to-day life are made with Material Design: YouTube, Gmail, Google Drive, Docs, Slides, etc.

2. Eva Design System by Akveo

Eva Design System was introduced in 2019. The main advantage of it is a powerful flexibility in terms of brand adaptation. Invented by the Akveo team, Eva is based on Atomic Design Principles and it has two as for today 2 implementations — UI Kitten for mobile (React Native UI Library) and Nebular (Angular UI Library) for the web. Both solutions are open-source and available for free.

Eva includes 258 layer styles, about 400 text styles, over 480 icons, 800+ symbols, it enables to make branded mobile and web products providing high usability and engaging user experience. What’s important, Eva is available for Sketch and Figma and has Light and Dark modes.

By ensuring consistency across all platforms and removing repetitive work, it allows companies to significantly automate software development. As a consequence, you either get a high-quality app/website or save time and effort.

Despite its youth, Eva is already proven to be a strong and reliable solution for digital products. For example, Eva is used in the heart of UI Bakery, a low-code platform for prototyping and creating applications. It has also advanced Eva Colors deep learning algorithms inside, so it’s possible to generate a custom design system in seconds.

As of January 2020, Eva has 15,000 downloads on Gumroad and more than 5,700 stars on both UI Kitten and Nebular Github repositories.

3. Carbon from IBM

Launched by IBM, Carbon is a popular open-source design system that provides a set of rules, standards, and a tutorial for creating high-quality digital solutions. Following visual, user interface, and code guidelines, development teams are able to produce appealing designs with ease. The use of numerous elements (forms, buttons, icons, tables, tabs, sliders, etc.) will help you customize them to your brand and ensure an amazing UX.

Carbon also offers a wide range of other cool things that involve chart types, chart anatomy, basic charts, axes, labels, and more. Therefore, it perfectly suits for building software than needs to support data analytics and data visualization capabilities.

As of December 2019, Carbon Design System has 2,400 stars on GitHub.

4. Liquid

Liquid provides UX/UI experts and non-technical people with a set of tools, guidelines, and elements for making outstanding tech products. Being packed with numerous colors, illustrations, typography, grid, and components, enables to ensure consistent UI and high-quality look across all devices.

For today, Liquid includes over 1,500 UI assets, 42 elements, 18 components, 14 modules, and 9 templates. Using the design and development kits, you can faster build amazing digital solutions fully adapted to your brand.

5. Polaris from Shopify

Polaris is a software design system launched a few years ago by Shopify, a multinational e-commerce company. This solution allows UI/UX designers and engineers to create user-friendly applications for Shopify merchants. Providing teams with plenty of tools, styles, and elements, it helps them build engaging user experiences that work on every device, on every operating system, and in every language.

A great advantage of Polaris is that it offers very detailed guidelines on what, why and how to build excellent apps. On the product’s official website, you can find in-depth sections on content (voice and tone), typography, components, illustrations, etc.

As per January 2020, Polaris has 3,100 stars on Github

6. Spectrum by Adobe

Spectrum is an Adobe’s project that includes all the necessary tools, components, and guidelines for creating Adobe applications and services. Like other leading software design systems, it also enables development teams to ensure a natural look across all screens and platforms.

With Spectrum, you get access to various resources (UI kits, fonts, icons), components (data visualization elements, buttons, typography, navigation, etc.), patterns (cards, headers, tables), and other things to make truly great products.

Spectrum design language has a CSS implementation — Spectrum CSS — for either internal or third-party use on Adobe’s platforms. It is an open-source customizable solution that contains robust documentation and enables to produce fully interactive components.

By December 2019, Spectrum CSS has received about 500 stars on GitHub.

7. Fluent by Microsoft

Fluent Design System is an open design language that was invented in 2017 by Microsoft. Representing a rethinking of Microsoft Design Language 2, Fluent contains instructions for visuals, effects, and interactions employed within software created for all Windows 10-enabled devices and platforms. It is noteworthy, that the system is being improved according to real-world customer needs.

Based on the 5 main components — Light, Scale, Depth, Motion, and Material — Fluent allows building apps for web, Windows, iOS, and Android. Products made with it look natural and ensure consistency on every device and platform.

On January 2020 it has 6,600 stars on Github

8. Atlassian

Atlassian is a software design language that provides design principles, code elements, and a library of UI assets in Sketch. Using clear guidelines (e.g., on typography, motion), pre-built templates, and presentation kit, you can design products faster.

Atlassian comprises various components including icons, fonts, buttons, badges, banners, pagination, tabs, tags, tables, spinners, etc. that help build outstanding experiences. It is noteworthy that 83% of Fortune 500 features companies use Atlassian products and there are 150,000 Atlassian customers in more than 190 countries

On September 12, 2017, Atlassian became a second product of the day and the fifth of the week on ProductHunt. By now, it has received 2,301 upvotes.

9. Clarity

Clarity is an open-source design system first released in 2016, which is composed of UX guidelines, HTML/CSS framework, Angular and web components. It also provides detailed documentation, patterns (application layout, color palette, themes, typography, navigation, internationalization), and components (e.g., alerts, badges, buttons, checkboxes, cards, forms, grid, lists, labels, progress bars, tables). When creating your product, you can download Clarity’s icons instead of making your own.

The system is continuously being improved and updated. On May 23, 2019, Clarity 2.0 was released. A new version included many new features, bug fixes, and support for Angular 8. Vertical tabs, accordion component, stepper component, and support keyboard interactions were added.

At the moment, Clarity has over 5,400 stars on GitHub

10. Ant Design System

Being a design language, Ant provides UI/UX experts and developers with all the necessary resources (Sketch and Axure) to build great products. Committed to enhance user experiences and ensure consistency across different devices, the system was mainly invented for internal desktop applications.

Ant contains many cool features out-of-the-box features: a set of React components, predictable static types, internationalization support, theme customization, etc.

By now, Ant has received about 54,500 stars on GitHub.

Final thoughts

Providing many useful things, design systems enable businesses and individuals to automate software development, release apps more quickly, and launch branded apps and websites. In order to really perform and do all these things, the design system must include a certain list of features. According to 2019 Design Systems Survey, the most important features are:

1. Color palette
2. Typography
3. Form components
4. Navigation components
5. CSS code
6. HTML code
7. Usage guidelines

And what features do you believe to be the most important?

If you have some questions about this topic or need a consultation, feel free to drop us a message. With extensive experience in UI/UX design, we’ll be happy to help you!