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
  • Learn XD
Start Free XD Trial
Logo-full
Start Free XD Trial
  • Process
  • Principles
  • Perspectives
  • Design Circle
  • Buy 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

The Best iPhone Widget Designs for iOS 14

By Justin Morales

Here are some iOS 14 widget examples and a few things to consider when designing your own widget.

Design Systems

What Is Universal Design?

By Nick Babich

Learn about the concept of universal design and its core principles.

Design Systems

Design Thinking Process and Its Phases

By Nick Babich

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

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
Design Systems

What is Inclusive Design? Principles and Examples

By Justin Morales

Inclusive design empowers designers to create products whose experiences serve as many diverse people as possible.

Design Systems

What Are Design Tokens? A Design Systems Tool

By Justin Morales

Learn the value of design tokens with Adobe XD Ideas.

User Testing

Design Inspiration for UX and UI Workflows

By Dan Silveira

Design Inspiration for UX and UI Workflows.

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.

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.

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 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.

Load More

Let's XD together.

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

Start Free XD Trial
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 */ /* ----------------------------------------- */