Design systems are everywhere these days. It seems that every leading technology organization has published a design system, including Salesforce, Shopify, Airbnb, Spotify, Google, and Microsoft. Design systems are even spawning their own specialized UX and product roles.
An example of a design systems-focused product design role.So, how did all of this come about? Why are design systems suddenly so popular? And what do all of the terms like UI kit, design language, and style guides actually mean? We’ve put together this comprehensive blog post series to take a deep dive into design systems. Based on internal Adobe research, interviews with 15 experts from organizations like Google, Shopify, Slack, and more, and a survey of 12 designers working on design systems, here’s our back-to-basics guide.
Infographic by Andreea Mica.A brief history of design systems
While design systems are enjoying a moment in the sun, and seemingly everyone is launching and evolving theirs, they are actually not a new idea. Andrew Couldwell, a designer who has written a book on design systems, says that “design systems are really nothing new. I’ve been working with them for the best part of a decade. They’re really an evolution of brand guidelines in some ways.” Shawn Cheris, a director of experience design at Adobe, agrees. “Adobe has so many products, and the brand team has always had to work to find ways from a visual architecture standpoint to make things feel like they come from one company.”
Going even further back to the built environment, Christopher Alexander started talking about design patterns in the 1970s with the 1977 publication of his book A Pattern Language: Towns, Buildings, Construction. His ideas on reusable design pieces within architecture have been an influence on the practice for several decades. In the 70s and 80s, brand guidelines like the one for NASA or the New York City Transit Authority outline how visual identity should be expressed, and are coveted collectors items today.
A page from the NYC Transit Authority Standards Manual showing examples of the arrow element. Image by Standards Manual.Into the digital age, brand and visual identity guidelines continued to inform the online presence of websites and brands. With the proliferation of digital channels like mobile apps, marketing websites, web apps, and even voice applications, organizations have realized the need for a cohesive customer experience.
Why design systems, and why now
Now, in today’s digital context, we find ourselves in a time when UX and digital product design are taking center stage. Most organizations have realized the importance of digital as a way to differentiate from, or at least keep up with, their competitors. Enterprise organizations often have several digital product design teams working on different product lines and platforms. For example, in terms of consumer facing products, Airbnb maintains a web presence, an iOS app, and an Android app. Then there are also internal applications that are not public facing to consider.
Airbnb payment flow on web and mobile. Image by Airbnb.In addition, this proliferation of digital properties and products across platforms means that content velocity has dramatically increased. “The challenge of content velocity is that designers have to do more than ever before. As a designer, everything I do has to scale – across screens, platforms, and people. All of this means that being a designer today is both exciting and daunting,” says Cisco Guzman, director of product management for Adobe XD.
Design systems are a logical move for organizations that find themselves creating products across web, various platforms, and form factors. They are a natural result of design teams trying to coordinate, while also recognizing the potential to reduce the duplication of work. Design systems are also crucial when it comes to driving consistency of brand and experience across products.
What a design system consists of
While there is no “one-size-fits-all” approach to design systems, there are usually three main items that many design systems include:
- Centralized Access Point. Often, a design system will have an internal or public facing website or folder (such as a Dropbox or Google Drive folder) that is a centralized resource. This contains documentation of the system and information on design principles, guides on topics like content, design, and accessibility, and links to the reusable design and development resources.
- Reusable Design Resources. UI kits, e.g. an Adobe XD file of UI elements/symbols that are kept up to date. Within Adobe XD, this is a sticker sheet that is centralized and can be used when starting on a new set of screen designs.
- Reusable Development Resources. A central GIT repository of code-based components that developers can use. These might be in multiple frameworks, e.g. iOS components, react components, HTML/CSS components, etc. These are seen as an “expression” of the design system.
Mailchimp’s design system’s publicly available website covering design patterns, including code snippets. Image by Mailchimp.Why are organizations investing in design systems?
Within design teams and organizations, the case for creating design systems is a compelling one. It’s worth remembering that design systems are not an end in-and-of-themselves, they are a means to an end and a way to achieve certain outcomes. Different organizations will have different priorities, but based on our research there are some common driving forces behind investment in design systems.
A very popular case for design systems is that of consistency. The desire to have a cohesive feeling brand and experience across multiple products from the same company is brought to life by a shared design system that can be implemented and used by many teams. Often, the need for consistency is determined by an interface or UI audit that showcases the very different UI styles that exist across a brand’s product, for example all of the variations in button styles.
Efficiency is another favorite rationale for creating a design system. Reusable, repeatable components and patterns allow design and development teams to speed up their workflows. They also reduce duplication of effort, as interface elements do not need to be re-created from scratch every time. With the popularity of design sprint approaches, reusable UI component libraries also enable rapid prototyping.
Design systems can also enable smoother collaboration across an organization. With a defined vision in place for the look, feel, and experience of digital products, teams have a better sense of “what good looks like” and can aim to meet an agreed-upon bar that has been collaboratively defined. Contributing back to the design system also allows people to be part of evolving their organization’s system. In this way, design systems can act as a trojan horse for shared vision and breaking down silos.
The four stages of design system maturity
When aiming to create a design system to solve for some of these desired outcomes, teams may go through several stages or levels in getting to a robust design system. Our internal research with Adobe customers and clients has uncovered four levels of designing and developing systematically. These levels are linked to the maturity of a design system approach:
| Designers | Developers |
| Level 1 | Designer creates and uses reusable symbols for consistency across their individual designs. | Developers build based on individual designs, delivered in .PSDs, manually redlined, and annotated specs. They don’t share code. |
| Level 2 | Designers share reusable symbols with each other, either in a master file or library, to keep consistency across pieces of a larger design project. | Developers build based on generated specs from a design tool, like Adobe XD, and share, reuse, and review code using Github. |
| Level 3 | Designers create and define a formal style guide (usually) at the outset or during a project, which they reference as they’re working and share with developers. This process may be driven by an ask from developers or by the designers themselves. | Developers work from a style guide delivered by designers, and work using reusable components shared in Github and formally approved. |
| Level 4 | Designers are (or, should be) using the same “source of truth” for reference as developers are. This shared point of reference builds trust and eases the pressure to exactly communicate designs by creating a shared language.
| Developers are (or, should be) using the same “source of truth” for reference as designers, which includes brand guidelines and live-coded visual components updated through Json files linked to the master build of the project. |
Source: Lindsey Wallace, Ph.D., Sr. Researcher, Adobe Design Research and Strategy.
A design system glossary of terms
At each of the above levels of designing and developing systematically, there are various elements and components of a design system that a team might be using. The design field is notorious for arguing about semantics. With the term “design systems” gaining popularity in the last few years, people might be referring to a few different things. There are also debates about what makes a true design system.
Examples of the elements of a design system on a spectrum from designer to developer-owned. Source: Lindsey Wallace, Ph.D., Sr. Researcher, Adobe Design Research and Strategy. Infographic by Andreea Mica.The goal of this glossary is not to produce rigid definitions, but rather to demystify some of the terms you will come across when talking and reading about design systems. Let’s break down some terminology you might hear:
- Design System is an overarching term for a library of experience design and development resources that is shared across an organization and teams. It typically consists of several parts.
- Components are the interface and UI elements that make up a digital product, for example buttons, form fields, radio buttons, and checkboxes.
- Pattern Library refers to a set of ‘design patterns’ for the user interface that are made up of components of elements from the design system. These patterns might, for example, show a common UX module such as a payment information form.
- Brand Guidelines are guidelines that are often owned by the brand or marketing team, and cover the use of the company logo, typographic, and color palette guidelines. These predate current day design systems, and may be an important starting point for design system teams.
- Style Guides are similar to brand guidelines, and may refer to a visual style guide and/or an editorial guideline covering writing and tone of voice.
- UI Kit usually refers to a file or document of user interface elements such as buttons, form fields, check boxes, and radio buttons that are in a format such as an Adobe XD sticker sheet. These are used by design teams to create screen mockups and prototypes.
- Tokens are the most basic style elements of a design system — for example, specified brand colors. These are managed through a centralized file such as JSON file that acts as a single source of truth for the design systems styles.
Everything old is new again
Design systems are nothing new, and represent the digital evolution of the desire to use brand standards and design patterns to create products more quickly and consistently. For large organizations, they are a natural evolution of the tools that design and development teams use to ship products.
One of the most important things to understand is that “design system” is an umbrella term that can encompass many aspects and resources. Getting clear on language, and which aspects are going to be most meaningful to your team and organization, will help in any efforts to systematize design and development.
Continue to part two: The UX Designer’s Role in Design Systems.
Thank you to all of the people who participated in research, interviews, and surveys, and shared their deep knowledge and expertise. For more on design systems, download the Adobe and Idean e-book ‘Hack the Design System.’
Header illustration by Andreea Mica.