drafty

How to markup a design for client feedback

Quick answer

To markup a design for client feedback, export it as a PNG or PDF, open it in Figma, Preview on Mac, or any annotation tool, and draw arrows and text callouts on the exact spots that need attention — then share the annotated file. If you want your client to markup the design themselves, the most reliable method is a shared link they open in a browser and click directly, without a Figma account or any software.

Step 1

Annotate the export yourself in Figma or Preview

Export the design as a PNG. In Figma, create a new frame, paste the image, and draw annotation arrows using the line tool with an arrowhead — then add text labels next to each arrow. This is the redline method: you document exactly what needs to change before the client sees it. Preview on Mac (Shift ⌘ A) works too: callout bubbles, arrows, and text notes bake into the file. Good for marking up your own draft before a call, or for documenting revision instructions to a developer. The limit: if you're sending it to a client and expecting their markup back, you're asking them to annotate an annotated image — which usually means they email back a paragraph describing which arrow they're responding to.

Step 2

Mark it up in a dedicated annotation tool

Tools like Zeplin, Figma's Dev Mode, and Sketch's inspect panel are built for design-to-developer handoff — spacing, font stacks, hex values, exported assets. If 'markup a design' means getting specs to your developer, Figma's built-in annotation layer (under Plugins → Redlines, or the native Annotation tool in Dev Mode) generates the callouts for you with measured distances and colour tokens. These tools assume the recipient has a Figma or Zeplin account. They work well for the dev handoff case. They are the wrong tool for the client approval case: most clients will click the Figma link, hit the login screen, and stop there.

Step 3

Share a link the client clicks to markup directly

The failure mode designers run into most often: you send a Figma share link, the client says 'I can't comment, it's asking me to log in.' Or you email a PNG, they screenshot their screenshot and circle something in iMessage, then send a 600px image. Or you get a voice note. The method that avoids all of this is a review link that renders the design in the browser — your client clicks the exact button, the heading, the colour they hate — and pins a note right there. No Figma account. No downloaded file. The note arrives anchored to the element they clicked. On their laptop or phone, in thirty seconds.

Step 4

For client round-trips: keep every version on the same link

Most designers go through two or three revision rounds per project. The thing that compounds the confusion isn't round one — it's round two, when the client is responding to a markup of a markup. You send v1, they annotate, you fix, you email v2. Now they're not sure whether their original notes were addressed. The cleanest workflow: one link, versioned. The client's notes stay anchored to the element they clicked on v1. You push v2 to the same link. They see what changed in place. The thread stays attached. Nothing gets lost in an email subject line that read 'Re: Re: Re: Final logo REVISED (2).png'.

The faster way

If your client needs to markup the design — not you — skip the Figma-share-login loop. Drop the design into Drafty and share the link. They click the exact element they mean and pin a note, right in their browser, no account. Their feedback arrives anchored to the spot they clicked, in a thread you can reply to and resolve. Push a revised version to the same link and they see the update in place. No re-emailed PNGs, no 'which button did you mean?', no v2_FINAL_revised_USE_THIS.png.

Open a live demo

Questions

How do I let a client markup my design without a Figma account?
Export the design as a PNG or PDF, then share it through a link-based review tool. Your client opens the link in any browser, clicks the element they want to comment on, and pins a note — no account, no install. This is the approach that actually works for non-designer clients who have never used Figma and do not intend to.
What does it mean to markup a design?
Marking up a design means adding visual annotations — arrows, callout labels, circles, text notes — to flag specific elements that need review or revision. It can refer to you marking up your own draft before a client call, your client marking up your design to show what they want changed, or a developer annotating a mockup with specs. The word is borrowed from print proofing, where physical copies were marked up with coloured pens before going to press.
What's the difference between design markup and design annotation?
In practice they mean the same thing. 'Markup' often implies visual marks — arrows, circles, callout bubbles — drawn on top of the design. 'Annotation' can mean the same visual layer or a more structured note attached to a specific element. Figma's native feature is called Annotations; the print/engineering world calls it markup or redlines. For client feedback purposes, the distinction does not matter — what matters is whether the note is anchored to the element they mean.
Can my client markup a Figma design on their phone?
Not reliably. Figma's mobile app requires an account and is designed for designers, not clients. A browser-based review link is the approach that works on a client's iPhone: they tap the element they mean, leave a note in the browser, done. No app download, no login.
How do I markup a design export without Figma?
Export the design as a PNG or PDF. On Mac, Preview's Markup Toolbar (Shift ⌘ A) gives you callout bubbles, arrows, shapes, and text notes — free, built in, and the annotations bake into the file. On Windows, Microsoft Edge opens PNGs and PDFs with a basic drawing tool. For anything going back to a designer or developer, a callout arrow with a text label is cleaner than freehand circles — it's easier to read and less likely to be ambiguous about which element you mean.
How do I track which markup feedback has been addressed?
A shared link where all notes land in one thread is the only approach that lets you track resolution. Email markup — annotated images sent back and forth — has no resolution state: there is no way to mark a note 'done' without going through the email chain and manually reconciling it against the revised file. A threaded review tool lets you resolve each note when the change is pushed, so both you and the client can see what's been addressed.

Keep exploring

Stop emailing files back and forth.

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