Upload your email to Klaviyo – Email Love

The Email Love Figma plugin lets you design emails in Figma and export them as production-ready HTML directly into your Klaviyo account. This guide walks you through the complete setup process.

Prerequisites

Before you begin, make sure you have:

An active Klaviyo account with admin access

The Email Love Figma plugin installed

At least one email designed in Figma using the plugin

Step 1: Create a Klaviyo Private API Key

First, you'll need to generate an API key in Klaviyo to connect it to the Figma plugin.

Log into your Klaviyo account

Click on your account name in the bottom left corner

Click on the Settings cog icon

Navigate to the API Keys section

Click Create Private Key

Give your key a descriptive name (e.g., "Email Love Figma Plugin")

Grant the key full access to your Klaviyo account

Click Create

Copy the API key that appears (you'll need this in the next step)

Pro tip: If you're a freelancer or agency managing multiple Klaviyo accounts, use descriptive names for each API key to keep them organized.

Step 2: Connect Klaviyo to the Email Love Figma Plugin

Now you'll connect your Klaviyo account to the plugin using the API key you just created.

Open Figma and navigate to your email design

Select your email frame

Launch the Email Love Figma plugin

Click the blue Export button

From the dropdown menu, select Klaviyo (HTML only)

Click Change API Key

Paste your Klaviyo API key in the top box

Give this connection a name (optional, but helpful if managing multiple accounts)

Click Set API Key

Your Klaviyo account is now connected to the plugin.

Step 3: Export Your Email Template

Once connected, exporting emails to Klaviyo takes just seconds.

With your email frame selected, click the blue Export button

Select Klaviyo (HTML only) from the dropdown

Click Export

Wait a few seconds for the upload to complete

You'll see a success message when the export is finished

Step 4: Access Your Template in Klaviyo

Your exported email will appear in the Klaviyo templates library.

Log into your Klaviyo account

Navigate to Content → Templates

Your newly exported template will appear at the top of the list

Click Edit to preview the HTML code

Click Preview to see how your email will render

You can now use this template in any Klaviyo campaign or flow.

Using Your Template in Campaigns and Flows

To use your exported template:

For Campaigns:

Create a new campaign as usual

Select your audience

In the email content section, choose Email Saved

Select your exported template

Continue with your campaign setup

For Flows:

Navigate to your flow

Add or edit an email step

Choose your exported template from the saved templates

Configure your flow settings

Working with Dynamic Content

If you're using Klaviyo's dynamic content features (like abandoned cart or browse abandonment emails), the Email Love plugin supports liquid templating for personalized product feeds.

Setting Up Dynamic Product Templates

You can wrap your content in liquid tags to pull in dynamic data from Klaviyo events:

Use the Code component at the top of your email to identify the event type

Customize the code based on your Klaviyo data feed structure

Add liquid tags to pull in product titles, prices, quantities, and images

Select image elements and add event image URLs in the properties tab

Link buttons to unique shopping cart URLs from your data feed

Example liquid tags you can use:

{{ event.product_title }}

{{ event.product_price }}

{{ event.product_image_url }}

{{ event.product_quantity }}

Dynamic tables will automatically loop through your data feed to display multiple products.

Finding Dynamic Components

Pre-built dynamic email components are available in the Ultimate Email Design System. If you've duplicated that file, you'll find working examples of abandoned cart templates and other dynamic email patterns.

Note: Working with dynamic content requires familiarity with Klaviyo data feeds and liquid templating. If you're new to this, we recommend starting with static templates first.

Important Notes About Klaviyo Integration

HTML Only Export: The Email Love plugin only supports HTML exports to Klaviyo. We previously supported the Klaviyo drag-and-drop builder, but it frequently broke custom HTML code and caused issues with email rendering. Exporting as HTML ensures your emails render consistently across all email clients.

Why HTML Works Better: When you design in Figma and export as HTML, you maintain complete control over your email's appearance without the risk of the drag-and-drop editor modifying your code.

Template Management: Each time you export from Figma, a new template is created in Klaviyo. You may want to periodically clean up old versions from your templates library.