See how live online training works in this brief video.
All Figma classes include
Free retakes
Detailed curriculum
Live instructor
Flexible rescheduling
Certificate of Completion
Figma Design Systems Course online November 20 2024
Figma Design System course
$495.00
The Figma design system course with certificate provides you with the skills to create, implement, and manage design systems in Figma. This advanced course begins with an overview of design systems, exploring why they are valuable and how Figma libraries integrate into them. Through hands-on projects you learn to build responsive elements and components from scratch that can be used across all your entire designs.
The Figma design systems training covers the structure and taxonomy of design systems, showing how to conduct design audits, streamline components, and ensure visual consistency. It also emphasizes effective naming conventions, the use of variables, and the creation of design tokens for seamless scaling. Participants develop skills in creating and organizing styles for fills and text, and using component sets. This course also teaches best practices for publishing, implementing, and updating Figma design systems, enabling you to create,integrate and maintain design systems across all your projects. This class is useful for those working with Figma across a team who are looking to build consistency, standardization, and efficiency into their design process.
Figma design system course topics
Overview 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 system6
- Updating your design system
Why Figma classes at AGI are the best option for you
- Hands-on learning: Learn Figma quickly with our proven teaching methods.
- Exceptional curriculum: AGI has delivered Figma training to thousands over 25 years.
- Expert instructors: Our instructors are Figma experts and skilled educators.
- Small class sizes: Receive personalized attention with 10 or fewer participants per class.
- Repeat for Free: If you need a refresher or miss a class day, retake the Figma class at no cost.