Take your Figma skills to the next level with this advanced prototyping course. Learn to use variables, modes, and conditionals to add more realistic interactivity to your prototypes.
Overview
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
Taught by
Cameron Stevens, Michael Suen, and Christophe Dayton
