Introduction to Design Systems Course (How To)

Learn how a scalable, repeatable design system leads to a more efficient design. Learn the components of a design system, and how to work with existing documentation.

What you'll learn

• The importance of a design system
• The components of a design system
• How to read design system documentation
• Advocate for the benefits of a design system

Understanding Design Systems

A design system is a set of rules that guide the design of a website or app. Design systems help create predictable experiences for users, and help designers work more efficiently and build interfaces consistent with an organization’s visual brand without wasting time exploring design problems that have been solved already.

Chevron 4 steps

• What is a Design System?

  7:28

• Exploring Design Systems

  5:06

• Design System Components

  4:12

• Understanding Design Systems Quiz

  5 questions

Visual Design Language

Design system documentation should specify clear rules for applying elements of style.

These design system building blocks include color, typography, spacing, image, and motion.

Chevron 7 steps

• Color

  5:54

• Typography

  5:36

• Space

  5:36

• Visual Design Language: Color, Typography, Space Quiz

  6 questions

• Image

  4:45

• Motion

  3:05

• Visual Design Language: Image, Motion Quiz

  5 questions

User Interface Library

In the User Interface Library, pieces of a design system’s visual design language are assembled together to create interactive elements.

Chevron 3 steps

• Introducing User Interface Libraries

  1:42

• Exploring User Interface Libraries

  4:57

• User Interface Library Quiz

  5 questions

Voice and Tone

Imagine your product as a living person. What terms would you use to describe its personality? Friendly and playful? Confident and loud? Formal and serious? A design system should guide copywriters towards keeping brand voice consistent and tone appropriate.

Chevron 3 steps

• Introducing Voice and Tone

  3:12

• Exploring Voice and Tone

  4:39

• Voice and Tone Quiz

  5 questions