From Figma File to Sendable Email: A Cleaner Handoff for Designers and Marketers

The design gets approved in Figma on Tuesday. By Thursday the inbox version has a blurry hero, a button that vanishes when images are off, and a Gmail “[Message clipped]” link where the footer should be. Nobody changed the design. It just wasn’t built for where it was going.

This guide is for in-house designers, marketers and Klaviyo agencies: how to set up the file, the four ways to hand it off, and what to check before scheduling.

Why a good Figma design breaks in email

Figma is an open canvas. An email is closer to an old web page built from tables, and every inbox renders it differently:

• Classic Outlook for Windows uses Microsoft Word to display emails. Klaviyo’s help center lists what that breaks, including background images in table cells.
• Outlook and Apple Mail can block images, depending on the reader’s settings. Anything that exists only inside an image can disappear.
• Brand web fonts often don’t load, so live text falls back to a system font.
• Phones squeeze the layout into one column, and dark mode can recolor backgrounds and text.

None of this shows in Figma; plan for it before drawing the first layer.

Set up the Figma file for email

Frame width. Design at 600 px. That is the default template width in Klaviyo’s drag-and-drop editor and the width Klaviyo recommends. Wider layouts need extra testing.

Sections that map to blocks. Stack the email as full-width horizontal sections: header, hero, text, product grid, button, footer. Each becomes one block or slice. Avoid elements that cross two sections, like a product shot overlapping the hero’s edge; they can’t be cut or rebuilt cleanly.

Live text vs image text. Decide layer by layer. A display headline in a brand font can be an image. Body copy, prices, dates, codes and button labels should be live text: it survives blocked images, works with screen readers and can be fixed in the ESP without re-exporting.

Layer names. Name layers the way the builder needs them, such as “04 product grid / image / new arrivals”, and note each section’s destination URL and alt text beside it.

Export settings. Use JPG for photos and PNG for graphics containing text, which Klaviyo says display best across devices. Klaviyo supports JPEG, PNG and GIF, so skip SVG. For full-width images it suggests 600 to 1000 px wide and 1MB or smaller. For smaller pieces, export at 2x and display at half width, the method Klaviyo describes for crisper images.

Agencies: keep one Figma email kit per client, with header, footer, buttons and product tiles as reusable components.

Four ways to hand it off

Slice into images. Fast, pixel-accurate, and brand fonts survive. But text inside images disappears when images are blocked, every copy fix means a new export, and each slice needs its link and alt text added by hand.

Rebuild in the ESP’s drag-and-drop editor. You get live text, mobile settings and a template anyone can edit later. You give up some fidelity: overlapping layouts and custom type rarely carry over exactly, and each rebuild takes time.

Hand-code HTML. Full control over live text, dark mode and Outlook fixes. It needs an email-HTML specialist, it is the slowest route, and code weight adds up. Klaviyo notes Gmail on desktop generally clips emails whose code exceeds 102 KB. Text, styling and links count toward that; images don’t.

Use a conversion tool. These automate slicing, linking, alt text and upload. Ask whether a tool outputs image slices or live HTML. A slice-based tool removes the manual labor but not the blocked-images trade-off, and any tool’s output is only as clean as the Figma file.

QA after the build

Check the build against the approved Figma frame, not your memory of it:

1. Turn images off in a test inbox. The offer, the date and a way to click should remain.
2. Read every alt text. It should say what the slice says, not “hero_v3_final”.
3. Click every link and confirm it matches the layer note.
4. On a phone, zoom in for thin gaps between slices and soft images.
5. If Gmail clips it, combine similar blocks and strip formatting from pasted text.
6. Open it in classic Outlook for Windows and check widths and padding.
7. Switch to dark mode and check the logo and any dark text on transparent backgrounds.
8. Compare prices, codes and dates with the final frame. A common miss is a perfect build of an older version.

Automating the handoff

If your team designs in Figma and builds in Klaviyo weekly, slicing is the easiest route to automate. SmartSlice, Nexmail’s Figma-to-Klaviyo product, turns a Figma design into a fully built email in your ESP: it slices every section, matches products and collections from your Shopify store, attaches links, writes alt text and uploads the email to Klaviyo, Mailchimp, Omnisend and more, ready for QA. For teams that would rather not start in Figma, Nexmail offers AI email design built for Shopify brands: emails designed inside locked brand guardrails, edited in a Figma-style editor with comments, and exported as production-ready HTML for Klaviyo and other ESPs.