Figma Prototyping cheat sheet

Flows, starting points, and how much of a design is worth wiring up.

Figma2 rules, updated 9 Oct 2026Verified 9 Oct 2026

Viewport: All

Viewport references are useful starting points. Design breakpoints should respond to the content, not specific device models. Choosing a viewport changes what is emphasised; nothing is hidden.

Flows

Safe starting point

One flow per task

Flows and starting points

Craft guidanceShortcut editorial, reviewed 9 Oct 2026

Applies to All viewports

A flow is one path through your frames with a named place to start. Make one for each task you want someone to try, not one prototype of everything.

Why?

A test participant or stakeholder needs to start in the right place and reach an end. A flow per task makes each one a link you can send.

Common mistakes (3)

One enormous prototype with no clear start.
Flows named Flow 1, Flow 2.
Dead ends where a tap does nothing and the participant thinks it is broken.

Official guidanceFigma

Figma
A flow is the network of frames and connections in a single page. A prototype can map a whole journey or focus on one segment through its own flow.
Figma Help, Guide to prototyping(opens in a new tab)Tool documentation
Figma
Figma creates a flow starting point when you add the first connection between two frames.
Figma Help, Guide to prototyping(opens in a new tab)Tool documentation
Figma
You can share the entire prototype or copy the link to a flow starting point.
Figma Help, Guide to prototyping(opens in a new tab)Tool documentation
Figma
Supported on any team or plan. Anyone with can-view access can play prototypes back in Presentation view.
Figma Help, Guide to prototyping(opens in a new tab)Tool documentation

Scope

How much to prototype

Craft guidanceShortcut editorial, reviewed 9 Oct 2026

Applies to All viewports

Prototype what you need an answer about, and nothing else. A prototype is a question put to a user or a stakeholder.

Clickable: Does the flow make sense?. Plain taps between frames. Enough for most usability tests.
Interactive: Does the component feel right?. Hover, press and variants on one component, built once in the component.
Detailed: Does the motion matter?. Timing and transitions, only where the motion is the thing being decided.

Why?

Every connection you add has to be maintained when the design changes. A prototype of everything is out of date within a week.

Common mistakes (3)

Polishing transitions before the flow has been tested.
Testing one fixed frame size and calling the design responsive.
Using a prototype to show developers behaviour that an annotation would explain better.

Senior designer note“If nobody is going to click it, do not wire it.”

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Flows

Safe starting point

One flow per task

Flows and starting points

Craft guidanceShortcut editorial, reviewed 9 Oct 2026

Applies to All viewports

A flow is one path through your frames with a named place to start. Make one for each task you want someone to try, not one prototype of everything.

Why?

A test participant or stakeholder needs to start in the right place and reach an end. A flow per task makes each one a link you can send.

Common mistakes (3)

One enormous prototype with no clear start.
Flows named Flow 1, Flow 2.
Dead ends where a tap does nothing and the participant thinks it is broken.

Official guidanceFigma

Figma
A flow is the network of frames and connections in a single page. A prototype can map a whole journey or focus on one segment through its own flow.
Figma Help, Guide to prototyping(opens in a new tab)Tool documentation
Figma
Figma creates a flow starting point when you add the first connection between two frames.
Figma Help, Guide to prototyping(opens in a new tab)Tool documentation
Figma
You can share the entire prototype or copy the link to a flow starting point.
Figma Help, Guide to prototyping(opens in a new tab)Tool documentation
Figma
Supported on any team or plan. Anyone with can-view access can play prototypes back in Presentation view.
Figma Help, Guide to prototyping(opens in a new tab)Tool documentation

Scope

How much to prototype

Craft guidanceShortcut editorial, reviewed 9 Oct 2026

Applies to All viewports

Prototype what you need an answer about, and nothing else. A prototype is a question put to a user or a stakeholder.

Clickable: Does the flow make sense?. Plain taps between frames. Enough for most usability tests.
Interactive: Does the component feel right?. Hover, press and variants on one component, built once in the component.
Detailed: Does the motion matter?. Timing and transitions, only where the motion is the thing being decided.

Why?

Every connection you add has to be maintained when the design changes. A prototype of everything is out of date within a week.

Common mistakes (3)

Polishing transitions before the flow has been tested.
Testing one fixed frame size and calling the design responsive.
Using a prototype to show developers behaviour that an annotation would explain better.

Senior designer note“If nobody is going to click it, do not wire it.”

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Figma Prototyping cheat sheet

Filters

Flows

Flows and starting points

Scope

How much to prototype

Figma Prototyping cheat sheet

Filters

Flows

Flows and starting points

Scope

How much to prototype