Figma Advanced
via Noble Desktop
Affiliated with Course Report
Create more realistic prototypes using Figma's advanced features. Noble Desktop's course covers variables, modes, and conditional interactions, along with organizing complex design work. These techniques let you represent different interface states and behaviors within a prototype, building on the layout and component skills developed in introductory Figma training.
What's included with live classes
- Free course retake within one year to refresh the material and gain practice.
- Class recordings
Overview
Ready to take your Figma skills to the next level? This class is designed for those who have a solid grasp of Figma’s basics and want to advance their prototyping skills.
In this class, you’ll learn how to use sections, variables, variable modes, and conditionals to add advanced, realistic functionality to your prototypes.
You’ll also learn how variables are used to create design systems, including light and dark modes. You’ll explore how to use variable collections to create primitive and semantic layers that help create design systems that are easier to use and modify.
Prerequisites
Students should have Figma knowledge equivalent to our Figma Bootcamp.
Topics included
Schedule & enrollment
Find dates that fit your schedule, then book on Noble Desktop.
- Live tuition
- $425
- Course length
- 6 hours
All class times are Eastern (ET).
-
Dates
Class time
Starts at 10am ET
Final session ends at 5pm ET
Attend
In-person or live online
-
Dates
Class time
Starts at 10am ET
Final session ends at 5pm ET
Attend
In-person or live online
-
Dates
–
Class time
Starts at 6pm ET
Final session ends at 9pm ET
Attend
In-person or live online
-
Dates
Class time
Starts at 10am ET
Final session ends at 5pm ET
Attend
In-person or live online
-
Dates
Class time
Starts at 10am ET
Final session ends at 5pm ET
Attend
In-person or live online
-
Dates
Class time
Starts at 10am ET
Final session ends at 5pm ET
Attend
In-person or live online
-
Dates
Class time
Starts at 10am ET
Final session ends at 5pm ET
Attend
In-person or live online
-
Dates
–
Class time
Starts at 6pm ET
Final session ends at 9pm ET
Attend
In-person or live online
-
Dates
Class time
Starts at 10am ET
Final session ends at 5pm ET
Attend
In-person or live online
Confirm current dates and availability on Noble Desktop before booking. Enrollment opens in a new tab.
Self-paced tuition & enrollment
Learn through recorded lessons on your own schedule.
- Tuition
- $425
- Course length
- 6 hours
- Format
- Self-paced online
This course is available for 30 days. You can choose when to start your access period. Once you activate, you will have 30 days to complete it (access the course materials, quizzes, projects and videos). You may request one extension of seven (7) days. Other extension requests will be evaluated on a case-by-case basis. Videos are not downloadable.
Loading enrollment options…
Prefer to enroll directly? Open the course website.
Curriculum
What you'll learn
- Explore Figma’s advanced prototyping features
- Learn how to use variables and variable modes
- Use conditionals to add advanced interactivity to prototypes
- Create light and dark modes using variable collections
- Use primitive and semantic layers when building a design system
Course syllabus
Section 1
Sections in Prototyping
- Using Sections to Organize & Navigate a File
- Using Sections in Prototyping
Intro to Variables: Number Variables & Scoping
- Creating, Using, & Editing Number Variables
- Variable Scoping
Intro to Modes & String Variables (Text Variables)
- Creating & Applying String Variables
- Creating & Switching Modes
Prototyping a Tab Bar: Changing Variants with Variables
- Creating Variants
- Creating a Variable for the Variants
- Making it Interactive
Section 2
Shopping Cart Part 1: Prototyping with Variables
- Defining Products with Variables & Modes
- Connecting Content to the Variables
- Hiding Objects with Boolean Variables
- Adding Items to the Cart
Shopping Cart Part 2: Prototyping with Conditionals
- Defining Cart Variables
- Making the Cart Quantities Work
- Using a Conditional to Avoid Negative Numbers
Shopping Cart Part 3: Navigating Modes in a Variable
- Calculating the Cart Total
- Accessing Modes in a Variable
Design Systems: Light & Dark Mode (Variable Collections)
- Light & Dark Modes
- Variable Collections
- Using Primitive & Semantic Layers to Build a Design System
Self-paced course
Learn through recorded lessons on your own schedule.
This course is available for 30 days. You can choose when to start your access period. Once you activate, you will have 30 days to complete it (access the course materials, quizzes, projects and videos). You may request one extension of seven (7) days. Other extension requests will be evaluated on a case-by-case basis. Videos are not downloadable.
View self-paced tuition & enrollmentThis course is ideal for designers who are comfortable with Figma’s core tools and are ready to deepen their prototyping expertise. It focuses on advanced techniques that help create more functional and realistic prototype behavior.
You’ll learn how to work with sections, variables, variable modes, and conditionals to build sophisticated interactions within your designs. The course also explores how variables support scalable design systems, including light and dark modes, and how variable collections can be structured into primitive and semantic layers to make systems easier to manage and evolve.
Self-paced prerequisites
Students should have Figma knowledge equivalent to our Figma Bootcamp.
Self-paced curriculum
What you'll learn self-paced
- Explore Figma’s advanced prototyping features
- Learn how to use variables and variable modes
- Use conditionals to add advanced interactivity to prototypes
- Create light and dark modes using variable collections
- Use primitive and semantic layers when building a design system
Self-paced syllabus
Section 1
Sections in Prototyping
- Using Sections to Organize & Navigate a File
- Using Sections in Prototyping
Intro to Variables: Number Variables & Scoping
- Creating, Using, & Editing Number Variables
- Variable Scoping
Intro to Modes & String Variables (Text Variables)
- Creating & Applying String Variables
- Creating & Switching Modes
Prototyping a Tab Bar: Changing Variants with Variables
- Creating Variants
- Creating a Variable for the Variants
- Making it Interactive
Section 2
Shopping Cart Part 1: Prototyping with Variables
- Defining Products with Variables & Modes
- Connecting Content to the Variables
- Hiding Objects with Boolean Variables
- Adding Items to the Cart
Shopping Cart Part 2: Prototyping with Conditionals
- Defining Cart Variables
- Making the Cart Quantities Work
- Using a Conditional to Avoid Negative Numbers
Shopping Cart Part 3: Navigating Modes in a Variable
- Calculating the Cart Total
- Accessing Modes in a Variable
Design Systems: Light & Dark Mode (Variable Collections)
- Light & Dark Modes
- Variable Collections
- Using Primitive & Semantic Layers to Build a Design System
Course Reviews
Is this course right for you?
Choose this course when you already understand Figma layouts, components, and basic prototypes. If you are still learning those foundations, compare the Figma Bootcamp before moving into variables, conditional behavior, and more elaborate design systems.