Design Systems explained

by Dennis — 6 minutes

In this Design System 101 we will explain what a design system is, why it’s gaining traction and give you some tips to start creating your own. I’ll start by giving you the definition of a design system, then explain it’s pros and cons. Finally, I’ll answer some frequently asked questions and hand you several handy articles to kickstart your design system journey.

Table of contents

What is a design system?

In my opinion a design system is an alignment between people and processes. This is why my definition of a design system is:

A Design system is a cohesive alignment established among teams within an organization incorporating essential tools, streamlined processes, and standardized styles to manage designs at scale by reducing redundancy, resulting in visual consistency across different pages and channels.

With a clear definition you create a better understanding of the potential of a design system and how to achieve this. Most definitions tend to lean towards a collection of components and guidelines, meaning that a design system is something they created once. A design system, however, is never finished.

A quick search on the web will lead you to countless definitions of a design system, each trying to describe its essence. The abundance of information can feel confusing, and the lack of a straightforward explanation can leave one feeling unsure. All definitions, however, share the benefits of a design system, which is to help teams work more efficiently and consistently.

Invision describes in their article A comprehensive guide to design systems that a design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. They put the emphasis on "components" guided by guidelines that are created within the design system.

The Niels Norman Group provides a different perspective, stating that a design system is a "set of standards" to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels. Instead of highlighting the components, they focus on the standards and the shared language.

Even though these definitions are not wrong, they are incomplete. A design system is more than just a collection of components or a set of standards. It should not be treated as a side project but rather seen as a strategic asset that streamlines design and development processes. A design system is a way of working, designed, managed, and implemented by people. It continues to evolve and grow, making it a cohesive alignment among teams within an organization.

What are the benefits of using a design system?

In his previous article Randy describes the essentials of why a design system can be beneficial for you, and why it is important to know these benefits How to start creating a design system that integrates with your organization. For me the most important benefits are:

  • Efficiency and productivity
  • Consistency and brand identity
  • Accelerated design and development cycles
  • Improved collaboration and communication
  • Scalability and flexibility

A Design System provides teams with a collection of reusable components, guidelines, and styles. By utilizing these valuable assets, designers and developers can concentrate on addressing design challenges, eliminating the need to recreate elements from scratch for each project. By sticking to standardized styles and design principles, the user experience becomes seamless and recognizable, establishing trust and credibility with users. This acceleration in development leads to shorter development cycles, quicker time-to-market, and the ability to adapt swiftly to changing user needs and industry trends. With this so called "cohesive alignment" among teams you can pave the way for efficient design management at scale, reducing redundancy, and resulting in a harmonious user experience across diverse pages and channels.

Frequently asked questions about design systems

What are the elements in a design system?

Design systems are made of many components, patterns, styles, and guidelines, which helps to optimize your design efforts. A design system should at least have the following items:

  • Reusable components
  • Patterns
  • Brand language

Beside these items you can also add interaction patterns, accessibility guidelines, design tokens, as well as version control. Remember that a design system is rather a way of working than a collection of components. This means that each design system can contain different elements.

What is the difference between a component library and a design system?

A component library is a subset of a design system, focusing on providing reusable UI components for a specific project or product, while a design system is a comprehensive framework that guides the entire design and development process across an organization, ensuring consistency and efficiency across multiple projects and products.

How do you structure a design system?

Structuring a design system can be a daunting task. Engage in conversations with key stakeholders, product managers, designers, developers, and product owners. Ask them about their understanding of a design system and its benefits. Their responses can provide insights into their level of understanding and appreciation for such a system. Randy wrote his experience in his previous article How to start creating a design system that integrates with your organization. This can help you to structure your design system.

Wrap up and follow-up content

Design systems have become more popular in recent years. A well-designed design system can significantly improve an organization's design workflow, efficiency, and consistency, ultimately leading to better user experiences. As a Design System is an alignment between people and processes, you must start with the definition. With a clear definition you create a better understanding of the potential of a Design System and how to achieve this. This will help you to get buy-in from stakeholders and team members. In this article I explained what a design system is, and how my definition differs from other popular definitions.

If you want to know more about design systems, I recommend reading the following articles:

meerdivotion

Cases

Blogs

Event