Works with Klaviyo

Figma to Klaviyo, as real HTML

Design your email in Figma, turn it into responsive, email-safe HTML with MarkupMail, and import it into Klaviyo. No coding needed.

Try it free in Figma See how it works

No sign-up, no card. 5 free emails every month.

How it works

Three steps from Figma to Klaviyo

Design the email the way you already do. MarkupMail writes the code.

  1. 01Select a frame

    Design the email in Figma as you normally would, then select the frame you want to export.

  2. 02Click Generate

    MarkupMail builds email-safe HTML that holds up even in Outlook, with your text still editable. Then it runs 30+ checks and flags anything to fix.

  3. 03Import into Klaviyo

    Download the ZIP, then import the HTML file as a new Klaviyo template, adding a ZIP of your images so Klaviyo hosts them.

    Klaviyo’s guide to importing templates
Klaviyo details

Ready for Klaviyo

Personalisation tags come through untouched, and the checks that matter run before you export.

Personalisation tags, kept as typed

Type Klaviyo’s tags straight into your design. MarkupMail keeps them exactly as they are, so Klaviyo can fill them in when it sends.

  • {{ first_name }}The person’s first name
  • {% unsubscribe %}The unsubscribe link, which Klaviyo needs before it will import a template
  • {{ organization.full_address }}Your postal address
  • {% web_view %}A link to view the email in a browser
All of Klaviyo’s tags

Checked before you export

MarkupMail runs 30+ checks before you export, including these.

  • Missing unsubscribe link
  • Missing postal address
  • Too big for Gmail, which clips emails over 102KB
  • Missing alt text
  • Links going nowhere
FAQ

Using MarkupMail with Klaviyo

What to know before your first send.

How do I get the HTML into Klaviyo?

Import it as a new template. Klaviyo takes the HTML file and a ZIP of your images, and hosts the images for you. You can also paste the HTML straight into a campaign’s HTML editor. Klaviyo’s guide has the steps.

Do Klaviyo’s tags work?

Yes. Type them into your design, like {{ first_name }}, and MarkupMail keeps them exactly as typed, so Klaviyo fills them in when it sends.

Do I need an unsubscribe link?

Yes. Klaviyo won’t import a template without one, so type {% unsubscribe %} into your design where you want the link.

Can I edit the text in Klaviyo?

Yes, in Klaviyo’s HTML editor. MarkupMail keeps your text as live text, not part of an image, so you can change the copy there without going back to Figma.

Your next Klaviyo email, built in Figma.

Install MarkupMail in Figma, select a frame and click Generate. Your first 5 emails every month are free.

Try MarkupMail free