2020 web design system data

A report on the Google State of Design Systems survey

Design Systems define the aspect and interactive dynamics of most mobile apps and web apps that are in use today. Companies use personalised solutions or rely on the standards set by the big web organisations. What is the situation with these project models according to the 2020 data?

In December 2020 the material.io site published an article by Abla Hamilton, Material Design researcher at Google, on the state of design systems on the international scene. Hamilton laid out the data collected in the State of Design System Survey, a yearly survey focused on the evolution of these project models, on professionals who use them and the processes they are involved in.

76% of respondents can be included in the category that Nikolas Klein of Figma calls creators, i.e., those who create and document design patterns for use by other professionals who have to apply them to projects as design guidelines used by developers to translate graphic components designed by UI designers into web code.

In this article we will set out a summary of the most important data described by Hamilton to understand in a concise manner the resources and technologies of the companies who deal with web design software.

The elements of a Design System

Among the many resources a Design System mainly includes an icon library (84%), a UI kit (83%), a Style Guide (76%) and a developer component library (74%).

The icons and the Style Guide define the visual identity of the Design System to apply to projects. The Ul kits allow UI designers to design the interfaces using graphic components with colors, fonts and icons in line with the set guidelines.
The component library is the code translation of what is defined by the designers and allows developers to transpose the Design System on functioning software.

Asset design system percentage chart

The top 3 most common resources in a Design System.
The most commonly used Design Systems

Starting back in 2019 the top three most commonly used Design Systems were Google’s Material Design, Apple’s Human Interface and Bootstrap.

If we extend our analysis to include the component libraries, in 2019 58% of respondents put Google Material Design in first place, followed by in-house resources, those designed independently by companies.

In 2020 80% of companies had created their own in-house design system. The reasons behind this choice are better company brand adherence (27%), the need to deal with specific use cases (22%) and technical limitations on the framework or stack technologies adopted by developers (14%).

Observing the answers more in depth, Hamilton concludes that companies rely on the Design Systems of the big tech companies such as Google and Apple as a reference and for inspiration, but they then create their own in-house operative resources to better meet the needs of their projects.

percentage charts of the most widespread design systems

The top three most commonly used design system in 2019.

By the way, if you don’t know what it is, read our article what is Google Material Design

The most commonly used software for design process management

In 2019 Design System management in a broad sense had Sketch in first place as software for asset design and organisation.
In 2020 the situation changed: Figma (25%) overtook Sketch (21%), while Storybook (17%) came in third. However, larger companies use Sketch more often.

Among the tools available for digital interface design (UI kits) Figma is the most commonly used software (23%) followed by Sketch (19%) and Illustrator in third place (11%). In particular, Figma is preferred by companies with less than 500 employees while Sketch is often found in multinationals with more than 10000 people.

The asset and document handover from design to development is also a crucial moment for every project. Also in this field Figma is in the lead (26%) followed by InVision (18%) and Zeplin (13%). In this case InVision is the most frequent choice among large companies.

most common software percentage chart

An overview of the technological stack adopted by the majority of companies that deal with software design.
Design System support and maintenance

Every Design System evolves and companies regularly update their resources to deal with new project needs. Among the most common activities to maintain an updated Design System there are individual and recurring design reviews (16%), onboarding for how to use the organization’s design system (14%) and the ability to file bugs against the system (13%).

support percentage chart

Some of the most widespread activities to manage the maintenance of company Design Systems.
Design System growth trends

25% of companies analysed only adopted a Design System in the last two years and it seems that regional organisations (up to 5000 employees) are more prolific in the design of these resources compared to multinationals.

At the same time there is a growing number of small companies (50-100 employees) that are adopting a Design System to improve the general quality of their products and services.

growth trend percentage chart

Many Design Systems have only recently been adopted and the trend seems to be towards an increase in companies looking into this field.
The Dreamonkey Design System

As we looked at the data we were pleased to see that Dreamonkey is in line with the international trends in our sector. For our mobile apps and web apps we have chosen Google Material Design, adapting it to the needs of our clients. Our stack includes Sketch and Zeplin which help us manage an extended in-house UI kit, along with an icon library.

If you are looking for someone who can help improve your old Design System or if you would like to update by adopting a new one, Dreamonkey is here for you, contact us.