drafty

How to annotate a mockup

Quick answer

To annotate a mockup, export it as a PNG or PDF and mark it up in a screenshot tool or Acrobat, or share a Figma link and ask your client to comment directly. The catch: Figma requires clients to create an account, and emailed image markups breed version chaos fast. A shared review link they can annotate in any browser — with no account — solves both problems.

Step 1

Mark up a PNG export with a screenshot tool

Export the frame from Figma (⌘ Shift E → PNG at 2x) or from Sketch or Framer. Open the PNG in macOS Preview and press Shift ⌘ A for the markup toolbar — arrows, text callouts, and circles work well for flagging specific elements. Windows users: open it in the Snipping Tool and hit Edit. Annotating a flat image is fast for one-pass feedback, but every revision means exporting a fresh file and re-annotating — the version trail gets messy after round two.

Step 2

Export as PDF and annotate with Acrobat or Preview

From Figma: File → Save As → PDF. From Sketch: File → Export → PDF. In macOS Preview, press Shift ⌘ A for the markup toolbar — highlights, callouts, and sticky notes transfer cleanly. In Adobe Acrobat, open the Comment panel and click anywhere to pin a note. PDF annotations travel with the file so clients open your marked-up version in any viewer. The limit: clients can't pin their own notes back to you without annotation software of their own.

Step 3

Share a Figma view link and ask for comments

In Figma, click Share → 'Can view' → Copy link. Anyone can open it in a browser. To leave a comment, they tap the speech bubble icon — but first they must log in or create a Figma account. This has been an open complaint since 2021 and is still the case. If your client is already in Figma, this is the most faithful view (live layers, not a flat export). If they're not, the account gate is real friction on a one-off project.

Step 4

Share a review link they annotate in any browser

The cleanest workflow for client annotation: share a link they open in any browser, on any device — desktop or phone — and click the exact element they mean to flag. No Figma account, no PDF reader, no emailed screenshots bouncing between inboxes. Comments land pinned to the spot they clicked, in a single thread you can reply to and resolve. This is the approach used by tools like Markup.io and Drafty. The tradeoff: your client isn't looking at the live Figma file, so if you need them to inspect specs or toggle between component states, a Figma view link is the right call instead.

The faster way

If the goal is to get your client's notes — not your own — the link-based approach is lowest friction. Drop your exported design into Drafty, share the URL, and your client clicks the exact element they mean and pins a note right there. No Figma account, no downloaded PDF, no screenshot in an email. Every note lands anchored to the spot, in one thread you can reply to and mark resolved. Designers on one-off projects use this instead of Figma comments specifically because it skips the 'please create an account' step.

Open a live demo

Questions

Can my client annotate a mockup without creating an account?
Not in Figma — Figma requires a login to leave comments, and this has been a persistent complaint from designers since 2021. Flat-file approaches (emailed PNG, PDF) also require clients to have markup software. Tools built specifically for design review, including Markup.io and Drafty, let clients click and comment directly on a shared link with no account.
What's the best way to annotate a Figma mockup for a client?
If your client is inside Figma and won't mind signing in, a view link with comments is the most direct path. If they're not a designer — or it's a one-off project — export as PNG or PDF and mark it up yourself before sharing, or use a link-based review tool where they can click the spot and pin a note without needing any accounts.
How do I annotate a mockup on my phone?
On iPhone, share the exported PNG and open it in Markup (tap the pencil icon in the share sheet). On Android, open the image in Google Photos and use the pen tool to draw on it. For sharing annotated notes with a client from mobile, a review link is easier — they tap the element, type the note, done.
How do I keep all the mockup annotations in one place?
Email attachments are the main culprit here — each person downloads the file, marks it up in their own software, and sends back a different copy. A shared link means one artifact, all annotations visible to everyone, no reconciling multiple files. Most dedicated design review tools work this way.
What is the difference between a redline and an annotation on a mockup?
Redlining is the older term for annotating mockups with measurements, spacing values, and hex codes intended for developers during handoff. Annotations in a client-review context are more general — text notes, callout bubbles, and circles flagging what should change. Redlines go to the dev; client annotations tell you what to fix before handoff.
Can I annotate a mockup PDF and send it back?
Yes — export the Figma frame as a PDF, annotate it in Preview (Mac) or Acrobat, and email it back. The client sees your notes embedded in the file. The limitation is that clients can't pin their own notes unless they have annotation software, which is why many designers prefer a shared link where client comments come back to you pinned to the design.

Keep exploring

Stop emailing files back and forth.

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