Upload your email to Iterable – Email Love

The Email Love Figma Plugin connects directly to Iterable, letting you export professionally designed emails from Figma straight into Iterable Templates. Stop re-building your Figma designs in HTML or in a drag-and-drop-builder and cut your email production time in half.

Download the Email Love Figma Plugin here

Exporting your email to Iterable

The Export feature in the Email Love Figma plugin allows you to easily convert your email design into email-friendly HTML or MJML, or directly export it to Iterable.

Follow these steps to export your email design.

Ensure that your email design is finalized and ready for export, then click on the frame you want to export to ensure it is selected. Please note, you will need to use an Email Love Footer with an Unsubscribe link for the export to work. We will automatically merge in the Iterable Unsubscribe token.

Click the Export button located in the top right corner of the Plugin interface.

On the Export page, select “Iterable” from the dropdown menu.

If you have not added your Iterable API key, click “Change API Key.”

Click the “New API Key” button.

Give your API key a name and select “Server Side.” Click “Create API Key.”

Copy and paste your API key into the “Iterable API Key” box in the Email Love Figma Plugin.

Give your API key a name

Select which region your API key uses (US or EU)

Click the “Set API Key” button.

Click the “Export to Iterable” button at the top of the plugin.

Navigate back to Content > Templates in Iterable to find your email.

Exporting a Multi-Locale Template to Iterable

Designing the same email in multiple languages? The Email Love Figma Plugin can bundle all your language variants into a single Iterable template with locale variants — so you maintain one template in Iterable, and Iterable serves the right language at send time based on each recipient's locale profile field, with a designer-chosen default as fallback.

When to use multi-locale export:

Same campaign going to audiences in different regions (e.g. en-US, fr-FR, de-DE, ja-JP)

You want one template in Iterable to manage all language variants instead of a separate template per language

You want Iterable to automatically serve the right language based on each recipient's locale profile field

Before you start:

Your Iterable API key already saved in the plugin (see steps 4–11 above)

An Email Love Footer with an Unsubscribe link in every language frame

All locale codes you plan to use must already be configured in Iterable under Project Settings > Locales. The export will fail for any locale that isn't configured.

One Email Love frame per language, named using the convention below

Name your frames {Base Name} - {locale}:

The plugin detects multi-locale templates from frame names. Use space-dash-space between the base name and the locale code:

Welcome Email - en-US
Welcome Email - fr-FR
Welcome Email - de-DE

Frame naming rules:

Delimiter: space-dash-space ( - ). Welcome_Email-en-US won't be parsed as multi-locale.

Locale token: ISO-style code — 2–3 lowercase letters with an optional region suffix. e.g. en, en-US, pt-BR, zh-Hans.

No suffix: Frames without a locale suffix still export normally as single-language templates. Fully backward compatible.

Mixed selection: You can export some grouped (multi-locale) frames and some single-language frames in the same batch — each group resolves independently.

How to export a multi-locale template:

In Figma, prepare one Email Love frame per language, named using the convention above.

Multi-select all the language variants you want included in the template.

Open the Email Love Plugin and click the Export button in the top right.

Select Iterable from the dropdown — same option as a normal export. The plugin auto-detects multi-locale templates from the frame names.

Click Export to Iterable. The plugin groups your frames by base name (Welcome Email) and sends each one to Iterable's templates/email/upsert endpoint with its locale code.

You'll see a separate success toast per locale: Template Welcome Email [en-US] is exported.

Navigate to Content > Templates in Iterable. You'll find one template named after your base name, with each language version available under the Locales dropdown at the top.

How the default locale is chosen:

Iterable requires one variant per template to be flagged as the fallback. The plugin sets the first frame in your selection (by Figma layer order within the export panel) as the default. To change the default, reorder your frames in the Figma layers panel before exporting.

💡

How recipients get the right language: Iterable looks at each contact's locale profile field at send time and serves the matching locale's HTML. If no match is found, the default locale is sent. Make sure your Iterable profiles have a locale field populated (via your CDP, Segment sync, or Iterable's API).

Updating a multi-locale template:

Re-exporting the same set of frames upserts the existing template by base name — the plugin uses the base name as Iterable's clientTemplateId, so each variant overwrites in place instead of creating duplicates. To add a new language, design a new frame with a new locale suffix, multi-select it along with the rest of the group, and re-export — the plugin appends the new locale to the existing template.

Scope:

Email templates only (SMS / push variants are not supported yet).

Side-by-Side HTML templates only — Iterable's API-driven localization does not support Drag-and-Drop editor templates.

Troubleshooting:

Locale not configured. You'll see a per-locale toast like Locale 'pt-BR' is not configured in your Iterable project. Add it under Project Settings → Locales. Add the locale in Iterable, then re-export. Other locales in the same batch are unaffected and still succeed.

Frames didn't group together. Check the delimiter — it has to be space-dash-space ( - ). Underscores or dashes without spaces won't be parsed as multi-locale.

Locale token rejected. Use 2–3 lowercase letters with an optional region suffix (e.g. en, en-US, pt-BR). EN-us or english won't parse.

Wrong frame is the default. The plugin picks the first frame in your selection by Figma layer order. Reorder your frames in the layers panel and re-export.

Unsubscribe link missing in one language. Every frame needs its own Email Love Footer with an Unsubscribe link — the plugin doesn't carry it over from the default locale.

Wrong language is going to recipients. Check that your Iterable profiles have a locale field populated with the matching code. If it's missing or formatted differently, Iterable falls back to the default locale variant.

Learn more:

Iterable: Creating Content in Multiple Languages

Iterable: Setting Up Locales

Iterable: User Profile Fields

Exporting Snippets to Iterable

The Email Love Figma Plugin also supports Iterable's Snippet API, allowing you to create reusable sections (like headers, footers, or any repeating content) that can be updated once and automatically reflected across all your templates.

💡

Please Note: If you're exporting a content block with custom CSS, you'll need to add that CSS to your email's <head> section for it to display properly. To do this, export the section as a full email, copy the CSS from the <head> section, and paste it into your template using the Properties section of the Plugin.

How to export a Snippet from Figma:

Create your reusable section in Figma (header, footer, etc.) and place it inside an Email Love frame. The frame can be any name you choose, just remember this will become the name of your snippet.

Select the frame containing your snippet design.

Click the Export button in the top right corner of the Plugin interface.

Select "Iterable Snippet" from the dropdown menu.

If you haven't added your Iterable API key yet, follow steps 4-11 from the "Exporting your email to Iterable" section above to set up your API connection. It’s worth noting that you have to connect the snippet API separately.

Click "Upload" to export your snippet to Iterable.

Navigate to Content > Snippets in Iterable to view your newly created snippet.

How to use Snippets in your templates:

In Iterable, go to Content > Snippets and locate the snippet you just exported.

Copy the snippet reference code (it will look something like {{snippet "your-snippet-name"}}).

Back in Figma, open the template where you want to use this snippet.

Scroll to the bottom of the component list on the left side of the plugin.

Click on "Code" (the last option in the list).

Paste your snippet reference code into the code field.

Export your template to Iterable using the standard export process.

When you preview your template in Iterable, you'll see your snippet merged into the email.

Pro tip: Any updates you make to the snippet in Iterable will automatically appear in all templates that reference it. You can also re-export an updated snippet from Figma at any time to override the existing snippet in Iterable.

Edit your email inside of Iterable

Once you have exported your email, you can navigate to Content > Templates inside of Iterable where you can then send it to your recipients or edit the content with Iterable's built in editor or directly in the HTML.