The State of Design Systems: 2020

The design systems we use constantly evolve. In this year’s State of Design Systems survey, we learned just how design systems mature, what is included in design systems, and how design systems are managed by people, tools and processes.

This is Material Design’s second year partnering with Clarity, a design systems conference, looking at the current state of design systems. Need to catch up? Read our summary of last year’s community-focused survey.

We updated the survey for 2020 in a few ways. First, the Clarity 2020 conference was shifted to an online format. With that change, we expected a potential shift in the respondents’ experience level using or creating design systems. We also added distribution channels via Material Design’s newsletter and social media accounts to broaden the reach to people who were not participating in this year’s conference.

We also plan to interpret the results in a series of two articles. In this article, we’ll look at an overview of the survey results with comparisons to last year’s survey. In early 2021, we’ll take a deep dive on the evolution of design systems.

With that in mind, on we go!

About the respondents

This year we heard from a high percentage of people who focus on design work (53%). We saw an increase from last year’s survey in people who focus on development, up from 11% to 16%, and people who do both design and development, from 16% to 22%.

We also saw a change in level of role experience in our respondents. Last year, a majority (57%) reported they have less than 4 years experience in their respective roles. This year the results were:

1. 37% have less than 4 years experience
2. 32% have 4-9 years experience
3. 31% have more than 9 years experience

Having a more even distribution gave us a wider breadth of experiences to learn from.

When considering the people involved in creating or using design systems, let’s use Nikolas Klein’s definitions from his article, The spectrum of maturity of design systems.1 He defines creators as “people that either invent new patterns or document existing patterns for others to use,” and consumers as “people using the patterns that were previously defined.”

Using these definitions, 76% of respondents could be identified as “creators,” either as part of their organization’s design system team or as members of the product team that contributed to a design system. So we have a high majority with hands-on experience who shared that experience via this survey.

What’s included in a design system?

In last year’s survey, we sought to understand which artifacts comprised an organization's design system. The most prevalent artifacts of a design system from last year included component libraries, style guides, design guidelines, and content guidelines.

This year, we expanded the question to include 9 options, adding things like design tokens, icon libraries, and accessibility guidelines.

The top three design system artifacts shifted to:

1. Icon library (84%)
2. UI Kit (83%)
3. Style Guide (75%)

Most respondents (74%) also reported their design system had a component code library.

Figure 1: Percentage of responses for a specific artifact included in their organization’s design system (Responses=465)

There are two key items to consider here. First, 75% of the survey respondents are focused on design work at either the product level or design system level.

Second, documenting an organization's visual language is one of the first steps in a design systems development. An organization’s visual language is expressed in the style guide and icons, and embedded into the UI Kit used during the product design phase. Having a high percentage of visual design artifacts, like the style guide and icons, aligns with the early design system evolution phase.

What drives in-house design systems creation?

In 2019, we asked, “What design systems or component libraries have you tried or used, if any?” In that survey, 58% of respondents selected “in-house design system” as one they had used or tried, ranking the option second behind Google’s Material Design.

In the 2020 survey, we wanted to understand more about the in-house design system, so we added these 2 new questions:

First, “has your company built its own design system in-house?” And, if yes, “why did your company choose to build a design system in-house instead of re-using an open source design system?”

A majority of respondents (80%!) reported that their company built its own design system in-house.

The top three stated reasons why companies created their in-house design system are:

1. Best represent their company’s brand (27%)
2. Address their product’s specific use cases (22%)
3. Framework or tech stack constraints (14%)

Figure 2: Percentage of responses providing reasons for creating in-house design systems (Responses=350)

Which design systems have you used?

In last year’s survey, when we asked, “what design systems have you used?” The top 3 design systems selected were: Google’s Material Design (28%), In-house built design system (21%) and Apple’s Human-Interface Guidelines (15%).

This year, when we asked, “what design systems have you used in the last 2 years,” we expanded the option list with additional design systems and toolkits, such as Bootstrap and Fluent Design. This helps us understand the range of design systems that respondents use and how these design systems are being used.

The top three design systems used by our respondents over the last 2 years are:

1. Google’s Material Design
2. Apple’s Human-Interface Guidelines (HIG)
3. Bootstrap

Figure 3: Percentage of choices of design system used or tried in past 2 years (Responses=1259)

In this year’s results, one of the new additions, Bootstrap, came in third on our list behind Google’s Material Design and Apple’s Human Interface Guidelines (HIG).

When we take into consideration that a high majority (80%) of reported that their organization has created their own in-house design system and review the different design systems used by just those respondents, we can conclude a majority are using these design systems as a reference to influence and inform their own in house design systems.

This further confirms a finding documented in last year’s survey that ”...companies increasingly want to develop their own design systems, but will use off-the shelf design systems as a reference and an influence.”2

What are the top tools used for designing digital products?

This year we added several questions around tooling for both design system creators and consumers. We asked respondents who focus on design work which tools they use to create designs.

The top 3 tools selected by our respondents are:

1. Figma (23%)
2. Sketch (19%)
3. Illustrator (11%)

Figure 4: Percentage of responses for selecting design tools used (Responses=497)

When we compare tool preference with company size (see Figure 5), Figma is the preference for companies with under 500 employees, while Sketch is the top choice at very large multinational corporations sized 10,000 employees and above.

Figure 5: Percentage of responses selecting a specific design tools used by the respondent’s company size (Responses=453)

What are the top tools used for design documentation and hand-off?

The handoff between design and engineering is a key moment of collaboration and communication during product design and development process.

In last year’s survey, this handoff was identified as a pain point that design leads hoped would be alleviated by using a design system. This year we added a new question and asked all respondents about tools used for hand-off of UX documentation to learn more about this design system touchpoint.

The top 3 tools selected by our respondents are:

1. Figma (26%)
2. InVision (18%)
3. Zeplin (13%)

Figure 6: Percentage of responses selecting hand-off UX documentation tools used (Responses=451)

When we compare tools for hand-off of UX documentation usage with company size, Figma is selected by almost all company sizes except for large companies, which use InVision more often.

Figure 7: Percentage of responses selecting a specific hand-off tools used by the respondent’s company size (Responses=451)

What are the top tools used for managing design systems?

As more organizations create design systems, there is a growing selection of tools to organize and manage design system artifacts and documentation.

In 2019, when we asked about tools to manage design systems, the top tool selected was Sketch. However, this year, the top spot was taken over by Figma (25%), followed by Sketch (21%), and Storybook (17%).

Figure 8: Percentage of responses selecting design system management tools used (Responses=452)

Again, when we review design system management tool usage by company size, Figma is selected by almost all companies except for large companies, which use Sketch more for this activity.

Figure 9: Percentage of responses selecting design management tools by the respondent’s company size (Responses=452)

How do you support a design system?

As design systems evolve within an organization, active support is needed to help them grow and succeed. This year’s survey added a question about specific activities teams perform to support their design system’s evolution.

The top support activities reported include:

1. Individual and recurring design reviews (16%)
2. Onboarding for how to use the organization’s design system (14%)
3. Ability to file bugs against the system (13%)

Figure 10: Percentage of responses selecting design system support activities used (Responses=371)

After the launch of a design system, the next step toward success is adoption of the design system by product teams. Providing onboarding to show how to use the design system and demonstrate the value of the system can help raise awareness and adoption.

Additionally, a stated goal for using a design system is maintaining product consistency. Having design system team members give feedback during product design reviews, or providing the product teams the capability to file bugs against the design system itself, provide mechanisms and opportunities to keep design systems and their associated products consistent and in-sync.

What is the current growth trend for design systems?

In addition to learning more about in-house design systems growth trend, we also learned how long respondents’ design systems had been in place at their organization. About 25% of respondents stated that their design system had been in place 1-2 years, making them fairly new.

Figure 11: Percentage of responses selecting number of years design system in place (Responses=533)

Consolidating the tenure data into two clusters (0 - 2 years; 2 - 4+ years) and analyzing with company size (see Figure 12), the data show that small to large regional companies (up to 5,000 employees) are creating more design systems than the larger multinational companies (with more 5,000 employees).

More mid-size companies (50 - 1500 employees) are increasingly using design systems to improve their product’s design and development team processes, product consistency, and quality.

Figure 12: Count of design systems by respondent’s company size (Responses=389)

What’s next?

Design systems are always evolving, whether at the team level, the organization level, or across the broader design systems community. As we apply these systems to our work, it is important to ask questions about how the systems are formed, how they are supported, and how they change. This way, teams that are new to the process can continue to learn from the community based on their challenges and successes. Stay tuned to the Material Design blog for a deeper dive in early 2021.

Thanks, and good night.

Cited

[1] Klein, Nikolas. “The spectrum of maturity of design systems” [Editorial post] Retrieved from https://www.designsystems.com/the-spectrum-of-maturity-for-design-systems/

[2] Yew, Jude (2019, Dec 23). “State of Design Systems 2019” [Editorial post] Retrieved from https://medium.com/google-design/state-of-design-systems-2019-ff5f26ada71