The Top Design System Tools from Our 2019 Survey and Why “Top” Might Be an Overstatement

08-26-19 Julie Young

We asked about the top design system tools on our 2019 Design Systems Survey. Read comparisons of Storybook, InVision DSM, and Pattern Lab.

In our 2019 Design Systems Survey, we asked respondents to report what design system tools they’ve used. Including “other” responses, the 108 respondents mentioned using 40 different tools. According to our survey, the top three design system tools were Storybook (34%), InVision Design System Manager (32%), and Pattern Lab (23%).

In this article, we’ll discuss the differences between our respondents’ top three design system tools, what makes a favorite design system tool, and why there’s no true market leader among design system tools.

Comparing Storybook, InVision DSM, and Pattern Lab

We received responses about many tools, and I’m sure many of the Design Systems Survey readers only recognize a few of these, if any. For that reason, here’s a high-level description of each of the top three design system tools.

Storybook provides the ability to develop UI components in isolation (not in the context of a page or application) for JavaScript frameworks, including React, Vue, Angular, and Ember. Code is organized and documented in Storybook for reuse and efficiency. It also includes workflows to support visual regression and unit testing. In our survey, more than twice as many developers had used Storybook than had used Invision DSM. It's free and open source. Invision DSM bills itself as the “source of truth” for designers and developers by managing the brand, UI component design, and usage guidelines all in one place. DSM Enterprise also stores design assets with version control. Developers can programmatically pull colors, styles, and icons from DSM into their work. More developer-centric features appear to be on the horizon. Our survey found that InVision DSM was used more often by designer and UX roles than by developers. Basic DSM comes free with InVision. A typical InVision subscription for 5 users with unlimited prototypes is $99/month. DSM Enterprise pricing is quoted per customer. Pattern Lab is a static site generator that brings together UI components and documentation. It is based on the principles of atomic design, where a single, small element cascades into many components for reuse and extensibility. It is language- and framework-agnostic. In our survey, roughly the same percentage of developers and design/ux roles had used Pattern Lab. Pattern Lab is free and open source.
A comparison of Storybook, Invision DSM, and Pattern Lab

What Makes a Favorite Design System Tool?

In our survey, we also asked the open-ended question, “What’s your favorite design system tool and why?” We received 83 responses about all design system tools, not just the top three. The consensus is as follows, in no particular order:

  • The tool is easy to use.
  • It has a visual showcase for components that everyone on the team can reference.
  • It enables team collaboration with comments/discussions, multi-authorship, and version control.
  • It doesn’t hinder (and maybe even improves) frontend performance.

You can download and read all the responses—this was Question 5 on our survey.

View Survey Responses

There is Currently No Leading Design System Tool

As mentioned earlier, 40 different design system tools had been used by 108 respondents—and these were just the tools that they remembered as they were filling out the survey. The median usage was 6 respondents per tool, ranging from 1 respondent per tool (9 different tools) to 98 users per tool (Storybook).

Why are there so many design system tools, and why are folks using more than one tool to get the job done? Our survey doesn’t have the answers to these questions. But I’ll leave you with our thoughts based on our experience at Sparkbox and anecdotes from the survey’s written responses:

  • Design System Scale: Some organizations’ design systems are massively distributed multi-site behemoths, while others are using a design system to support smaller-scale endeavors. Big design systems inherently require different features than small design systems—thus, different tools.
  • Different tools for different roles: As seen above with Storybook, InVision DSM, and Pattern Lab, tools are made for different audiences. A designer may work in design tools like DSM, UXPin, or Sketch, while developers may work in tools like Storybook or Fractal that manage the code or integrate the design system into the build pipeline. There’s no one-tool-fits-all option across disciplines yet.
  • An evolving tool landscape: Our survey captured responses from in-house and agency respondents, and it asked which design system tools they’ve used, not what design system tool their organization uses or is currently using. So previous work history and side projects come into play for all responses. Furthermore, agencies and consultants may switch tools based on the client’s objectives. And organizations may be switching tools or adding more tools as new features are released or as their design system grows.

What’s your theory? Tell us what you think about design system tools on Twitter.