Figma Advanced

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