Stop 05 · Wireframing & PrototypingTopics · 3/9

Interactive Prototyping

In short

Static screens can't show how an app feels. A clickable prototype lets people tap through it like the real thing, so you can test the flow before a single line of code exists.

Connecting static screens with clickable interactions to simulate how the real product would behave — letting you (and users, in testing) experience the flow before any code is written.

The jaadu opens a door in a bright, furnished sample flat, looking around happily.

Think of it like this

The builder's sample flat

Before a building is finished, the builder shows a sample flat. You can walk in, open doors and check the kitchen, but the taps aren't connected yet. A prototype works the same: real enough to try, not built yet.

Watch it happen

What happens when you tap in a prototype

Tester

Home frame

taps 'Log in'

1/4The tester taps a button. In Figma, that button has an 'On tap' interaction set.

The big ideas

What you need to know

Hotspots and links

Each tappable element links to another frame. That's all a basic prototype is.

Prototype the flow you'll test

You don't need every screen linked. Wire up the tasks you plan to test.

Test on a phone

The Figma mobile app can play prototypes, so testers use a real phone instead of a laptop.

Save yourself the pain

Common mistakes

Oops

Linking only the happy path, so any wrong tap does nothing.

Do this instead

Link the likely wrong turns too, or at least a back button, so testers don't get stuck.

Oops

Spending days on animations before testing the flow.

Do this instead

Get basic links working and test first. Polish transitions later.

Your mission

Build a three-screen prototype

~35 min

Quick check

What's the main reason to make an interactive prototype before coding?

Go deeper

1Link 3-4 screens together into a clickable prototype simulating a real user flow.
2Test your prototype on someone unfamiliar with it and watch where they get confused.
3Learn why testing a prototype is far cheaper than discovering a flaw after development.