StretchLearn Course

Build Figma prototypes that feel like real software

Variables, conditional logic, multi-state components, and overlays for usability testing and stakeholder demos

Beginner9 hr 20 minSelf PacedRegistered

Course Overview

What this course is designed to develop

This course teaches the modern Figma prototyping toolkit: variables (string, number, boolean, and color), conditional if-and-else logic with the Set Variable and Conditional actions, multi-state interactive components, overlays and sticky scrolling, and the timing and easing that make motion feel right. You will build prototypes that capture typed input, branch based on what a user does, count items in a cart, toggle dark mode from a single boolean, and validate a form, then prepare and moderate a usability test and present the result convincingly to stakeholders. Every technique uses the real Figma feature names and panels so you can rebuild it immediately.

Learning Outcomes

What the learner should be able to understand, build, or execute.

Build advanced prototype flows in Figma using interactions, triggers, and Smart Animate with deliberate timing and easing

Create and apply variables of all four types (string, number, boolean, color) to make a prototype hold and reuse data

Add conditional logic with Set Variable and Conditional actions so a prototype branches on user input

Construct multi-state interactive components with variants that carry their own behaviour into every instance

Use overlays, swap overlay, and sticky scrolling to build menus, modals, toasts, and fixed navigation

Plan and moderate a usability test on the prototype and present findings and the prototype to stakeholders

Curriculum Preview

Inside the curriculum: a structured path from fundamentals to execution.

Preview the course structure, see how the modules build on one another, and understand the path this program is designed to take you through.

Module 1

Module 1: The Prototyping Mindset and Core Interactions

Decide what fidelity a prototype actually needs, then master the interaction model, triggers, and motion settings that everything else in Figma builds on.

3 lessons

Fidelity, Purpose, and What to PrototypeContent · 40 min

Preview Enabled

Triggers, Actions, and the Interaction ModelContent · 45 min

LMS Access

Timing, Easing, and Smart AnimateContent · 45 min

LMS Access

Module 2

Module 2: Variables: Giving a Prototype Memory

Use Figma variables to make prototypes hold data: capture typed input, count and calculate, toggle boolean state, and theme with color variables, all without code.

3 lessons

What Variables Are and the Four TypesContent · 45 min

LMS Access

Capturing Input and Showing Dynamic TextContent · 45 min

LMS Access

Counting, Calculating, and Theming with VariablesContent · 50 min

LMS Access

Module 3

Module 3: Conditional Logic and Interactive Components

Branch a prototype on user input with conditional if-else logic, then build multi-state interactive components that carry their own behaviour into every instance.

3 lessons

Conditional Logic: If, And, ElseContent · 50 min

LMS Access

Multi-state Interactive Components with VariantsContent · 50 min

LMS Access

Combining Variables, Conditionals, and ComponentsContent · 50 min

LMS Access

Module 4

Module 4: Overlays, Testing, and Stakeholder Demos

Use overlays and sticky scrolling for menus, modals, and fixed navigation, then prepare and moderate a usability test and present the prototype convincingly to stakeholders.

3 lessons

Overlays, Swap Overlay, and Sticky ScrollingContent · 45 min

LMS Access

Preparing and Moderating a Usability TestContent · 50 min

LMS Access

Presenting the Prototype to StakeholdersContent · 45 min

LMS Access

Built for Application

A complete learning path, not a one-off inspiration hit.

This program is designed around progression: focused lessons, structured modules, applied resources, assessments, and a course rhythm that turns information into usable capability.

Figmaprototypingvariablesconditional logicinteractive componentsoverlaysusability testingSmart Animate