What Is a Design System? The Definitive Guide

Whether you’re a designer, product manager, developer, or just curious about the apps you use on a daily basis, you’ve probably come across design systems. Salesforce’s Lightning, IBM’s Carbon, and many more have proved over the past decade that design systems are here to stay and a core part of a product’s evolution. But depending on who you ask, design systems can have very different interpretations.

We’re here to take you back a step and go through what exactly is a design system, why you definitely need it, and how you can go about creating your own.

What is a design system?

A design system is the source of truth, governing principles, and componentized delivery of design artifacts that repeatedly solves commonly recurring problems across an organization.

This might be a mouthful of a definition, but there’s a reason for that. If you go around asking people “what exactly is a design system?” you’ll get different answers from everyone. To prove a point, I asked around our own team of dedicated design system professionals, and here are a couple of their definitions:

“Repeatable solutions for commonly recurring problems”

“A collection of design artifacts, and connection between design and developers”

“Componentized delivery of designs, not just a style guide”

Even if you search on Google, you’ll find equally different answers. But the thing is, none of them are wrong, design systems are all of these definitions combined. The answers differ because it depends largely on who you’re asking. To a designer, a design system acts as a source of truth where they can set guidelines for how to use their designs. To a product manager, it's a way to ensure consistency across teams and eventually to the final product. And to a developer, it’s a shared language between them and designers.

Benefits of design systems

With design systems being a cross-team function and product, there are some team-specific benefits but most benefit the organization as a whole. We’ll be going into more detail in another article, but here are the main benefits of having a design system.

• Consistency: Design systems include repeatable components and guidelines that help make sure anyone from marketing, design, product, or developers implementing are all producing consistent high-quality results.
• Scalability: By centralizing all your designs and reusable components, you can grow your product without needing to grow your team as much. Instead of needing to update each component separately, you can make updates to core components, color profiles, or text styles and have them reflect on your entire product.
• Productivity: With the help of a design system the process of designing, approving, and then implementing is a lot simpler for everyone involved. Instead of having a developer chase a designer for the latest design and send assets manually, all of this will be available in a centralized hub. The hand-off process is made simple and efficient.

Now that we know what design systems are and why you need them, let's go through what you should include in your design system.

What should you include in a design system?

As we’ve established, design systems vary depending on a specific organization’s needs. But the more your product and company grow the more your design system will as well. The team behind Material surveyed people in the industry to ask them what they included in their design systems. The results showed that there is very much a standard to what’s included in a design system.

While some aspects of a design system are more common than others, they all complete each other for a complete design system. You should include the following in your design system:

• Design tokens
• Design components
• Assets
• Design guidelines or principles
• Documentation
• Code library

Realistically though, a smaller team or a team creating their design system from scratch probably won’t have the resources to add all of this instantly. Like any other product there are maturity stages to a design system, and based on what stage you’re at your priorities are set.

What do you need to create a design system?

To create your own design system you can either build a solution from scratch, use a mix of different tools for different aspects, or use a dedicated design system platform like Supernova.

Each has its own pros and cons, but an all-in-one solution helps you interconnect all these elements together to create a true design system. And not needing to maintain the solutions means that you can scale your design system with no worries. Check out our guide on how to create a Figma design system to learn more.

‍