How do I annotate an email design in Figma?

Press C to switch to the comment tool, then click any element in the email frame to pin a note to it. Teammates with view or edit access can reply in a thread. If you want a client without a Figma account to comment, they'll hit a login wall — share the exported PNG or screenshot as a review link instead.

How do I share an email design so a client can annotate it without a Figma account?

Export the design frame as a PNG or PDF, then share it via a link the client opens in their browser. They mark up the exact spot without signing up for anything. Sharing a file link from Figma directly sends clients to a 'Request access' page — they can't comment unless they have a Figma account.

What is the difference between email design annotations and Gmail Promotions annotations?

Gmail Promotions annotations are structured JSON-LD schema markup you add to an email's HTML so Gmail surfaces a deal badge, promo code, or image carousel in the inbox preview — they're for bulk marketing sends. Email design annotations are visual markup you add to a design file or screenshot to flag copy changes, layout issues, or styling feedback before the email is built or sent. They serve completely different purposes.

How do I stop getting vague email design feedback like 'make it pop'?

Vague feedback comes from clients who can't point at what they mean — they describe instead of showing. Give them a way to click the exact spot and leave a pinned note. 'The CTA button feels small' anchored to the button is actionable; 'make it pop' sent over email is not.

How do I collect feedback on multiple email design versions without losing track?

Attaching new PNGs to the same thread is how versions get lost — by round three, 'the latest' is anyone's guess. A single link that updates in place means the client always opens the same URL. You push a revision; the link reflects it. No new attachments, same thread.

Can I annotate an HTML email render before it goes out?

Yes — take a full-page screenshot of the rendered preview (Litmus, Email on Acid, or your ESP's preview mode works) and treat it as a regular image for annotation. This is worth doing separately from the Figma design review: the rendered HTML often looks different from the frame due to font fallbacks, line-height differences, and image blocking in certain clients.

drafty

How to annotate an email design

Quick answer

To annotate an email design, export the Figma frame as a PNG and mark it up in Preview on Mac (or Greenshot on Windows), or share a link the client annotates directly in their browser. Sharing a link keeps every note pinned to the exact element — not scattered across email replies.

Step 1

In Figma — comment on the design frame

Press C to switch to the comment tool, click the exact element — hero image, CTA button, preheader — and type your note. Figma threads replies to that spot. One catch: clients without a Figma account land on a 'Request access' screen when they open your file link. Change the file sharing setting to 'Anyone with the link can view' before you send, or they can't comment at all.

Step 2

On a PNG export — Preview on Mac or Snipping Tool on Windows

Export the email frame as PNG (Figma: select the frame → Export → PNG at 2x). On Mac, open in Preview and press Shift ⌘ A for the Markup Toolbar — add numbered callouts, arrows, boxes. On Windows, use Paint or Greenshot. The catch: every feedback round means exporting a new file, re-annotating, and re-attaching. By round three you have an inbox full of annotated PNGs and no clear answer to 'which version is current?'

Step 3

Via a shared link — the client annotates directly

The workflow that avoids the PNG version spiral: export the email design once and share it as a link the client opens in their browser. They click the exact element they want to flag — the subject line that feels off, the button colour that clashes — and leave a pinned note. No Figma account, no software download. You see every note threaded and anchored to the spot, reply inline, and push a revised version to the same link when you're done. The client opens the same URL and sees what changed.

Step 4

For rendered HTML email — screenshot first, then share

Annotating the rendered HTML is a different step from reviewing the Figma frame — and worth doing separately, because the two often look different. Render the email in Litmus, Email on Acid, or your ESP's preview, take a full-page screenshot (GoFullPage in Chrome, or Shift ⌘ 4 on Mac), then share or annotate it like any PNG. The client reacts to how the email actually looks in an inbox, not the design file that hides font fallbacks and image blocking.

The faster way

If the client is the one annotating, drop the email design export (PNG or full-page screenshot) into Drafty and share the link. They click the exact spot and leave a threaded note — no account, no Figma needed. You reply inline, push a revised version to the same link, and they see what changed next time they open it. No re-attaching files, no 'which version is this?' back-and-forth.

Open a live demo

Questions

How do I annotate an email design in Figma?: Press C to switch to the comment tool, then click any element in the email frame to pin a note to it. Teammates with view or edit access can reply in a thread. If you want a client without a Figma account to comment, they'll hit a login wall — share the exported PNG or screenshot as a review link instead.
How do I share an email design so a client can annotate it without a Figma account?: Export the design frame as a PNG or PDF, then share it via a link the client opens in their browser. They mark up the exact spot without signing up for anything. Sharing a file link from Figma directly sends clients to a 'Request access' page — they can't comment unless they have a Figma account.
What is the difference between email design annotations and Gmail Promotions annotations?: Gmail Promotions annotations are structured JSON-LD schema markup you add to an email's HTML so Gmail surfaces a deal badge, promo code, or image carousel in the inbox preview — they're for bulk marketing sends. Email design annotations are visual markup you add to a design file or screenshot to flag copy changes, layout issues, or styling feedback before the email is built or sent. They serve completely different purposes.
How do I stop getting vague email design feedback like 'make it pop'?: Vague feedback comes from clients who can't point at what they mean — they describe instead of showing. Give them a way to click the exact spot and leave a pinned note. 'The CTA button feels small' anchored to the button is actionable; 'make it pop' sent over email is not.
How do I collect feedback on multiple email design versions without losing track?: Attaching new PNGs to the same thread is how versions get lost — by round three, 'the latest' is anyone's guess. A single link that updates in place means the client always opens the same URL. You push a revision; the link reflects it. No new attachments, same thread.
Can I annotate an HTML email render before it goes out?: Yes — take a full-page screenshot of the rendered preview (Litmus, Email on Acid, or your ESP's preview mode works) and treat it as a regular image for annotation. This is worth doing separately from the Figma design review: the rendered HTML often looks different from the frame due to font fallbacks, line-height differences, and image blocking in certain clients.

Keep exploring

How to annotate a design Design feedback tool How to annotate a PDF Markup.io 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