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 for Loops” option that downloads an MJML file that can easily be imported into Loops.
.
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 a Loops Unsubscribe link at the time of export.
The screenshot below shows our template after customization.
Exporting your email for Loops
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 email marketing platforms like Loops. 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.
- Click the Export button located in the top right corner of the Plugin interface.
- On the Export page, select “Loops” from the dropdown menu.
- Click the “Export to Loops” button at the top of the plugin.
- A Zip file that contains the email MJML and images will be saved to your “Downloads” folder.
Upload your email to Loops
Once you have the Zip file with your email, you are ready to log in to your Loops account.
- Navigate to the “Compose” step of the campaign you would like to send in Loops.
- Click on the Upload icon in the upper right corner of Loops
- Click “Select a zip file” and select the Email Love file that you exported from the previous step.
- Click “Upload file”
- Preview your email in Loops and send yourself a test.
Powered by