Adobe
Skip to content
Logo-full
Logo-full
  • ProcessWorking methods, best practices, tips and tricks
    • Information Architecture
    • Prototyping
    • UI Design
    • User Research
    • User Testing
    • Wireframing
  • PrinciplesFoundational and emerging concepts
    • App Design
    • Design Systems
    • Emerging Technology
    • Human Computer Interaction
    • Web Design
  • PerspectivesUnique insights, design stories, the impact of design
    • Interviews
    • Leadership Insights
    • Social Impact
    • SoDA Series
    • Wireframe Podcast
  • Design CircleIndustry leaders shaping the future of design
Explore Adobe XD
Logo-full
Explore Adobe XD
  • Process
  • Principles
  • Perspectives
  • Design Circle
  • Explore Adobe XD
XD Ideas   /   Principles   /   Design Systems

Design Systems

What is a design system? A design system is a collection of reusable functional elements–components and patterns–guided by clear standards that product teams use to create a consistent experience across a range of products. Design systems act as a single source of truth for an entire organization by using a singular design language to guide the development of products. Learn more about UX design systems and how design teams can benefit from them.

Design Systems

What Are Design Tokens? A Design Systems Tool

By Justin Morales

Learn the value of design tokens with Adobe XD Ideas.

Design Systems

Design Thinking Process and Its Phases

By Nick Babich

Learn how the design thinking process can help you create efficient design solutions.

Design Inspiration for UX and UI Workflows

By Dan Silveira

Design Inspiration for UX and UI Workflows.

What Is the Purpose of a Design System?

A design system is not just a collection of design artifacts; it’s a philosophy. To create a great user experience, product teams should understand not only what they need to build but also why they need to build it. That’s why design vision (in the form of a company or product strategy) and design principles (fundamental ideas about the practice of user interface design) should always be used as a foundation for design systems. Your design vision acts as a North Star for designers, communicating to product teams the global purpose of their designs. Design principles guide product teams by helping them reach the ultimate purpose or goal of the product.

Read More

Well-crafted design systems provide enough freedom for product teams to experiment and try different creative approaches to solving problems. Product teams should never face major roadblocks from a design system when implementing new visuals; it should always be easy to update a design in modern and fresh ways.

Design systems should also be flexible and responsive to any changes in the field of design, such as new visual design trends or the rising importance of different types of emerging technology. 

What Are the Elements of a Design System?

A design system consists of both tangible and intangible elements. Components, patterns, and style guides are tangible elements.

  • Components are functional elements of a user interface – buttons, input fields, text labels, etc.
  • Patterns are individual functional elements that all serve the same purpose organized into groups–sign-in forms, menus, etc.
  • A style guide is a set of visual design decisions such as which colors, typography, iconography to use, as well as guidelines for using decorative elements such as whitespace and shadows

Guidelines, brand values, and design mindset, on the other hand, are intangible elements:

  • Guidelines are sets of rules that allow a team to design consistent and coherent experiences made up of components, patterns, and visual styles
  • Brand values, which naturally include a brand legend and brand mission, are a set of guiding principles that shape every aspect of your design
  • A design mindset is your philosophy of design that aligns a team around a clear set of goals

Both tangible and intangible elements work together to direct product teams and help them make meaningful design decisions.

What Are the Qualities of a Well-Functioning Design System?

Design systems differ based on an organization’s need, but all well-functioning design systems share similar characteristics:

  • Easily adopted. Well-functioning design systems fit easily into the existing culture of your team, becoming a natural part of the design process.
  • Consistent. All components of the design system should consistently and naturally work together.
  • Flexible. Consistency is important, but well-functioning design systems leave room for team members to contribute in new ways.
  • Documented. Documentation is one of the most important components of a well-functioning design system. Documentation should be detailed and regularly updated.
  • Reusable. Design systems should be able to be reused and repurposed in a variety of situations.

How Do You Organize a Design System?

Successful design systems are an integral part of an organization’s makeup, but incorporating them takes time. Setting clear standards for product teams and enforcing them via a strong vision, communication, documentation, and ongoing encouragement can help create a consistent experience among a range of products.

Read on to learn how to create a design system that is right for your company or client, and for the latest updates and developments in UX design knowledge.

Show Less
SoDA Series

DPDK’s Inclusive Illustration Design System

By Michael Vromans

To easier create illustrations, and to better reflect our world, DPDK created an inclusive design system.

Design Systems

Growth Design: Elevate Outcomes over Outputs

By Design Circle

The XD Meet the Makers series showcases today’s leading creators and innovators in UX design.

Design Systems

Adobe XD Meet the Makers: Post MAX Recap

By Adobe XD

Adobe XD Meet the Makers: Post-Max Recap.

Design Systems

The Main Pillars of Effective Design Systems

By Oliver Lindberg

An overview of the key components of a design system and how it can help your brand grow.

Illustration of two people looking at different screen sizes
Design Systems

Forrester Report: Unlocking Design’s Full Business Potential

By Patrick Faller

Learn how organizations’ maturity around design systems unlocks business value and higher customer satisfaction.

Don’t be a “dummy.” Design with content.
SoDA Series

Don’t Be a “Dummy” – Design with Content

By Jenna Brucoli

No matter how beautiful or consistent your design system is, if it wasn’t developed with actual content, look out!

Design your team to design products of the future
Design Systems

Eric Snowden of Adobe Spectrum on How to Design Your Team to Design Products of the Future

By Lindsay Munro

Eric Snowden shares his tips and the principles you need to create a comprehensive design system.

Emanuela Damiani headshot
Design Systems

Emanuela Damiani of Mozilla on Firefox’s Photon Design System

By Patrick Faller

Learn how Emanuela Damiani of Mozilla uses a design system to collaborate across borders.

Andrea Hock ebook, What How and Why
Design Systems

Design Systems e-book: The What, How, and Why

By Andrea Hock

Design systems create consistency and scale design processes. Download our free primer to learn more.

Joshua Baron headshot
Design Systems

Josh Baron of Dell on a Scrappy Approach to Design Systems

By Patrick Faller

Learn how Josh Baron of Dell brings consistency and speed to one of the world’s largest digital enterprises.

Hayley Hughes headshot
Design Systems

Hayley Hughes on Creating Unforgettable Hospitality Experiences

By Patrick Faller

Hayley Hughes uses a design system to drive quality, accessibility, and collaboration.

Load More

Let's XD together.

Where teams create the world’s best experiences at scale, powered by the leader in creative tools.

Download XD For Free
Logo-full

Get XD Ideas delivered to your inbox. Free.

Sign Up
  • Process
  • Principles
  • Perspectives
  • Design Circle
  • About
  • Inspiration
  • Guides
  • Career Tips
Copyright © 2019-2021 Adobe. All Rights Reserved. / Privacy / Terms of use / Cookie Preferences / Do not sell my personal information
/* ----------------------------------------- */ /* Content Template: loop-item-in-index-of-child-pages - start */ /* ----------------------------------------- */ .index-description-more, .index-description-less { cursor: pointer; text-transform: uppercase; } .index-description-less { display: none; } .index-description-3 {display: none;} /* ----------------------------------------- */ /* Content Template: loop-item-in-index-of-child-pages - end */ /* ----------------------------------------- */