Email Love is a Figma Plugin that enables you to design and export responsive and accessible HTML emails directly from Figma. Email Love includes an “Export to Iterable” option that uses the Iterable API to upload your template.
Running the Plugin
You will now need to load the plugin so that you can use it to design your email template.
To run the plugin:
- Click the Actions menu on the Toolbar of your Figma design canvas
- Under the Plugins & Widgets tab, select Email Love → HTML Email Builder to load the plugin.
Creating Your First Frame
With the plugin ready for your use, create a new frame by clicking the [no-template-selected]+ button on the upper left side of the Plugin interface.
Design the Template Using Email Love’s Pre-Built Components
You can now start designing your email template using Email Love’s pre-built components.
- Select the frame you created in the previous section.
- On the Plugin interface, select the component type you want to add first, for example, “Header.” Clicking on a header from the Assets library that you would like to add to your template.
- On the canvas, the frame gets updated with the header you selected in Step 2.
For the next steps, the frame should remain selected.
- Click “Content,” “Features,” “CTAs,” “Gallery,” or “Footer” to select your next component.
- Click on the component that you would like to add to your Frame and it will be added to the bottom of the email.
- Continue adding components until you have built out the desired structure for your email.
The screenshot below shows what we have created so far using Email Love’s prebuilt components.
Customizing the Components
With our email design taking shape, it’s now time to make the template your own. You can do this by customizing the components you have selected for your design. Each component features 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 enables you to update the background color. Selecting “mj-image” in the header enables you to 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.
- If you add a Footer component and we will automatically merge in an Iterable Unsubscribe link at the time of export. This is required for the export to work as you cannot upload a template without an unsubscribe link.
The screenshot below shows our template after customization.
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. 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.
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.
Powered by