A static set of screens can show what an interface looks like, but it cannot show how it behaves. Figma's Prototype tab is where you turn frames and components into something a person can actually click through: you select a layer, drag a connection to a destination, and then specify the trigger (what the user does), the action (what the prototype does in response), and the animation that carries the change on screen. Once those connections exist, you can run the file in Presentation mode and share a link so reviewers and usability-test participants can explore the flow on their own.
In this course, prototyping is how your design becomes testable. Evaluation methods you study later — heuristic walkthroughs, think-aloud sessions, task-based testing — all depend on a prototype that responds realistically enough that users forget they are looking at a mockup. Details matter here: a modal that appears over its parent screen, a list that scrolls while the navigation bar stays fixed, a button that visibly changes on hover. These are the affordances and feedback cues users rely on, and in Figma you have to wire them deliberately.
The three videos below come from Figma's own channel and move from building reusable interactive components, to timing-based transitions that run without user input, to overlay behavior for things like modals and expanding thumbnails. As you watch, pay attention to which trigger each presenter chooses and why, how the animation type (instant, dissolve, smart animate, move in) changes the perceived meaning of a transition, and how a small amount of setup in a component can remove dozens of repetitive connections from your file. Try to rebuild at least one example yourself rather than only watching.
An official Figma tutorial on interactive components, the feature that lets you define interactions between variants of a single component — for example, a default and hover state of a button, or a checked and unchecked toggle. Based on the title and description, it walks through setting up variants and wiring triggers such as hover, click, or while-pressed so the behavior travels with every instance you place. The result is that micro-interactions are defined once rather than reconnected on every screen.
It is produced by Figma itself, so the workflow shown matches the actual Prototype panel, and it directly supports the Triggers and Actions subtopic while showing the component-level approach that keeps a large prototype maintainable.
A short Figma tip focused on the "after delay" and "trigger after delay" interactions, which fire automatically once a frame has been visible for a set amount of time instead of waiting for user input. It demonstrates how to use these timed interactions to build automatic transitions — the kind of thing you need for splash screens, loading states, toast notifications, or looping demos.
It fills a gap that click-based tutorials usually skip, giving you a concrete tool for simulating system-initiated feedback, and its brevity makes it easy to apply immediately to the Transitions and Animation subtopic.
This intermediate-level Figma tip covers prototyping overlay transitions, using expanding thumbnails as the worked example and combining overlays with interactive components. Expect coverage of how an overlay is positioned relative to its trigger, how it animates in and out, and how to close it — the same mechanics behind modals, dialogs, dropdowns, and lightboxes.
It maps closely onto the Overlays and Modal Patterns subtopic and shows overlays as a layered behavior rather than a separate screen, which is the distinction students most often get wrong in their own files.
Together these videos take you from wiring individual connections to designing reusable interactive behavior, which is what MO3 asks for: demonstrated use of components and interactive flows to simulate realistic interaction. The interactive components tutorial and the overlay transitions tip give you the mechanics needed to build a clickable, navigable prototype of your own interface project (MO1), at whatever fidelity your current screens support. The timing and animation choices discussed across all three — how feedback appears, how consistently states respond, how an overlay signals that it sits above the page — are practical applications of visual hierarchy, consistency, and affordance in a working prototype (MO2). Watch them in order, then rebuild the patterns in your project file before sharing a preview link for feedback.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.