What should wireframe annotations include?

Annotate anything that isn't obvious from the visual: interactions and micro-interactions, conditional states (empty, loading, error), character limits on input fields, what a button does versus what it looks like, copy rules, and accessibility requirements. Skip self-explanatory elements — a 'Submit' button doesn't need a note that says 'submits the form.'

How do you annotate a wireframe in Figma?

Press C to switch to comment mode, click the element you want to annotate, and type your note. Comments are attached to the frame and visible to anyone with the file link — but reviewers need a Figma account to leave comments of their own. For developer handoff, many teams use a dedicated annotation plugin like Annotate It or EightShapes Specs to generate a numbered callout layer alongside the design.

What is the difference between a wireframe annotation and a wireframe comment?

An annotation is a note you add as the designer to explain intent — it's part of the deliverable, meant for developers or stakeholders reading the spec. A comment is a collaborative note left during review, expected to be replied to and resolved. Figma's comment layer is built for the latter; numbered callouts exported in a PDF are the former. Most wireframe projects need both at different stages.

Do clients need an account to annotate a wireframe?

In Figma, yes — a Figma account is required to leave a comment on a shared file. This is the most common friction point in the designer-to-client review loop. The workaround is to export the wireframe and share it through a tool that supports guest commenting on a public link, so the client can click and annotate without signing up for anything.

How do you share an annotated wireframe with a client?

For a read-only handoff, export as PDF and email it — but this creates version confusion fast. For interactive review, share a link the client can open in a browser and mark up directly. The client's notes come back pinned to the element they clicked, not paraphrased in a reply email. When you update the wireframe, the same link shows the latest version.

What tools are used for wireframe annotations?

Designer-side: Figma's native comment mode, the EightShapes Specs or Annotate It plugins for callout generation, and Balsamiq's built-in note element. For client review: any tool that generates a shareable link with guest commenting — so the client doesn't need a design account. For PDF export: Preview on Mac (free), Edge on Windows (free), or Adobe Acrobat if you need a formal annotated document.

drafty

How to annotate a wireframe

Quick answer

To annotate a wireframe, add numbered callouts or pinned notes to each element that needs explanation — interactions, edge cases, copy rules — using your design tool's comment or sticky-note feature. For client review, export the wireframe and share a link they can mark up without a Figma account or any software installed.

Step 1

Add numbered callouts for developers

Place a small numbered circle next to each element that needs explanation, then write the corresponding notes in a legend beside the frame. Works in Figma (text layer + circle shape), Balsamiq (built-in note element), or anything you can export as PDF. Number by reading order — top-left to bottom-right — so a developer can scan without hunting. Annotate what isn't obvious visually: what happens on tap, what a field validates, what the empty state shows. Skip self-evident elements; a label that says 'Button' doesn't add anything.

Step 2

Use your design tool's native comment layer

Figma, Sketch, and Adobe XD each have a comment mode that pins notes to any element without touching the design layer. In Figma: press C, click the element, type. Comments hide in presentation mode so they don't clutter the client's view, and your developer can reply, resolve, or reopen without leaving the file. The catch: anyone commenting needs a Figma account — which rules out most clients.

Step 3

Export to PDF and annotate with a markup tool

Export the wireframe as a PDF. On Mac, open in Preview and press Shift ⌘ A for the Markup Toolbar — text notes, arrows, highlights. On Windows, open in Edge and use the built-in annotation bar. Both are free. Good for a formal sign-off document that travels outside your design tool. The downside: you end up with annotated-wireframe-v3-final-FINAL.pdf in your inbox within two rounds.

Step 4

Share a link for client comments

Most clients won't read numbered callout legends. They want to point at the thing they mean and say what they think. The most practical approach for client review: export the wireframe as an image or PDF, share it as a link the client can open in a browser, and let them click the exact element and leave a note. No Figma account, no downloaded file, no red-circle-pasted-into-email. Every note lands pinned to the spot they clicked, in a thread you can reply to and resolve. The client sees your updated version on the same URL.

The faster way

If you're annotating a wireframe so a client can give you feedback — not so a developer can build it — the callout legend approach often backfires. Clients don't read numbered lists; they want to click the thing they mean. Drop the wireframe export into Drafty and share the link. Your client clicks any element and leaves a note pinned right there, no account. You see every comment in one thread, reply, and push a revised version to the same URL. The developer callout doc and the client review link are separate jobs.

Open a live demo

Questions

What should wireframe annotations include?: Annotate anything that isn't obvious from the visual: interactions and micro-interactions, conditional states (empty, loading, error), character limits on input fields, what a button does versus what it looks like, copy rules, and accessibility requirements. Skip self-explanatory elements — a 'Submit' button doesn't need a note that says 'submits the form.'
How do you annotate a wireframe in Figma?: Press C to switch to comment mode, click the element you want to annotate, and type your note. Comments are attached to the frame and visible to anyone with the file link — but reviewers need a Figma account to leave comments of their own. For developer handoff, many teams use a dedicated annotation plugin like Annotate It or EightShapes Specs to generate a numbered callout layer alongside the design.
What is the difference between a wireframe annotation and a wireframe comment?: An annotation is a note you add as the designer to explain intent — it's part of the deliverable, meant for developers or stakeholders reading the spec. A comment is a collaborative note left during review, expected to be replied to and resolved. Figma's comment layer is built for the latter; numbered callouts exported in a PDF are the former. Most wireframe projects need both at different stages.
Do clients need an account to annotate a wireframe?: In Figma, yes — a Figma account is required to leave a comment on a shared file. This is the most common friction point in the designer-to-client review loop. The workaround is to export the wireframe and share it through a tool that supports guest commenting on a public link, so the client can click and annotate without signing up for anything.
How do you share an annotated wireframe with a client?: For a read-only handoff, export as PDF and email it — but this creates version confusion fast. For interactive review, share a link the client can open in a browser and mark up directly. The client's notes come back pinned to the element they clicked, not paraphrased in a reply email. When you update the wireframe, the same link shows the latest version.
What tools are used for wireframe annotations?: Designer-side: Figma's native comment mode, the EightShapes Specs or Annotate It plugins for callout generation, and Balsamiq's built-in note element. For client review: any tool that generates a shareable link with guest commenting — so the client doesn't need a design account. For PDF export: Preview on Mac (free), Edge on Windows (free), or Adobe Acrobat if you need a formal annotated document.

Keep exploring

How to annotate a PDF Figma feedback without an account Design feedback tool BugHerd alternative

Stop emailing files back and forth.

Share one link. They comment on the exact spot — no account, always the current version.

Open a live demo