Creating an Email Design Based on a Template

The Email Love Figma plugin 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.

​

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).

​

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 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: H1, H2, H3, H4, H5, 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 the following type: Text, Button

​

Checking a Template’s Structure in Figma

To check the components of the AllTrails template in Figma:

​

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.

​

Running the Plugin from the Toolbar

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

1. Click the Actions menu, then select the Plugins & Widgets tab.
2. From the list, double-click the Email Love plugin to launch the Plugin interface.
3. 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

1. Highlight the specific part of the template section that you want to customize.
2. Click the Assets tab on the Plugin interface, then double-click the new asset that will be used in place of the old one.

​

To Replace an Image in the Template

1. Select the image you want to replace with a new one.
2. Click the Image option in the canvas’s Properties panel on the right.
3. Select the new image that will be used in place of the old image.

​

To Add or Update a Link in the Template

1. Highlight the text, image, or button that will be inserted or updated with a new link.
2. 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.

​

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

1. Click the specific template section that you want to customize.
2. Select the Properties tab on the Plugin interface.
3. Make the required changes as necessary.

​

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

1. Select the entire email frame or a wrapper within the frame.
2. Click the Appearance Tab in the Plugin interface.
3. Make the required changes to the template.

​

To Customize a Template for Mobile Devices

1. Click on the wrapper, text, or image component you want to adjust.
2. Select the Mobile Styles tab in the Plugin interface.
3. 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.

​

To Preview a Template

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

​

To Export a Template

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

​

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.