How to Get a Figma Design into Klaviyo (2026 Guide)

Nobody struggles to “design in Figma.” The pain is the handoff: a tall artboard has to become modular blocks inside Klaviyo with links that work and alt text that is not empty. You can do that with a plugin. You can also export once and finish in a browser. Same destination.

What “done” means

A Klaviyo drag-and-drop template (or campaign body) where each major section is its own image block, CTAs and product tiles have URLs, content images have alt text, and you can still drop header / footer / universal content around the slice body. If you only uploaded one giant PNG, you are not done. You just moved the file.

Path A: export, then slice (what most freelancers should do)

This is the path Autosliced is built for. It is also how a lot of teams worked before plugins existed.

1. Design at email width. 600px content is still the common default. Leave clear vertical gaps between sections so cuts have somewhere to land. Overlapping type on a photo is fine for design; it is hell for auto-slice.
2. Export the whole frame at 2×. PNG if the layout is type-heavy or UI-sharp; JPG if it is mostly photography and you are already worried about weight. Prefer one full-height export, not twelve separate artboards, unless you have a reason.
3. Upload and slice. Run auto-slice if you have it, then fix the lines that cut through a face or a price. Column breaks only where two tiles need different links. Cut placement notes.
4. Alt text and links before publish. Bulk-generate, then rewrite the hero and anything with a legal claim. Empty alt on a content band is how QA fails later.
5. Publish into Klaviyo. Open the template, add the pieces that should stay live (footer legalese, nav, UGC blocks), preview, send.

First time through, budget 10–15 minutes while you learn your own patterns. Once the muscle memory is there, the boring middle is a few minutes, which is the whole point.

Path B: Figma plugin

Grotto, Slicely, SlicePilot, and others push from inside Figma. Choose this when adoption dies the moment someone has to open another tab. You usually pay more, and you sometimes get less room to refine cuts after the fact. Fine trade if the plugin is the only way the team ships.

Field notes on who is good at what: slicer roundup.

Mistakes that waste a whole afternoon

1× export. Looks soft on phones. Export 2× and compress after slicing, not before.

Cuts through type. If a line bisects a headline, nudge it. AI loves “almost right.”

One mega-image in Klaviyo. No per-section links, no reordering, nightmare QA. Slice.

Skipping compression. A 2× PNG of a long email can be multi‑megabyte before you notice. Per-slice compression.

Image footer you will regret. Legal lines change. Exclude the footer from the slice grid and rebuild it as Klaviyo text or universal content when you can.

Image slices or HTML from Figma?

If marketing wants pixel-perfect campaign art and the ESP workflow is already image blocks, slice. If lifecycle needs weekly copy edits or three locales on one layout, you want HTML modules: different tools entirely. I wrote up the fork here: image-sliced vs HTML.

FAQ

Plugin or not?

Not required. Required only if your process document says so. Technically the export path is complete.

PNG or JPG from Figma?

PNG when edges and type must stay crisp. JPG when photos dominate and size is already a fight. Many people export PNG at 2× and let the slicer compress per band.

Will republishing wipe my Klaviyo header?

In Autosliced, republish updates the slice body and leaves the sections you added in Klaviyo alone. Still: preview after every push. ESP UIs change; trust but verify.