Emma L.
Sample Variables chapter is excellent
I had no idea prototypes could handle this much logic. The reacting form is now part of every usability test we run.
Figma prototyping: interactive flows that feel like the real app
Use overlays, interactive components, smart animate, variables and conditionals to build prototypes you can test with real people
Created by Tomas Novak
- Updated September 2026
- English
- Intermediate
What you will learn
- Plan a prototype around the question you want to answer
- Connect screens with the right triggers, actions and transitions
- Build modals and bottom sheets with overlays
- Create interactive components for toggles, tabs and hover states
- Use smart animate and easing to make motion feel natural
- Add state with variables, conditionals and multiple actions
- Run a usability test with a prototype and share it for handoff
Course content
Prototyping foundations
Overlays and navigation patterns
- Article: Modals and bottom sheets as overlays 11 min
- Article: Swapping and closing overlays 8 min
- Article: Tabs and bottom navigation 9 min
- Article: Back behaviour and navigation history 7 min
Interactive components
- Article: Change to between variants 9 min
- Article: Hover and pressed states 7 min
- Article: Toggles, checkboxes and accordions 10 min
- Article: Carousels and drag gestures 10 min
Motion that feels natural
- Article: Smart animate in depth 10 min
- Article: Easing and duration 8 min
- Article: Spring animations 7 min
- Article: Motion for feedback, not decoration 8 min
Prototypes with state and logic
- Article: Variables in prototypes 10 min
- Article: Set variable actions 9 min
- Article: Conditional logic 11 min
- Article: Expressions and calculated values 9 min
- Article: A form that reacts to input 10 min
Testing and handing over
- Article: Presenting and sharing prototypes 7 min
- Article: Running usability tests with prototypes 10 min
- Article: Annotating interactions for developers 8 min
- Quiz: Final check 6 min
Requirements
- Working knowledge of Figma frames, auto layout and components
- A Figma account; some features need a paid plan
Description
A static mockup shows what a screen looks like. A good prototype shows how a product behaves, and that is what you need to test ideas with users and to explain interactions to developers. This course teaches Figma prototyping from simple screen links to stateful prototypes that use variables and conditional logic.
What you will build
You will prototype the booking flow of a small travel app: browsing stays, filtering results, opening details, choosing dates and confirming a reservation. The finished prototype includes realistic scrolling, sticky headers, bottom sheets, interactive components and a form that reacts to input.
- Triggers, actions and flows that mirror real navigation
- Overlays for modals, menus and bottom sheets
- Interactive components for toggles, tabs and hover states
- Smart animate and spring easing for natural motion
- Variables, conditionals and multiple actions for stateful prototypes
Why it matters
Prototypes are only useful if they answer a question. Throughout the course we connect each technique to what you want to learn from a test or explain in a handoff, so you know when a simple click through is enough and when extra fidelity pays off.
You should already be comfortable with Figma frames, auto layout and components. Some features, such as advanced variable logic and video in prototypes, depend on your Figma plan; I point these out and show alternatives where possible.
Who this course is for
- Product designers who want more realistic prototypes
- UX researchers who test prototypes with users
- Designers preparing interaction specs for developers
Instructor
Tomas Novak
Product designer teaching Figma the way working design teams use it day to day
- 4.4 instructor rating
- 23 reviews
- 8,650 students
- 3 courses
- Sample
I am a product designer who has worked on web and mobile apps for over a decade, and Figma has been my main tool since it replaced my old desktop setup. I design screens, build component libraries and prepare files that developers can pick up without a meeting.
I teach Figma from the ground up and then into the features that separate tidy files from chaotic ones: auto layout, components and variants, variables and modes, and prototypes that behave like the real product. I care a lot about file structure and naming, because a design file is shared work, not a private sketchbook.
My courses are project based. You build real screens alongside me, and every section ends with a file you can keep and reuse.
Student reviews
Pedro S.
Sample Great overlay patterns
Bottom sheets and swap overlay are explained clearly with good examples. I would like a lesson on desktop menus too.
Kofi B.
Sample Scrolling done right at last
Sticky and fixed positioning used to confuse me. The overflow lesson fixed problems I had for months.
Lina H.
Sample Focus on why, not just how
The first lesson about what a prototype is for changed how I plan tests. I build less and learn more now.
Hamza R.
Sample Some features need a paid plan
Good content, but several lessons rely on features my free plan does not have. The alternatives offered were helpful.
Clara M.
Sample Useful for researchers too
As a researcher, the testing section and dead end advice were very practical.
Ingrid T.
Sample Smart animate naming tip saved me
Learning that layer names drive matching explained every weird dissolve I had ever seen.
Keep exploring
All Figma courses
More in Figma
$39.99
Enroll now