'%3E%3Crect x='-4.10352' y='0.1875' width='171.875' height='171.875' rx='85.9375' fill='%230C5238'/%3E%3Crect x='82.5566' y='-9.2085' width='133.93' height='133.93' rx='22.7014' transform='rotate(45 82.5566 -9.2085)' fill='%23F79CFF'/%3E%3Crect x='144.375' y='23.677' width='123.75' height='123.75' rx='61.875' transform='rotate(90 144.375 23.677)' fill='%23FF6D38'/%3E%3Crect x='106.562' y='26.198' width='119.396' height='48.125' rx='24.0625' transform='rotate(90 106.562 26.198)' fill='%23252525'/%3E%3Crect x='106.562' y='62.8645' width='48.125' height='48.125' transform='rotate(90 106.562 62.8645)' fill='%2312A720'/%3E%3Cpath d='M106.553 86.927L99.5232 103.942L82.5526 110.99L65.5819 103.942L58.5524 86.927L65.5819 69.9122L82.5526 62.8645L99.5233 69.9122L106.553 86.927Z' fill='%23FFFF00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3971_7584'%3E%3Crect width='165' height='92.8125' fill='white' transform='translate(0 0.1875)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A)
Overview: Introduction to design systems
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 grids 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