How to export a Figma email to Klaviyo
Install the Figaviyo plugin in Figma, select your finished email frame, review the sections it detects, and push. Figaviyo slices, compresses and uploads every section and creates an editable template in Klaviyo, with alt text for each image section written from the text in your design. It takes about a minute instead of 10–15 minutes by hand.
What you need
- A finished email design in Figma, as a frame.
- A Klaviyo account and its API key.
- The Figaviyo plugin from the Figma Community. The free plan covers 5 emails per month and needs no credit card.
Why exporting by hand takes so long
Klaviyo's builder was never made for designs that start in Figma. Done by hand, every email goes through the same three jobs:
- Slice the frame in Figma. Export each section manually. One mistake and you start over.
- Compress and upload every slice. Export, run it through a compressor, upload, write the alt text. One image at a time, twelve times per email.
- Rebuild the layout in Klaviyo. Then the client changes one thing, and you do it all again, for every email in the flow.
That is 10–15 minutes per email. One Figaviyo user who creates 15–20 emails a month gets nearly 5 hours back every month.
Step by step with Figaviyo
-
Install Figaviyo
Install the plugin from the Figma Community. Your first flow is free, and no credit card is needed.
-
Add your Klaviyo account as a brand
Open Figaviyo in Figma, sign in, and add your Klaviyo account as a brand: give it a name and paste its key once. The key stays on your device, in Figma's plugin storage.
Working for several clients? Add each Klaviyo account as its own brand and pick one from the list when you export. Paid plans include unlimited brands; Free includes one.
-
Select your finished email
Pick the frame you already finished. Nothing to prepare, rename, or restructure first. No renaming layers, no export settings, no file juggling.
-
Scan and review the sections
Figaviyo detects the sections of your email for you. Drag any edge to adjust a section before you ship it.
-
Pick an export mode and push to Klaviyo
Choose image sections or responsive HTML (see below) and push. Figaviyo slices, compresses and uploads every section and creates the template; for image sections it also writes the alt text. A link to the new Klaviyo template lands in the plugin.
Image sections or responsive HTML?
Both modes are on every plan, including Free, and you can switch whenever you want. About 9 in 10 exports use image sections.
| Image sections | Responsive HTML | |
|---|---|---|
| What lands in Klaviyo | Each section of your design as its own image block in Klaviyo's drag-and-drop editor | Your design as responsive HTML, ready to send |
| Where you edit it | Klaviyo's drag-and-drop editor | Klaviyo's code editor |
| What you can change | Reorder sections, set a link on each one, add Klaviyo blocks around them | Edit the code directly |
| Best for | Flexible building in Klaviyo | Finished designs you just want to ship |
After the export: finishing the email in Klaviyo
- Set a link on each section. In image mode, click a block and paste its link, like any other Klaviyo image. The hero can go to a product page, the footer to your shop.
- Move, add, reuse. Reorder sections, drop a Klaviyo text or product block in between, and save the template for the next email in the flow.
- Check the alt text. It is taken from the text in your Figma design, so the email still makes sense with images turned off. Overwrite anything you want to.
- Changed the design? Update the Figma file, scan again, and push. Every push creates a fresh Klaviyo template rather than overwriting the last one, so your previous version stays intact.
Tips for a clean result
- Gmail clipping. Gmail clips an email once its code passes about 102 KB. Images don't count, only the HTML. In image mode Figaviyo builds the whole email as one lean Klaviyo section, so a typical export stays around 25–35 KB before Klaviyo adds its own code. If you add many extra blocks afterwards, check the size in Klaviyo's preview.
- Sharp images. Each section is exported at 2x for retina screens and compressed only as far as it stays visibly sharp.
- Text changes. In image mode the text inside each image is fixed. For a text change to the design itself, edit it in Figma and push again.
Common questions
Does it work with a design I have already finished?
Yes. Pick the frame you already finished. Nothing to prepare, rename, or restructure first.
What does it cost?
Free covers 5 emails per month. Starter is $19 a month for 50 emails, Pro is $49 a month for 150 emails with team sharing inside a company, and Agency is $129 a month for unlimited emails. Yearly billing costs 20% less. One email is one push to Klaviyo, whatever the mode; sections don't count separately. Paid plans come with a 30-day money-back guarantee. See pricing for details.
Where is my Klaviyo key stored?
On your own device, in Figma's plugin storage. When you export, the key is sent with that request so Figaviyo can upload to Klaviyo for you, and it is not saved afterwards. Figaviyo keeps only a salted one-way hash of it, which cannot be turned back into the key and exists only to stop one Klaviyo account being used for several free plans.
Can I export to several Klaviyo accounts?
Yes. Save each Klaviyo workspace as its own brand and pick which one an export goes to. You add each key once. Every paid plan includes unlimited brands; Free is limited to one.
Will the images look blurry?
No. Each section is exported at 2x for retina screens and compressed only as far as it stays sharp, so images stay crisp and still load fast.
More answers are in the FAQ on the homepage.
Try it on your next email
Your first flow is free · No credit card · 30-day money-back guarantee on paid plans