How to annotate a design
To annotate a design, open it in Figma and use the comment tool (C key) to pin notes to specific elements — or export the file and mark it up in Preview on Mac or any image editor. To collect feedback from a client, share a link they can annotate in their browser without a Figma account or any software.
In Figma with the comment tool
Open your design file and press C to switch to the comment tool. Click the exact element you want to annotate — a button, a section, a spacing gap — and type your note. Figma pins the comment to that spot with a numbered marker. Teammates with edit or view access can reply in a thread. One catch designers hit constantly: if you share the file link with a client, they land on a "Request access" wall instead of the design. To avoid this, change the file's sharing setting to "Anyone with the link can view" before sending — otherwise the client can't see a thing.
On a static export (Preview, Snipping Tool, or Draw.io)
Export the design as a PNG or PDF (Figma: File → Export, or select the frame and hit Export in the right panel). On Mac, open the PNG in Preview and press Shift ⌘ A for the Markup Toolbar — arrows, text boxes, shapes. On Windows, open it in Snipping Tool or Paint. For something more structured, paste the image into Draw.io (diagrams.net) and layer annotation callouts on top, numbered and colour-coded. The limitation: annotations are baked flat into the file. Your client can't reply to a specific callout — they'll email back "which arrow near the button did you mean?"
With Figma's Dev Mode annotations (for developer handoff)
Figma's built-in annotation system (Shift + T in the toolbar) is designed for developer handoff, not client review. You select a layer, press Shift + T, and add a text note or a property — spacing, colour token, interaction state. These annotations show in Dev Mode and in Inspect panel. The gotcha: they show up for anyone viewing the file, including clients who weren't meant to see them. If your design file has both client-review comments and dev-handoff annotations, they'll all appear in the same space. Most designers who work with non-technical clients end up exporting a clean version with only the client-facing notes.
When your client is the one annotating
The real breakdown happens when you need the client to mark up the design — circle what they want changed, point to the headline that feels off. Email a PNG and they'll reply "make it bigger" with no indication of which element. Ask them to comment in Figma and they'll hit the login wall, request access, wait for approval, and give up. The workflow that actually works: share a link the client can open in their browser, click the exact element, and leave a pinned note. No account, no extension. You see a thread anchored to the spot, not a guessing game.
If you're collecting client feedback on a design — not just annotating for your own use — the quickest path is a link they can mark up without Figma access. Drop the design export (PNG, PDF, or screenshot) into Drafty, share the URL, and your client clicks the exact spot they mean and pins a note right there. No account required, no file bouncing back over email. Every note lands in one thread, anchored to the element they meant — and you can reply, resolve, and push a revised version to the same link.
Open a live demoQuestions
- How do I annotate a design in Figma?
- Press C to switch to the comment tool, then click any element to pin a note to it. For developer-handoff annotations (spacing, properties, states), use Shift + T in the toolbar to access the annotation system. Comments are visible to anyone with file access; Dev Mode annotations appear in the Inspect panel.
- How do I share a design so my client can annotate it without a Figma account?
- Export the design as a PNG or PDF and share it via a review link — the client opens it in their browser and marks up the exact spot without signing up for anything. If you share a Figma file link directly, clients without an account hit a login wall and can't leave comments.
- What is the difference between design annotations for developers and for clients?
- Developer annotations (in Figma's Dev Mode or Inspect panel) document technical specs: spacing values, colour tokens, interaction states, component variants. Client annotations are feedback on the design — what to change, what's unclear, what doesn't fit the brief. They serve different audiences and ideally live in different places so clients don't wade through specs and developers don't drown in 'make it pop' comments.
- How do I annotate a design for client approval?
- Export the design frame as a PNG or PDF. Share it as a link (not an attachment) so you and the client are looking at the same version. Ask the client to pin their notes to the exact element — not just reply to the email. Tools that let a client click a spot and leave a threaded note remove the 'which bit near the top?' problem before it starts.
- Why do my Figma annotations keep showing up for clients?
- Figma's Dev Mode annotations and the standard comment tool both show to anyone with file access. There's no built-in way to scope comments to a specific audience (e.g. developers only) without a paid plan with branching or separate files. The common workaround is a separate file or a clean export for client review.
- How do I stop getting vague design feedback like 'make it pop'?
- Vague feedback usually comes from clients who can't point at what they mean. When the feedback channel is email, they describe instead of showing — and descriptions are imprecise. Giving them a way to click the exact element and leave a note tied to that spot produces more specific, actionable feedback without extra rounds of clarification.
Keep exploring
Stop emailing files back and forth.
Share one link. They comment on the exact spot — no account, always the current version.