Prototype

A prototype is where a static design finally has to justify itself. The screen below is the annotated invoice detail from the Ledger prototype, with the click hotspots marked and interaction notes running down the side. Each red-outlined region is a tappable area, each numbered dot pairs with a note in the column.

What a prototype resolves

Wireframes settle layout. Visual design settles brand. Prototypes settle behaviour. The hotspots on the screen show which parts of the interface are actually reachable in the current version, and the notes column tells engineering what happens when the user gets there.

The notation on the right

Every hotspot on the left is a numbered dot. The dot corresponds to a block in the notes column. Each note answers three questions: what opens, what state changes, and where the user lands after. Vague notes like "goes to modal" get rejected during review because they leave too much for engineering to guess. Specific notes let a developer build without a follow-up meeting.

Why the prototype is not the design file

The design file is the source of truth for pixels. The prototype is the source of truth for flow. Keeping the two separate stops the prototype from turning into a graveyard of half-finished screens whenever the visual design iterates. The prototype references frames from the design file, but its structure lives in a dedicated FigJam board.

The one interaction that always gets missed

Empty state. Prototype reviews tend to focus on the loaded state because that is what the wireframe drew. The prototype forces the design to answer what happens when there are no invoices, when the search returns nothing, when the network fails. Every prototype I ship has at least three empty and error states drawn alongside the primary screens.

Design decisions

• Hotspots visible in the artifact. Dashed red outlines make review conversations concrete. Nobody argues about a click target once the target has a box around it.
• Dark notes column against light screen. High contrast between the interface being reviewed and the meta commentary about it.
• Numbered pairing. Dots on the screen match numbers in the notes. No arrows crossing the artifact.
• Link to the live prototype. The static PDF is a reference. The Figma prototype is the interactive artifact.

The stack

Tool

Figma prototype mode for interaction. FigJam for the notes overlay.

Testing

Maze for unmoderated usability, five participants per iteration.

Handoff

Live prototype URL in the engineering ticket plus a static annotated PDF.