Course Overview
TOPIn this Figma design system course, you discover how to build a design system and the benefits of using a design system in Figma. In this course, you create a design system that includes components, styles, variables, and more. Along the way, you learn how to build components with exposed properties to make design elements more accessible and how to use advanced auto-layout features to build responsive designs. You also learn about design tokens and their place in a design system.
This Figma design system course with a certificate also covers the structure, categorization, and naming of Figma elements. Learn how to create a separate design system and have the design system serve as a library for other files.
Scheduled Classes
TOP| 11/18/26 - AGI - Virtual Instructor-Led - Virtual Instructor-Led | (click to enroll)
 |
| 12/16/26 - AGI - Virtual Instructor-Led - Virtual Instructor-Led | (click to enroll)
|
| 01/20/27 - AGI - Virtual Instructor-Led - Virtual Instructor-Led | (click to enroll)
|
| 03/31/27 - AGI - Virtual Instructor-Led - Virtual Instructor-Led | (click to enroll)
|
| 06/09/27 - AGI - Virtual Instructor-Led - Virtual Instructor-Led | (click to enroll)
|
| 08/18/27 - AGI - Virtual Instructor-Led - Virtual Instructor-Led | (click to enroll)
|
What You'll Learn
TOP- Overview and theory of design systems
- Creating a design system in Figma
- Starting a design system
- Naming conventions
- Using variables
- Creating design tokens
- Using fill styles
- Creating text styles
- Creating components and component sets
- Publishing a design system
- Using a design system
Outline
TOPOverview and theory of Figma design system
- Why use a Figma design system
- How Figma libraries fit into a design system
- Discovering the significant parts of a design system
Figma design systems in practice: building a design system in Figma
- Hands-on practice building a Figma design system from scratch
- Tips and tricks on building elements that are responsive
- Building components
Getting started with Figma design systems
- Figma design system functionality
- How design systems fit into your Figma workflow
Parts of a design system
- Discovering how libraries play a part in a Figma design system
- Determining structure and taxonomy based on use case
Starting your Figma design system
- Where do you begin?
- Understanding the design system process
Conducting a design audit
- Locating and evaluating existing Figma components, styles, and tokens
- Categorize all UI elements
- Determining the nature and functionality of your styles, components, and tokens
- Eliminating duplication, Identifying redundant and determining missing components
- Confirming the visual design is consistent and suitable
- Verifying that existing elements match style and aesthetics
Naming conventions for Figma design systems
- Building names in a meaningful and modular way
- Using names for system organization in Figma
Using variables in a Figma design system
- Creating Boolean variables
- Creating String Variables
- Organizing collections
Creating design tokens in a design system
- Understanding when to use design tokens for sizes
- Applying and editing tokens in Figma
- Using modes with design tokens
Creating and using fill styles
- Difference between Figma color variables and fill styles
- Creating fill styles for gradients and images
- Organizing and naming fill styles
- Integrating styles into other files and systems
Creating text styles for Figma design systems
- Creating and editing type styles
- Organizing and naming fill styles
- Integrating styles into other files and systems
Creating components and component sets in a Figma design systems
- Figma component best practices
- Component organization
- Adding properties
- Exposing properties
Publishing and using Figma design systems
- Publishing your Figma design system
- Implementing your design system
- Sharing your design system
- Updating your design system
Prerequisites
TOPThis course requires previous experience working in Figma and understanding of skills covered in the Introduction to Figma course and Advanced Figma course. Participants must have an understanding of how to apply styles, components, variants, variables, and properties to elements in Figma.
