What Are Design Systems?

Fundamentally, design systems are libraries of design tokens, styles, components and assets that can be reused throughout a project or even multiple projects. These design system elements are often presented with use cases and code snippets, forming clear documentation that shows designers and developers how to use them in a project. Design systems can even contain documentation that explains the processes for maintaining and contributing to the design systems themselves, in addition to general design guidelines.

Essentially, design systems are centralized hubs to help product teams create purposeful, consistent, effective digital products.

What Do Design Systems Contain?

Considering the fact that design systems evolved from style guides, it should come as no surprise that 98% of them include color styles, text styles and other types of styles (according to Sparkbox’s design system survey, released in 2022).

Similarly, 95% of design systems include components thanks to the popularity of UI kits once upon a time, which often included style guides or were built upon them.

Since it’s difficult to reuse styles and components without knowing when and how to do so, 95% of design systems include documentation. The idea of documenting styles and components was first conceptualized with the introduction of pattern libraries, which are considered to be the predecessor to design systems, not only showing off the design elements but atomically detailing their meaning, purpose, and implementation too.

So you’re probably wondering if Bootstrap was the original design system/pattern library? Technically no, because Bootstrap doesn’t cater to any user needs but rather hundreds of abstract scenarios. That being said, Bootstrap could have inspired the concept of design systems. Bootstrap and other front-end frameworks are products in themselves that likely would have become the foundation of most websites had the concept of design systems not come about (thankfully).

75% of design systems include assets such as logos and favicons, 71% specify grid systems, 69% include design tokens and 65% include production-ready code. It’s fair to say that as design systems mature even more, these are the aspects that will become more popular over time. Interestingly, these are the aspects that are likely to make developers more comfortable using design systems, which suggests that the gap between design and development is narrowing.

57% of design systems include accessibility guidelines, 45% include content guidelines, 42% include experience design principles, 41% include release information, 34% include code playgrounds for toggling component properties and 19% include animation guidelines. The guidelines are perhaps not specific enough for design systems, so their inclusion may come down to personal preference and therefore may not become more popular over time.

Who Uses Design Systems?

As the name suggests, designers use design systems the most, making up 58% of users. Since developers only use design systems to document code, they account for a smaller 19% of users. In addition, leadership management makes up 15% of users (indicating strong buy-in for design systems at the leadership level), product management makes up 5% (they usually have a small reviewer role) and the remaining 3% is a combination of various other roles.

85% of design system users are creating, reviewing and maintaining them, whereas the other 15% are only subscribed to them (these are likely the same 15% that are leadership management).

Which Processes Are Involved in Design System Management?

Although design systems are maturing in terms of what they contain, the processes for creating and maintaining them aren’t, so this might be what the product design industry will focus on improving next.

Only 61% of design system users say that there’s a process for contributing to their design system, a statistic that could certainly be better. Similar statistics are even worse, with only 44% having a process for deciding which features to add, 44% having a roadmap of upcoming features, 37% offering training and support to contributors, 30% having an onboarding process and 16% using analytics to gauge satisfaction levels and usage.

Is this lack of governance and support a big deal? To find out, we first need to know how effective design systems actually are.

Are Design Systems Effective?

65% of design system users believe that their design system is effective and 23% neither agree nor disagree. This means that only 12% of users believe that their design system is ineffective, suggesting that the general lack of governance and support isn’t as important as we might think. This could be because most users find design systems easy to use, or as an industry we’ve started to master some design system best practices, or because design system tools are becoming more advanced. Most likely, it’s a combination of all three.

The minority that believe their design system is ineffective cite a number of reasons why. Some, but not all, are related to governance and support. 39% said that their design system is poorly documented, 35% said it’s unclear what’s old/broken/coming soon (which is worse than having no design system at all), 26% said that it doesn’t have what they need, 26% said that it’s organized poorly and 19% said that it’s out of date. So far, inadequacy seems to be the biggest contributor to ineffective design systems.

19% said that they weren’t trained how to use it, 16% said that the code isn’t optimal (this is low on the list due to developers not using design systems that much), 13% said that they don’t know how to contribute to it and 13% said that it’s hard to get support. So while it’s clear that design systems need to be more inclusive, what’s actually preventing them from being effective is lack of communication and clear design system documentation.

What Might Design Systems Look Like in the Future?

Given the information we have, it’s not likely that design systems will (or need to) evolve much more than they have done already. Rather, product teams need to do better at creating and maintaining them. The upside is that the design community is extremely passionate about sharing their design system experiences and best practices. If you’d like to learn more about design systems from community leaders, check out Into Design Systems’ The Future of Design Systems Conference.

Sympli Design Systems are your single source of truth for all things design and code, so you can be sure that everything in your Sympli design system is final and up-to-date. Whether you’re using Figma, Sketch or Adobe XD, use the Sympli plugin to sync your text styles and color styles to your Sympli design system. After that, you can document your spacings, sizes, base font size and grid settings manually, as well as upload your fonts.

Your text styles, color styles, spacings and sizes will be automatically translated into design tokens in Android, iOS, CSS, Less, SCSS and Stylus format.