The Email Love HTML Email Builder for Figma offers free email templates that you can use in your email marketing campaigns. These templates make creating your first email campaign so much easier than starting from scratch.

In this tutorial, we’ll show you how to use an existing template from our design library to create your first email campaign. You can also use the procedure detailed in this guide to customize any other template using the Email Love Figma plugin.

💡

Free templates that you can use in your email designs are available from the Email Love Community page at https://www.figma.com/@emaillove.

Installing the Plugin

To use the Email Love plugin with an existing email template, whether from the Email Love library or another source, you need to install the plugin first (for more information, see Installing the Email Love Figma Plugin).

💡

While our free email templates can be used as standalone design files in Figma, using them with the Email Love plugin means that they can exported as responsive and accessible HTML or MJML emails, or to any supported format, that look great on any device and meet accessibility standards.

Opening a Template in Figma

You may check out various email templates that you can use from the Email Love Figma community page. When you find a template you like, open it in your Figma account.

For this tutorial, we’ll use the AllTrails email template. The template can be opened directly from here into Figma. To follow along with this guide, we recommend opening the template in your Figma account.

The Structure of an Email Template

You can view the underlying component structure behind a template from the navigation panel on the left side of the Figma canvas.

💡

The component structure makes the email design easy to export to responsive HTML or MJML, or formats acceptable to third-party email service providers (ESPs).

The typical Email Love template has the following component structure:

mj-wrapper: all major sections in the template are enclosed in this component type

mj-section: always lies within an mj-wrapper component

mj-column: always lies within an mj-section component

mj-text-Frame: always lies within an mj-column component, and can be of the following types:

Paragraph

CTA Link

mj-image-Frame: always lies within an mj-column component, and can be any of the following:

Logo

Icon

mj-button-Frame: always lies within an mj-column component, and can be of of the following type:

Text

Button

Checking a Template’s Structure in Figma

To check the components of the AllTrails template in Figma:

Position your mouse cursor over the template name at the top, then click.

On the navigation panel to the left, Layers is expanded, revealing the AllTrails Email Template layer underneath.

To see the template’s various mj-wrapper components, click AllTrails Email Template, revealing the template’s various mj-wrapper components.

Clicking through each major section of the template on the Designer highlights the mj-wrapper component for that section.

As you select each component, the component’s properties are shown on the Properties panel to the right. From this panel, you can update the properties for each component.

Using the Email Love plugin, you can also directly customize the template using assets from our design library, edit and configure images, render sections as clickable images, configure your design for optimal appearance on mobile devices, and customize how each section appears to your target audience. These are discussed further below.

⚠️

Do not rename any of the components in a template to prevent any errors when converting a design into HTML or MJML, or other supported formats, e.g. Mailchimp, Klaviyo, and Iterable.

Customizing a Template

Email Love templates can be used as standalone design files in Figma. However, using them with the Email Love plugin means that they can be effortlessly exported as responsive and accessible HTML or MJML emails that look great on any device and meet accessibility standards.

Let’s now customize our AllTrails template using the Email Love plugin.

💡

While Email Love templates are already optimized for use in common email clients and devices, you can always customize them to fit your requirements.

Running the Plugin from the Toolbar

Once the template is open in Figma Design, we need to run the plugin.

Click the Actions menu, then select the Plugins & Widgets tab.

From the list, double-click the Email Love plugin to launch the Plugin interface.

Since we will be editing the template to fit our requirements, click the Use Existing Frame button.

Editing a Template with the Plugin

Position the Plugin interface and the template side-by-side on the Figma canvas, using the Move option on the Toolbar at the bottom of the canvas to move the template across the canvas if necessary. With that done, you are now ready to edit the template using the plugin.

To Use a Predefined Component in a Template

Highlight the specific part of the template section that you want to customize.

Click the Assets tab on the Plugin interface, then double-click the new asset that will be used in place of the old one.

💡

For more information, see Using Pre-Built Components.

To Replace an Image in the Template

Select the image you want to replace with a new one.

Click the Image option in the canvas’s Properties panel on the right.

Select the new image that will be used in place of the old image.

💡

For more information, see Adding Images to an Email.

To Add or Update a Link in the Template

Highlight the text, image, or button that will be inserted or updated with a new link.

Select the Properties tab on the Plugin interface, then edit the link URL. For images or buttons, although not required, you can also add alt text for increased accessibility.

💡

For more information, see Adding Links to an Email.

To Add Metadata and/or Customize Background Images or Colors for a Template Component

Click the specific template section that you want to customize.

Select the Properties tab on the Plugin interface.

Make the required changes as necessary.

💡

For more information, see Using the Properties Tab.

To Customize the Template for Apple Devices and Apply Uniform Font Styling

Select the entire email frame or a wrapper within the frame

Click the Appearance Tab in the Plugin interface.

Make the required changes to the template.

💡

For more information, see Using the Appearance Tab.

To Customize a Template for Mobile Devices

Click on the wrapper, text, or image component you want to adjust.

Select the Mobile Styles tab in the Plugin interface.

Make the necessary adjustments to the template. For example, you can hide the wrapper on either desktop or mobile devices, or both, and enable and set padding for the components to ensure their proper spacing and alignment on mobile devices.

💡

For more information, see Using the Mobile Styles Tab.

To Preview a Template

Use the plugin’s Email Design Preview feature to see how the template will look like when viewed from various devices.

💡

For more information, see Previewing an Email Design.

To Export a Template

Use the plugin’s Export feature to export the email design in your preferred format.

💡

For more information, see Exporting an Email Design.

Summary

This concise guide outlines the process of customizing an email design template with the Email Love plugin. You can apply these steps to any Email Love template, giving you the flexibility to create unique, professional email designs efficiently.

Creating an Email Design Based on a Template