A design system is a collection of principles that govern the design of a brand's digital experience. It provides a set of guidelines for how your brand should look and feel across all channels and devices. When done correctly, using a design system can have many benefits for your business or organization—from improved communication and efficiency to more consistent branding across all digital channels.
In this article, we will explore what design systems are, the benefits of using them, and how you can start building your own.
- What is a Design System?
- Design System vs. Style Guide vs. Pattern Library
- Who Uses a Design System?
- 6 Benefits of Using a Design System
- Examples of a Design System
- How to Build a Design System
- Tips for Using Design Systems in Your Work
- Key Takeaways
What is a Design System?
A design system can be formally defined as a collection of reusable components guided by clear standards that can be assembled together to build any number of digital products.
It serves as a comprehensive guide for designing digital experiences within a company, and typically includes both design and code guidelines that help to ensure consistency and coherence in the design of a company's products.
A design system should be thought of as a living document that is constantly evolving as your company grows and changes. It should be flexible enough to accommodate the needs of different teams and projects, yet specific enough to provide clear direction. Consequently, mature design systems may also evolve to include sections on content, brand, typography, and accessibility.
Design System vs. Style Guide vs. Pattern Library
The term "design system" has become increasingly popular in recent years, but it is often used interchangeably with other terms such as "style guide", "pattern library", or even just "guidelines". While there is some overlap between these concepts, they each have their own distinct purpose and function within the design process.
In general, a design system is more comprehensive than a style guide or pattern library. It provides a higher-level overview of the design principles that should be followed when creating digital products. These principles can then be translated into specific design patterns and code snippets that can be reused in different contexts, from digital products to marketing or social media.
A style guide, on the other hand, is typically more focused on the visual design of a product. It includes detailed specifications for things like typography, color, and iconography. While style guides can be helpful in ensuring consistent branding across digital products, they are usually less effective at scaling design solutions across multiple teams and projects.
Pattern libraries and UI kits are similar to design systems in that they are comprised of a set of reusable components. However, pattern libraries are typically more focused on front-end code or small-scale components rather than design principles. They provide a library of HTML and CSS code snippets that can be reused in different contexts.
While style guides, UI kits, and pattern libraries all have their own distinct purpose, they can also be used together to create a more comprehensive solution: a design system.
Who Uses a Design System?
A good design system is used by a lot of different people on teams across the company. On the design side, it’s utilized by product designers, UX/UI designers, visual designers, and sometimes illustrators, as well.
Since a design system includes directions on code, it’s also used extensively by developers, product managers, and engineers.
[MID_ARTICLE_CTA]
6 Benefits of Using a Design System
There are many benefits to using a design system in your design process. Perhaps the most obvious benefit is that it can help to improve communication and efficiency within your design team. But it’s more than that: a good system can transform each part of your work through benefits like:
1. Faster Development & Iteration
With pre-written, reusable code, a design system can greatly reduce the amount of technical debt required for each design and design iteration.
This allows design and development teams to move much faster since they don’t have to start from scratch each time they need to design or develop a new product feature.
2. Streamlined Process
Similar to the development cycles, a design system also streamlines the design process in and of itself. When all design elements are stored in a central location, it’s much easier for designers to find what they need and use it in their work. This reduces design fatigue and helps designers feel more inspired by the design process. It also allows them to focus on higher-level design problems rather than getting bogged down in the details.
3. Shared Language
In a company you start to develop a language and everybody comes in with their own perspective on what something is.
For example: I would call something like this an accordion:
Someone else might call the same component an expander.
Design systems create a shared language that enables better, more efficient collaboration since everything in the system has its own identity and label.
4. Easier to Test
Design systems make it much easier to test what's working, since you can A/B test design patterns and components rather than have to tear apart whole pages or flows.
You can also track analytics to see how users interact with different design elements in your system, and make changes accordingly.
5. Future Friendly
By nature, design systems are future-friendly, and can grow and adapt to a brand's needs. But a large part of this is dependent on whether the system is built for consistency vs. cohesiveness, two concepts that Stephanie Poce, Design Lead at Designlab, shared were discussed extensively when she worked with the Shopify team on their design system.
“The word consistent sounds like everything needs to look and feel the same, whereas cohesive is a little bit more broad; it focuses more on the feeling of connection, rather than the consistency of how something shows up.”
In a cohesive design system, you have more room to expand on and manipulate the components, depending on what you need for a given platform or touchpoint.
6. More Time for Innovation
Without a system, you end up with multiple patterns that are all trying to accomplish the same thing, like eight different versions of a button that all have the same effect.
When you have a system, you stop solving the same problems repeatedly, and can then focus on building and innovating and creating new components and new patterns that solve really difficult problems.
Examples of a Design System
Wondering what a design system looks like? Here are a few examples of comprehensive systems that you can use to see what a mature system looks like, and get inspiration as you begin work on your own:
- Shopify - Polaris
- IBM - Carbon
- Google - Material.io
- Atlassian
- Salesforce - Lightning
- GitLab - Pyjamas
- Adobe - Spectrum
Note: Each of the examples here are from large companies, most of them with dedicated teams that are focused on growing and maintaining that system. Not every company is going to be able to reach this level of organization and documentation.
How to Build a Design System
Building a design system requires a full team of people who are committed to working towards a collective goal. It also requires you to look clearly at what components you’re currently using, and ask some thoughtful questions about why, and whether it’s an appropriate solution.
Because this often requires a full overhaul of components, it’s a good idea to look at building a design system in conjunction with a larger project, like a redesign.
Phase 1: Understand the context
When building a design system, you need to understand the context behind what you’re building it for, and decide how many systems you might ultimately need to create and maintain.
A software system, for example, is extremely functional. Software is focused on helping users to achieve their goal, through a lot of functional processes that happen in a software flow like transactions, forms, and different types of messaging.
A marketing system, on the other hand, is typically more expressive. Marketing components are different from product components because the marketing components have to do the work of displaying content, telling a story, and enabling exploration.
This starting point helps you understand what you need to focus on as you start to build out the components that will be needed for that experience.
Phase 2: Take inventory on everything that you have
Once you understand the context, you can start to inventory everything that you have. This includes design patterns, processes, and tools. It’s helpful at this stage to map out all of the design patterns that are currently being used. Once you have a sense of what’s working well, and what isn’t, you can start to build out a design system that includes those patterns.
Phase 3: Break down each piece for analysis
The heart of the process is really in breaking down whatever you’re building into its pieces. From there, you can figure out how many of those pieces are scalable, how often they’ll be used, and what the different use cases are for each of them.
Phase 4: Build a system to scale
Once you know what pieces you’re working with, it’s time to put them back into more of a system; that framework of the reusable components, patterns, and templates.
As all of these things come together, you’ll also create extensive documentation, explaining what they are, clarifying best practices about how to use them, as well as documenting the standardized code.
This phase might also include collaborating with other teams, like marketing or brand, to ensure that the components will work with your product and website grid.
Tips for Using Design Systems In Your Work
Design systems can be an almost magical resource that creates more efficient communication and collaboration within your organization. But it doesn’t happen without extensive effort.
Take time to understand and explain your design system
To use a design system efficiently and appropriately, you have to understand it; understand the mechanics of the things that you’re using and what they’re meant to do.
In fact, Stephanie Poce shares that, "The biggest thing we learned at Shopify is that a lot of what makes a system important to people or usable to people is explaining the why, why did we make this component?"
Iterate and add to your design system as needed
As a designer, there's a responsibility to contribute back to the system. Systems die when no one contributes back; when they aren’t updated. There will be times when the system doesn’t work for you, and it requires thoughtful effort to contribute back to the system so that it grows and flexes with your needs.
Key Takeaways
- A design system is a tool for digital teams to work collaboratively on an experience by providing a standardized set of components and guidelines.
- A design system is more robust than a pattern library or UI kit
- Building a design system is an extensive project that’s usually easiest to do in conjunction with a planned overhaul, like a redesign or rebrand.
- Design systems are meant to be living, flexible resources. As such, your team must be committed to maintaining and contributing new components to your design system on a regular basis in order to keep it relevant.
Interested in upleveling your design skills? UX Academy is an online bootcamp for designers looking to shift into the field of UX/UI. Learn more about how this robust curriculum and 1:1 mentorship with a professional designer can change the course of your career.
.jpg)
.jpg)
