Overview: Introduction to design systems

Updated at June 19th, 2025

+ More

Table of Contents

Course description Overview Who is this course for? What will you learn? Course contents Resources

Course description

The world of design systems is vast and guidance is constantly shifting as new technologies and schools of thought emerge. It can be difficult to know where to begin, even for experienced designers.

This course will walk you through the entire design system journey—from fundamental concepts, to building and documenting your system.

We’ll provide guidance, explore real-world applications, and give you tools to make meaningful decisions. We’ll also touch on Figma features like libraries, component properties, and styles.

Overview

4 written lessons (+ 7 videos, 1 Community file)
Approximately 2 hours
Design systems, styles, components, libraries
English

Who is this course for?

Designers who are familiar with styles and components in Figma, but want to improve their workflows and broaden their skills to a systems-level.

Managers and leaders who want to learn how design systems can increase productivity and support design at scale.

What will you learn?

Understand what a design system is and if you need one, get buy-in from leadership, and what to consider as you build your system
Discover what goes into a design system and explore foundational concepts like color, typography, and iconography
Learn more about Figma features for managing design systems: styles, components, and libraries
Explore the importance of documenting your systems and processes. Learn how to maintain, improve, and advocate for your design system

Course contents

Lesson 1: Welcome to design systems

Understand the benefits of a design system and what's involved in building and maintaining one.

Chapter 1: What is a design system?
- Style guides
- Component libraries
Chapter 2: Do you need a design system?
- Benefits of design systems
- Signs you need a design system
- Challenges of building a design system
Chapter 3: Audit your product
- Recruit allies
- Perform an audit
Chapter 4: The design system process
- Steps to take
- Consider your contributors, audience, and implementation approach

Lesson 2: Define your design system

Explore what resources can go into a design system.

Chapter 1: Principles
- Principles
Chapter 2: Foundations
- Accessibility
- Color
- Typography
- Elevation
- Iconography
- Layouts
- Grids
- Spacing
- Patterns
Chapter 3: Documentation
Chapter 4: Processes

Lesson 3: Build your design system in Figma

Follow the Habitz team as they build out their design system in Figma

Chapter 1: Set up your library
- Introduction to styles and components
- Structure your library
- Consider component architecture
- Atomic design
- Naming conventions
Chapter 2: Build your foundations
- Explore spacing features like layout guides and auto layout
- Color: Create color styles
- Typography: Create text styles
- Elevation: Define effect styles
- Icons and illustrations: Create icon component sets
Chapter 3: Build components
- Create a dayToggle component with component properties
- Build an actionPresentationCard component with variants
Chapter 4: Define patterns
- Create a daySelector component with dayToggle instances
- Create a component for the navigation pattern

Lesson 4: Document, improve, and update your system

Explore how to document your design system and get feedback to improve and maintain it.

Chapter 1: Documentation
- What is documentation?
- Where to document
- Document a spatial system in Figma
Chapter 2: Improve your design system
- Run user testing
- Solicit feedback from stakeholders
- Manage contributions
Chapter 3: Updates and releases
- Establish a versioning system and changelogs
- Explore branching for library files
Chapter 4: Advocate for your system

Update 1: Tokens, variables, and styles

Explore design tokens and how to organize and structure them to add value to your design system..

Chapter 1: Design tokens
- What are tokens?
- What are the benefits?
- How should you organize them?
Chapter 2: Implement tokens in Figma
- Migrate color styles to variables
- Create variable collections
- Use modes for themes
Chapter 3: Tips for naming your tokens

Resources

Download this file from the Figma Community →