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.
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 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.
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.
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.
Powered by