A static design shows what a screen looks like. A prototype shows what happens when someone taps a button — which screen appears next, how it transitions in. Figma builds prototypes directly on top of the same Frames used for design, in the Prototype tab next to Design.
With the Prototype tab open, select any object and a small circular connection node appears on its edge. Drag from that node to another Frame, and Figma draws an arrow between them — that's the entire mechanic. Clicking the source object in a live preview now navigates to the target Frame.
Each connection can be configured with a trigger ("On click," "On drag," "While hovering") and a transition ("Instant," "Dissolve," "Slide in from the right"), matching how the interface should actually feel to use rather than just how it should look.
The play button in the top-right corner opens a full-screen preview that behaves like the real, finished interface — every connection is clickable, every transition plays. This is the single fastest way to test whether a flow actually makes sense before any code exists.
A developer working from a finished design doesn't need a mockup image — they need exact numbers. Figma's Inspect panel (visible to anyone with access to the file, developer or not) shows the precise CSS for any selected layer: padding, colors as hex codes, font sizes, and border radii, ready to copy directly into code.
Why the earlier lessons matter here
This is the payoff of everything earlier in this course — a design built with real Auto Layout, named Color/Effect styles, and a genuine type scale hands off to a developer as clean, predictable CSS. A design built freehand, with one-off sizes and colors everywhere, hands off as guesswork.