The Email Love + Iterable integration lets you design responsive and accessible HTML emails in Figma with the Email Love plugin, then import your designs to Iterable as templates.
NOTE
To use this integration, you'll need a Figma account and the Email Love Figma Plugin.
Setup instructions
In Iterable
- Go to Integrations > API Keys.
- Click New API Key.
- Give your API key a name (for example, "Email Love Integration") and select Server-side.
- Click Create.
- Copy the API key to your clipboard.
IMPORTANT
API keys are only visible the first time you create them. Make sure to immediately copy the key and store it somewhere secure. If you lose it, you won't be able to retrieve it—you'll have to create a new one.
In Figma
Step 1: Load the Email Love plugin
To use the Email Love Figma plugin, you'll first need to load it in your Figma instance.
- Click Actions on the toolbar of your Figma design canvas.
- Under the Plugins & Widgets tab, select Email Love > HTML Email Builder.
Step 2: Add a frame
When the plugin is loaded, click the + button to add a frame to the canvas.
Step 3: Add Email Love components
Next, create the basic structure of your email template using Email Love’s pre-built components.
- Select the frame you created in the previous step.
- In the Email Love plugin, select the component type you want to add first (for example, a header).
- In the assets library, select the specific component that you would like to add to the template.
- Continue adding components for Content, Features, CTAs, Gallery, and Footer until you've built your desired email structure.
Step 4: Customize your email design
Once you've built the structure of your email, you can edit each component to customize the content and style. Each pre-built Email Love component includes layers and frames that replicate the structure of MJML. You can customize each component by selecting mj-section, mj-column, mj-text, mj-image, etc.
- Select the component that you would like to customize.
- Within the component, select a column, text, image, or button frame that you would like to customize.
- Use Figma’s design tools to customize each component. For example, selecting mj-section in a header component lets you update the background color. Selecting mj-image in the header lets you update the logo.
- Go through each component and update the text, images, and style.
- Select a component layer to apply specific mobile styles or select the entire frame to apply font and color styles across the whole email.
NOTE
The Footer component automatically includes an unsubscribe link at the time of export (unsubscribe links are required in all Iterable templates).
Exporting email designs to Iterable
To send the email designs you create with the Email Love Figma plugin from Figma to Iterable:
-
Make sure your email design is ready to be exported from Figma, then click the frame you want to export to select it.
NOTE
To import an Email Love design as an Iterable template, you must include an Email Love Footer component.
Click Export.
-
On the Export page, select Iterable from the dropdown menu.
- If you haven't added your Iterable API key yet, click Change API Key.
- In the Iterable API Key box, enter your API key, then click Set API Key.
Click Export to Iterable.
To view your email design in Iterable, sign in to your Iterable account and go to Content > Templates.
Editing your exported designs in Iterable
Once you have exported your email, you can go to Content > Templates in Iterable to edit your template, then send it to your recipients as a campaign when you're ready.