> ## Documentation Index
> Fetch the complete documentation index at: https://help.emaillove.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Export Figma emails to Iterable
> Export Figma email designs into Iterable templates, including multi-locale variants and reusable snippets.
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](https://www.figma.com/community/plugin/1387891288648822744/email-love-html-email-builder)
## 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."
Login to your Iterable Account and navigate to Integrations > API Keys.
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 to 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:
```text theme={null}
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 to 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.
* **Merge tags are preserved per variant:** unsubscribe and personalization tokens you set on each frame (such as Iterable's `{{hostedUnsubscribeUrl}}`) are kept for that locale, so localized links and tokens are respected.
**How to export a multi-locale template:**
1. In Figma, prepare one Email Love frame per language, named using the convention above.
2. **Multi-select** all the language variants you want included in the template.
3. Open the Email Love Plugin and click the **Export** button in the top right.
4. Select **Iterable** from the dropdown, the same option as a normal export. The plugin auto-detects multi-locale templates from the frame names.
5. 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.
6. You'll see a separate success toast per locale: `Template Welcome Email [en-US] is exported`.
7. 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.
* **Variants split into separate templates.** Base names must match exactly, including capitalization and spacing. `Welcome - en-US` and `Welcome Email - fr-FR` are treated as two different templates.
* **Locale token rejected.** Use 2 to 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](https://support.iterable.com/hc/en-us/articles/213279923-Creating-Content-in-Multiple-Languages)
* [Iterable: Setting Up Locales](https://support.iterable.com/hc/en-us/articles/12441621049876-Setting-up-Locales)
* [Iterable: User Profile Fields](https://support.iterable.com/hc/en-us/articles/217744303-User-Profile-Fields-Used-by-Iterable)
## Exporting Snippets to Iterable
The Email Love Figma Plugin also supports [Iterable's Snippet API](https://support.iterable.com/hc/en-us/articles/4414807441556-Snippets-Overview). Snippets are reusable content blocks (headers, footers, CTAs, legal disclaimers) that update everywhere at once: change a snippet in Iterable, and every template that references it gets the update automatically.
Without snippets, updating a shared element like a footer means editing every single template that uses it. Snippets turn repeated content into a single source of truth. Common use cases:
* **Headers and navigation bars**: keep branding consistent across all campaigns
* **Footers**: update legal text, social links, or unsubscribe language in one place
* **Promotional banners**: swap seasonal offers across your entire template library with one edit
* **Legal disclaimers**: ensure compliance language is always current
Build your reusable section inside an Email Love frame. **Name the frame carefully**: the frame name becomes your snippet name in Iterable. Keep snippets self-contained (a header snippet should include everything from the top logo through the navigation links) and design them to work across different templates.
Select the frame, click **Export**, and choose **Iterable Snippet** from the dropdown. If you haven't connected your API key for snippets yet, follow steps 4-11 from the export section above. The Snippet API connection is separate from the Template API connection, so you have to connect it even if template exports already work.
Click **Upload** to send it to Iterable.
Navigate to **Content > Snippets** in Iterable. Your snippet appears with the same name as your Figma frame. Click it and copy the reference code, which looks like `{{snippet "your-snippet-name"}}`.
In the Figma template where you want the snippet, scroll to the bottom of the plugin's component list and click **Code** (the last option) to add a Raw Code Component. Paste the snippet reference into the code field, then export the template to Iterable normally. Iterable replaces the reference with the snippet content at preview and send time. For more on the component, see [Raw Code Component](/plugin/raw-code/overview).
**Handling custom CSS in snippets:** if your snippet uses custom CSS (custom fonts, animations, media queries), that CSS needs to live in the email's ``, not inside the snippet. Export the snippet section as a full email first, copy the CSS from the `` of the exported HTML, then paste it into the **Properties** section of each template that uses the snippet. Standard text, images, buttons, and layout components don't need this.
**Updating a snippet:** re-export from Figma to overwrite the existing snippet in Iterable (recommended, keeps Figma the source of truth), or edit it directly under Content > Snippets in Iterable. Either way, every referencing template picks up the change automatically. If you edit directly in Iterable, your Figma designs will drift from what's deployed.
**Managing multiple snippets:** as your library grows, prefix snippet names with their type (`header-primary`, `footer-legal`, `banner-promo-q1`), keep a dedicated Figma page for snippet designs, and document which templates use which snippets.
**Snippets vs. full template exports:** use snippets for content that appears in multiple templates and needs central updates; use full template exports for one-off campaigns where every section is unique. Most teams combine both: full exports for the email body, snippet references for shared headers and footers.
## 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.
## 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 to 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:
```text theme={null}
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 to 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.
* **Merge tags are preserved per variant:** unsubscribe and personalization tokens you set on each frame (such as Iterable's `{{hostedUnsubscribeUrl}}`) are kept for that locale, so localized links and tokens are respected.
**How to export a multi-locale template:**
1. In Figma, prepare one Email Love frame per language, named using the convention above.
2. **Multi-select** all the language variants you want included in the template.
3. Open the Email Love Plugin and click the **Export** button in the top right.
4. Select **Iterable** from the dropdown, the same option as a normal export. The plugin auto-detects multi-locale templates from the frame names.
5. 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.
6. You'll see a separate success toast per locale: `Template Welcome Email [en-US] is exported`.
7. 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.
