Figma Advanced

This 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.

What You Will 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 Outline

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

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.