Using the Klaviyo plugin for Figma

You will learn

Learn how to install the Klaviyo plugin for Figma, connect your Klaviyo account, and export designs from Figma directly to your Klaviyo image library, where they're ready to use in campaigns, flows, and templates.

The main steps to get started are:

• Install the Klaviyo plugin in Figma.
• Connect your Klaviyo account.
• Export a frame or a batch of layers to your Klaviyo image library.

Before you begin

You'll need:

• A Klaviyo account with permission to manage images.
• A Figma account with the Figma desktop app or browser editor.

Install the plugin

1. In Figma, open any design file.
2. Open the plugins menu and search Figma Community for "Klaviyo"
3. Run the plugin. The first time you open it, you'll see a welcome screen with a Connect account button.

Connect your Klaviyo account

1. In the plugin, click Connect account. A Klaviyo authorization page opens in your browser.
2. Log in to Klaviyo (if you aren't already), choose the account you want to connect, and approve the requested access.
3. Return to Figma. The plugin detects the connection automatically and shows your account on the Settings tab.

If the browser window doesn't open (or you close it by accident), click the button again to reopen the authorization page. If you don't finish authorizing within 2 minutes, the plugin stops waiting and asks you to try again.

Export a design to Klaviyo

1. Select a frame or layer on the Figma canvas. The plugin's Export tab shows a preview and the design's dimensions.
2. Optionally, set a file name. If you leave it blank, the layer's name is used.
3. Choose a size (e.g., 1x, 2x, or a fixed width) and a format (PNG or JPG).
4. If you have more than one account connected, choose the account to export to.
5. Click Export to Klaviyo. When the export finishes, the image is available in your Klaviyo image library.

Export multiple layers at once

Select 2 or more layers to switch to batch export. You'll see the list of selected layers with their dimensions, and you can set a shared size and format or keep each layer's own settings. In the advanced settings, you can also add a prefix or suffix to every file name, or replace all names with a shared base name. A progress bar tracks the batch as it uploads.

Advanced export settings

Click the gear button next to the size and format selectors to adjust how Figma renders the export:

• Color profile — export using the document's color profile, sRGB, or Display P3.
• Ignore overlapping layers — export only the selected content, excluding anything overlapping it.
• Include bounding box — include the layer's full bounding box in the export.

View your export history

The History tab shows your past exports grouped by upload, with thumbnails that link to each uploaded image. Use the Klaviyo media library link at the bottom of the tab to open your image library in the browser, or Clear history to remove the list from the plugin (this doesn't delete the images from Klaviyo).

Manage connected accounts

On the Settings tab you can add accounts or remove one with the trash icon next to it. For security, the plugin doesn't store your Klaviyo session between uses — if you close and reopen the plugin, you may be asked to reconnect before your next export.

Troubleshooting

• "Connection timed out. Please try again." — The authorization wasn't completed in time. Click Connect account (or Add account) to start again; a fresh authorization page opens each time.
• "Your Klaviyo session has expired." — Go to the Settings tab and reconnect the account, then export again.
• Some layers in a batch fail to export — Successful layers are still uploaded and recorded in History. Check that the failed layers still exist in the file, then select them and export again.