How to markup a mockup
To markup a mockup, open it in a tool that supports annotation — Figma's built-in comment tool, a screenshot annotator, or a review link — and click the element you want to flag. Type your note, draw an arrow, or pin a comment. To have a client mark up a mockup without sending it back as an email attachment, share a link they can annotate in their browser with no account or download.
Annotate directly in Figma or Sketch
In Figma, press C to enter comment mode, click any element on the canvas, and type a note. It threads, resolves, and closes — good for back-and-forth with teammates who already have an account. One catch: a client with no Figma account hits a sign-up wall before they can type anything. Guest commenting has been a top community request since 2021 and still isn't available. For client-facing markup, you need a different path.
Export a frame and annotate the screenshot
Export the mockup as a PNG or JPEG, open it in CleanShot X (Mac), Snagit, or even Preview, draw arrows and text boxes on the specific areas, and send the annotated image. Works for one-pass feedback. Falls apart fast when you get the file back with no markup and a one-line reply — 'looks good but change the header' — pointing at nothing. You now have three versions of the PNG, each with different marks, and no thread connecting them.
Paste into a Google Doc or Notion page
Drop the exported frame into a Google Doc, leave comments anchored to the image, and share it. The client can reply in-thread, which keeps a record. The limitation is positional accuracy — a comment on an image in Google Docs says 'on the image', not 'on the button in the lower-left corner'. When the mockup updates, the whole image gets replaced and the comments detach. Good for low-stakes work; fragile for anything with multiple revision rounds.
Share a review link they annotate in the browser
Upload the mockup to a review tool — Markup.io, Pastel, or a similar service — and share the link. The client opens it on their phone or laptop and clicks the exact element they mean, pinning a note to it. No download, no account on their end. You see every note in one place and can reply in thread. Most tools require a subscription for more than a couple of projects; a few offer a free tier for small volumes.
If you're already sharing your mockup as a link and want the client to pin notes to the exact element — not describe it in an email — drop the exported PNG or HTML into Drafty and share the canvas link. They click the spot, leave a note anchored to it, and you reply in the same thread. No account on their end, no back-and-forth about 'which bit near the top'. When you push a revised version to the same URL, the old thread stays so you can close the loop.
Open a live demoQuestions
- What does it mean to markup a mockup?
- Marking up a mockup means adding annotations, arrows, comments, or written notes directly on the design file to explain what needs to change, why, or how it should look. It's how designers and clients communicate about specific elements without relying on vague email descriptions.
- Can a client markup a mockup without making an account?
- Not in Figma or Sketch — both require a login to comment. Tools designed for client review (like review link services) do allow guest annotation: the client opens the link in their browser and pins notes without signing up.
- What's the difference between a markup and a mockup?
- A mockup is the visual design itself — a static or interactive representation of what the finished product will look like. A markup is the layer of annotations and feedback added on top of that design to direct changes. You mark up a mockup.
- How do I collect client feedback on a mockup in one place?
- Share a single link to the mockup rather than exporting and emailing the file. When all reviewers open the same URL and pin their notes there, feedback doesn't get scattered across email threads, Slack messages, and annotated image files.
- What is the best free tool to markup a mockup?
- For solo self-markup, CleanShot X (Mac) or Greenshot (Windows) add arrows and text to an exported image quickly. For client-facing review, most purpose-built tools have limited free tiers — a review link shared from Drafty, Markup.io, or Pastel lets a client annotate without an account.
- Why do clients send vague mockup feedback?
- Because they're reacting to an image in an email with no way to point at a specific element. 'The bit near the top' is what you get when the review tool doesn't let them click the actual button. Give them a link where they can click exactly what they mean, and the feedback gets specific.
Keep exploring
Stop emailing files back and forth.
Share one link. They comment on the exact spot — no account, always the current version.