Figma Clickable Prototype

What is a Figma Clickable Prototype?

A Figma clickable prototype is a set of app or website screens designed in Figma (a free browser-based design tool) and linked together so that tapping a button opens the next screen. To the person testing it, it feels like an app. Underneath there is no code and no data, only pictures with hotspots.

You use it to watch real people try to do one job with your product before a developer touches it. The method that goes with it is the think-aloud test: the tester says out loud what they see, expect and feel while they click. Jakob Nielsen of Nielsen Norman Group argued back in 2000 that testing with 5 users uncovers most usability problems, and that several small rounds beat one big study. That is the rhythm this page follows.

When should you use it?

Use it when:

• You are building an app, web tool or online booking flow, and the order of screens matters.
• You know the problem from interviews and now have to decide how the solution works on screen.
• You want to show developers or a co-founder exactly what to build.

Skip it when your product is a service, a physical item or a spreadsheet, where screens are not what customers judge you on. Also skip it when you have not talked to customers yet: a beautiful prototype for the wrong problem is the most expensive kind of wrong. If you are comparing other prototyping tools first, this overview of alternatives to Axure RP lists prices and strengths side by side.

How do you do it, step by step?

1. Pick ONE task to test. Write it as something a customer wants done: “Book a nail trim for your dog next Tuesday after 5 pm.” One task means 4 to 8 screens. A prototype of the whole app takes weeks and tests nothing well.

2. Sketch the screens on paper first. Ten minutes with a pen, one box per screen, arrows between them. Show it to one person and ask them to point where they would tap. Fix the order now, while changes cost nothing.

3. Build the frames in Figma. Create a free account, open a new design file, press F for the Frame tool and pick a phone size from the presets on the right. Use real words and realistic data: your tester’s dog is called Max, the price is €35, the time slots are real. Fake text like “lorem ipsum” makes people comment on the filler instead of the flow.

4. Wire the screens together. Switch to the Prototype tab in the right panel. Select a button, drag the small connection handle onto the screen it should open, and set the interaction to “On tap” and “Navigate to”. Wire only the path for your task plus one or two likely wrong turns, so a lost tester lands somewhere sensible.

5. Share the prototype link. Click Present, then Share prototype, set access to “Anyone” with “can view” and copy the link. Testers open it in a browser and do not need a Figma account. If you change prototype settings later, copy the link again, because the URL changes.

6. Run 5 think-aloud sessions. 20 minutes each, in person or over Google Meet with screen sharing. Script: “I’m testing the design, and you can’t do anything wrong. Please say out loud what you’re thinking while you click. Your task: book a nail trim for Max next Tuesday after 5 pm.” Then stay quiet. If they ask “Should I click here?”, answer: “What would you do if I weren’t here?”

7. Score each session in a sheet. One row per tester: finished the task (yes, with help, no), time taken, where they hesitated longer than 5 seconds, exact quotes. Fix the screens where 2 or more people struggled, then run 5 new testers on the new version.

What does a worked example look like?

Say Inés wants to build a booking app for mobile dog groomers who travel to clients’ homes. She designs 6 screens for the task “book a nail trim for Max next Tuesday after 5 pm”: home, choose service, add pet, choose time, confirm, done.

Round 1 with 5 dog owners from a local park group: 2 finish without help, 3 get stuck because “add pet” comes before the time slots and they want to see availability first. One tester says “I’d give up here, I just want to know if she’s free.” Inés moves time slots to the second screen and makes pet details optional until confirmation.

Round 2 with 5 new testers: 4 finish without help in under 90 seconds. The new sticking point is the price, which only appears on the confirm screen. She adds it to the service list. Two rounds, 10 people and 5 days, and she hands a developer a flow that has already failed and been fixed twice.

Which free tools help?

What mistakes should you avoid?

• Helping the tester. The moment you explain a button, you have fixed the design in that session and nowhere else. Stay quiet and take notes.
• Asking “Do you like it?” Opinions about colours are noise. Watch whether they finish the task.
• Polishing before testing. Grey boxes and real words are enough for round 1. Visual polish comes after the flow works.
• Testing with friends who know the idea. They fill gaps from memory. Recruit people who match your customer and have never heard your pitch.
• One big round of 15. Three rounds of 5, with fixes in between, find more problems.

How do you know it worked?

Our rule of thumb: the prototype is ready to hand to a developer when 4 of 5 new testers finish the main task without help, and nobody hesitates longer than 10 seconds on the same screen. A second signal: testers ask “When can I use this?” without prompting.

No-go: after three rounds most testers still fail the task. That points to a flow that fights how people think about the job, so go back to your interview notes before redrawing screens.

What should you do next?

Record a walkthrough of the finished prototype and use it for an explainer video test to measure demand at scale. If the screens work but you need to see whether people come back, put a human behind them with a Wizard of Oz test. To see where people struggle on the real product later, add heatmaps and session recordings. The F/MS startup game helps you plan rounds like these with an AI co-founder.

FAQ

Is Figma free for prototyping?

Yes. The free Starter plan lets you design screens, link them into a prototype and share a view link. Paid plans add team features and advanced options you do not need for a first test.

How many users do you need to test a prototype?

Five per round is enough to find the biggest problems, following Jakob Nielsen’s advice. Run two or three rounds of five with fixes in between, rather than one large round.

Can testers use a Figma prototype on their phone?

Yes. Send the prototype link and they can open it in a mobile browser, or in the Figma mobile app. Design your frames at phone size so the screens fit without zooming.

Updated 26 October 2026 · Written by the Fe/male Switch team

Mark this method as done