How to create a clickable prototype in Figma
Introduction
Static screens can't communicate flow or feel. Prototyping brings your design to life, allowing stakeholders to click through the app as if it were real.
This guide shows you how to connect your frames to create a basic navigation flow.
Prerequisites
- •At least two frames (screens)
- •Buttons or link elements
Guide Steps
Switch to Prototype tab
Click the 'Prototype' tab in the right sidebar. You are now in connection mode.
Connect elements
Hover over a button or layer. Click and drag the blue circle handle that appears and drop it onto the destination frame. A blue arrow connection line will be created.
Set interaction details
In the interaction menu that pops up, set the Trigger to 'On click' and the Action to 'Navigate to'. Choose the destination frame if not already selected.
Play the prototype
Click the 'Play' icon (triangle) in the top toolbar. A new tab will open where you can interact with your design. Click the hotspot you created to verify it moves to the next screen.
Common Mistakes to Avoid
- ×Connecting the entire frame instead of the specific button, making the whole screen clickable.
- ×Forgetting to set a 'Back' interaction on the destination screen.
Pro-Level Design Tips & Workflows
💡 Asset Export: Hold the Option (Mac) or Alt (Windows) key while choosing resolution multipliers to export layers in exact dimensions.
💡 Vector Grid Snapping: Enable 'Snap to pixel grid' (Shift + Cmd + ') to prevent decimal positioning values which cause asset export pixelation.
Practical UI Example & Screenshot Checklist
Here is a real-world scenario where you will apply these exact layout rules:
Build a container frame with a logo and menu links. Set Auto Layout horizontal direction, padding margins to 24px, and select 'Space between' alignment to keep elements pinned to the margins.
- ✓ Inspect the right-hand design variables sidebar.
- ✓ Verify child width dropdown is set to
Fill container. - ✓ Drag the parent frame width to verify elements adapt automatically.
Glossary of Core Design Terms
A sizing constraint instructing the container frame boundaries to fit around child layers automatically.
A responsive instruction that stretches child layers to consume the remaining horizontal space of its parent flex frame.
The primary component template source. Updates to the master component propagate across all visual instances.
Figma Templates & Resources
Figma Starter Playground (.fig)
Includes pre-built design grids, responsive card examples, and button variant frames.