Help
From Figma to Klaviyo, as Drag & Drop, HTML or Image Slices.
How Mirror Mail sends your design, how to get it ready, and the fix for each part that doesn't match.
Step 1 · Before you export
Optimize your Figma design for Drag & Drop export
Make it 600px wide
The email frame 600px wide, with 24px of side padding on each section. Klaviyo keeps that padding on phones.
Use auto layout on every frame
One frame per section, stacked top to bottom inside the email frame. Each becomes a Klaviyo section; layers placed by hand go as images. The full list: Get editable blocks.
Don't overlap layers
Overlapping layers go as images. For text on a photo, make the photo the frame's fill, not a layer behind the text.
Up to 4 columns, at Klaviyo's widths
Side by side means a horizontal auto layout. Use halves, thirds, quarters, or 33/67 and 25/75. Close widths move to the nearest; others go as HTML, or as images when they're only pictures.
Use a system or Google font
See which inboxes show it, below. Mirror Mail never swaps your font.
Link what should be clicked
Text: select it, press Ctrl/⌘ K and paste a full https:// address. Buttons, images, icons and frames: in the Prototype tab, add an interaction, On click › Open link. Unlinked, a button has no link and a social icon a stand-in one; set them in Klaviyo.
Write “Unsubscribe” in the footer
Unlinked “Unsubscribe”, “Manage preferences” and “View in browser” become Klaviyo's own links, looking as drawn. Without one, Klaviyo adds its own at the bottom.
Name your pictures
The layer name (“Red linen dress”) is the alt text. Figma's default names (“image 12”, “Rectangle 4”) leave it empty.
Personalize with Klaviyo tags
Type them as text, like {{ first_name|default:'there' }}. They're kept as written.
| Font in Figma | Apple Mail, iPhone | Gmail | Outlook |
|---|---|---|---|
| System (Arial, Georgia…) | Shows | Shows | Shows |
| Google Fonts | Shows | Fallback | Fallback |
| Any other font | Fallback | Fallback | Fallback |
Step 2 · In the plugin
Choose an export type
One frame, three ways to send it: pick one under “Export as” in the plugin. The choice is saved on the frame.
Select it, open Mirror Mail, pick a type, press Export to Klaviyo.
Native Klaviyo blocks (text, buttons, images and columns) that you edit in Klaviyo's editor. Any part the blocks can't lay out goes as HTML if it has text, or as an image slice if it's only pictures.
One HTML template, exact to the design on desktop and phones. You edit it as code in Klaviyo.
The design as drawn, cut into image blocks that keep their links and alt text.
| Drag & Drop | HTML | Image Slices | |
|---|---|---|---|
| Edit the text in Klaviyo | Yes, in the editor | In code | No, it's in the pictures |
| Looks as drawn | Exact mostly; Klaviyo's blocks have limits | Exact | Exact |
| Edit links and alt text | Yes | In code | Yes, in each image's settings |
| On phones | Columns stack; Mirror Mail adds phone copies where a part wouldn't fit | Its own phone layout | The design shrinks to fit the screen |
Step 2 · Export type
Drag & Drop: how each layer is sent
Mirror Mail picks the most editable way that still looks as designed.
Klaviyo block
most layersText, buttons, images, columns, dividers, social icons, and coloured or outlined cards, drawn behind their blocks. Edited in Klaviyo's side panel.
HTML block
exact, live textText Klaviyo's blocks can't lay out: layers side by side in a column, a card inside a column, column widths Klaviyo doesn't offer, and cards on phones. Edited in the block's code.
Image
exact lookGradients, effects, overlapping layers, cropped photos, pictures side by side Klaviyo can't lay out, or buttons with an icon. Swap it, change its link and alt text.
Get editable blocks
- Make the email frame 600px wide, with 24px of side padding on each section: Klaviyo keeps a section's padding on phones.
- Use auto layout everywhere. Every frame that holds other layers should be auto layout.
- One frame per section, directly inside the email frame, stacked top to bottom: header, body, footer.
- Side by side means a horizontal auto layout: a logo next to a name, social icons, columns. Four columns or fewer inside a horizontal frame.
- Set spacing with padding and gap, not empty space or invisible shapes.
- Put backgrounds on the frame as its fill, not a rectangle behind the content. A rectangle under everything makes the whole area one picture.
- Don't overlap layers. Text on a photo works only when the photo is the frame's fill.
- Build buttons as an auto layout frame with a fill and one text inside, not a rectangle with text laid over it.
- Add links in Figma: on text, select it and press Ctrl/⌘ K; on buttons and pictures, Prototype › + › On click › Open link.
- Name your pictures: the layer name becomes the alt text.
- Use Klaviyo's column widths: halves, thirds, quarters, or 33/67 and 25/75.
- Make buttons at least 44px tall, and body text at least 14px, so they work on a phone.
Layers outside auto layout are sent as images. They look exactly as designed and keep their links and alt text, but their text can only be changed in Figma, and on phones they shrink rather than reflow.
Step 2 · Export type
Drag & Drop: layer overrides, when one layer looks different
If a layer doesn't come out as designed in Klaviyo, send just that layer as HTML or as an image slice, and keep the rest editable.
In the plugin
- 1Choose Drag & Drop under Export as.
- 2Switch on Allow individual layer overrides.
- 3Select the layer in Figma that looks different in Klaviyo. The plugin shows its name and the frame it's in.
- 4Press HTML or Image slice, then Export to Klaviyo.
HTML
The layer goes as one HTML block, exact to the design, with live text you edit in the block's code. The rest of the email stays Drag & Drop.
Image slice
The layer goes as image blocks, exactly as drawn, keeping its links and alt text. Its text can only be changed in Figma.
- Reset to Drag & Drop gives a layer back to Mirror Mail, which picks the most editable way again.
- The switch stays on while any layer in the frame has an override. Switching it off clears every override in that frame.
- Overrides are saved on the layers in your Figma file, and are only used by Drag & Drop exports.
- Fix the design first when you can: auto layout gives the most editable result (see Get editable blocks).
Step 2 · Export type
HTML: exact to the design, edited as code
Choose HTML when the design must look exactly as drawn on desktop and phones, and whoever edits it in Klaviyo is happy working in code.
What you get
- The whole design is one HTML template, laid out as drawn: columns at their exact widths, cards, borders and spacing included, with no Klaviyo block limits.
- It has its own phone layout: on screens from 320px, columns stack, sections keep a 24px side margin and nothing runs off the screen.
- Text stays live text. Gradients, effects and overlapping layers go as images inside it, as in Drag & Drop.
- Links, alt texts, Klaviyo tags and the footer's Unsubscribe link are kept, and images are uploaded to your Klaviyo account.
- It's about a quarter of a Drag & Drop export's size, so long emails stay under Gmail's clipping limit.
Editing it in Klaviyo
- 1In Klaviyo, open the template, click Format and edit it in the code editor. Each section and column sits on its own line, so it's easy to find.
- 2Change a word, a link or an image address in the code, and preview on desktop and mobile before you send.
- 3It can't be turned into Drag & Drop blocks. To edit visually, export the design again as Drag & Drop: it makes a new template.
Need just one part exact? Keep Drag & Drop and send only that layer as HTML: see Layer overrides.
Step 2 · Export type
Image Slices: exactly as drawn, links and alt text kept
Each section of the design is one full-width Klaviyo image block. A row of 2 to 4 picture cards goes as Klaviyo's equal columns.
- Each section of your design is one image. A slice with one link keeps it: a button, linked text, or a layer with On click › Open link. A slice holding several links gets none; set it in Klaviyo.
- Each slice's alt text is the text drawn in it, or its pictures' layer names when it has no text. Change it in Klaviyo's image settings.
- A row of 2 to 4 picture cards (products, blog posts) becomes Klaviyo's equal columns, one image per card, each keeping its link when it has exactly one, and stays side by side on phones. Keep each card within its half, third or quarter of the width.
- In Klaviyo, click a slice to swap the picture or change its link and alt text. To change the text, change it in Figma and export again.
Step 3 · After you export
Something doesn't match Figma?
After each export, press Open in Klaviyo in the plugin and preview the template there on desktop and mobile, then pick a fix.
Adjust it in Figma
When you'll export again, or want it to stay editable.
- Use auto layout, without overlapping layers.
- Use a system or Google font, and link buttons and icons.
- Or send just that layer as HTML or an image slice: see Layer overrides.
- Export to Klaviyo again.
Each export is a new template, so edits made in Klaviyo to an earlier one stay where they are.
Fix it in Klaviyo's editor
For small touches: a gap, a colour, a word, a link.
- Open the template in Klaviyo.
- Click the block.
- Change it in the side panel; HTML blocks in their code.
Some parts are sent twice, once for desktop and once for phones: change both. Exporting the design again makes a new template, so your edits stay where they are.
Troubleshooting
Questions about your design
Layout and parts
Part of my design came through as an image
Its layers aren't in auto layout, Klaviyo has no block for it (gradients, effects, cropped photos, a button with an icon), or as blocks it would land 10px or more from where Figma draws it, so it goes as image slices. Rebuild it with auto layout (see Get editable blocks), or export the design as HTML. In Klaviyo you can still swap the image and change its link and alt text.
Part of my design is an HTML block
Klaviyo's blocks can't build some layouts as drawn: layers side by side in a column, a card inside a column, column widths Klaviyo doesn't offer. They go as HTML, exact with live text, edited in the block's code. A coloured or outlined card standing alone stays editable, drawn behind its blocks; on phones it's an HTML box, exact.
Columns aren't the widths I designed
Klaviyo only has set widths (a quarter, a third, a half…). Close to one, Mirror Mail uses the nearest; none close, the row goes as HTML at your widths, or as an image if it holds only pictures.
A shadow is missing
Most inboxes can't draw shadows, so Mirror Mail leaves them out and keeps the content editable. To keep one, export the design as Image Slices.
Links and alt text
A button or social icon has the wrong link, or none
Figma only links text. Add Prototype › On click › Open link to the layer and export again. Without one, a button has no link and a social icon a stand-in (mirrormail.link/social/…) to replace with your profile in Klaviyo.
Images have no alt text
Alt text comes from the layer name, and Figma's default names give none. Rename the layers and export again, or set it in each image's settings in Klaviyo.
“Unsubscribe” isn't a link, or Klaviyo added a second one
Mirror Mail links an unlinked “Unsubscribe” only when the word is in the design; without it, Klaviyo adds its own. Write it in your footer and export again. A link you set on it is kept.
Image Slices
My Image Slices export is one picture
Each top-level section is one image. If your layers overlap from top to bottom, or sit in one frame placed by hand, there's only one section. Stack your sections, one frame each, directly inside the email frame, and export again.
Links side by side were lost
Only rows of 2 to 4 picture cards are split into columns. A row of plain links (navigation, footer) stays in its section's image, and an image holding more than one link gets none. Set the link in Klaviyo's image settings.
Inboxes and images
The font looks different in Gmail or Outlook
They don't load web fonts, Google fonts included, so they show the fallback. For the same look everywhere, use a system font such as Arial or Georgia.
A background image or rounded corner is missing in Outlook
Outlook on Windows shows neither. Mirror Mail sets the section colour so the text stays readable there.
Gmail shows “Message clipped”
Gmail cuts off emails whose code is over about 100KB. Images don't count, but every Klaviyo block adds code. Export a long email as HTML, about a quarter of the size, or split it in two.
A large image arrived in strips
Klaviyo takes images up to 5MB, so bigger ones are cut into strips that sit flush together.
A photo looks less sharp than in Figma
Photos over 1MB are compressed on their way to Klaviyo, never below twice the width they're shown at; GIFs are never touched. To send originals, untick Compress images in the plugin's Settings tab.
Exporting again
Does exporting again change my template?
No. Every export creates a new template in Klaviyo, and never changes one you already have. Images Klaviyo already holds from an earlier export are reused, not uploaded again.
Troubleshooting
Connecting Klaviyo
Connect with a private API key
In Klaviyo: Settings › API keys › Create Private API Key, as a Custom Key.
Give it this access:
Accounts: ReadImages: FullTemplates: FullPaste it in Settings › Klaviyo, press Connect Klaviyo, then go back to Figma.
How do I check my connection works?
Press Test connection beside the account in Settings. It checks the key still works and has every permission Mirror Mail needs, without changing anything in Klaviyo.
“That isn't a private API key”
You probably copied the public key (6 characters, the site ID). Private keys start with pk_.
“Klaviyo didn't accept that key”
The key was deleted in Klaviyo, or only part of it was copied. Copy it again, or create a new one.
“Not connected: the key is missing…”
The key lacks some access. Create a new Custom Key with Accounts: Read, Images: Full and Templates: Full, and paste it in Settings.
An export says to reconnect the account
The key was deleted in Klaviyo, or no longer has the access Mirror Mail needs. Paste a new key in Settings; it replaces the old one and the export history stays.
“This Klaviyo account is already connected to another Mirror Mail workspace”
A Klaviyo account is connected to one workspace at a time. Disconnect it in the other workspace first, or ask its owner to invite you.
I can't connect or disconnect a Klaviyo account
In a team, only the workspace's owner manages its Klaviyo accounts. Ask the owner.
It connected the wrong Klaviyo account
A key belongs to the account it was created in. Disconnect it in Settings, switch to the right account in Klaviyo, and create the key there.
How do I disconnect Klaviyo?
Press Disconnect beside the account in Settings. Mirror Mail forgets the key; delete it in Klaviyo too if nothing else uses it. Exported templates stay in Klaviyo.