By Keisha A. Mitchell
This instructional covers how to use the Emailify plugin in Figma to create mjml and .email html files while cloning an email from scratch.This walk through is suitable for Designers of all levels.
To successfully use this tutorial, you will need:
A pc or mac computer
access to the internet
an email sent from one of your favorite companies (preferably one with a variety of images and mastheads)
A bit of patience.
Step 1:
To begin, using your web browser of choice, journey to www.figma.com to create your email clone. When you arrive to the homepage, you’ll see a variety of project options as well as the ability to create an account. It’s always recommended that you create a user account not only for future visits, but so that you can customize your experience and save your preferences as well as comfortably archive your projects iterations.
Step 2:
After creating your account, click on the figma logo (the decorative f) on the left hand side of the screen. A dropdown menu will appear that says go back to files, click on that option. You will be transported back to your dashboard that offers a variety of project templates to begin with. In order to create your email clone, you will need to install the Figma plugin -Emailify. To do so, click on the profile circle holding your initial (at the top right hand of the screen) and choose the plug-ins option. A text box with three options -Account, Community, and Plugins will appear. Select the plugins tab followed by the highlighted “Browse plugins in Community” option. Once selected, you will be transported to a new page that houses all of the plugins offered by Figma. In the search bar, type in Emalify. “Emalify HTML Email Builder” will appear as the only option. Select “Install” (located on the right hand side of the screen).
Step 3:
Click on the circle icon on the left hand side of the screen, or on the profile circle with your initial located on the right. Either will take you back to your dashboard where you can select “New Design File” to begin your Email clone project.
Step 4:
We are now ready to begin creating recreating the email campaign. To start, in your finder, file explorer, or your desktop create a folder named “images” or whatever is most appropriate for you. Then open the email of your choice in your mailbox and begin saving the images from the template. To do this, start from the top and move your cursor over each image element. Right click to reveal the dropdown menu. Select save image as and name the images as you’d like, saving them in your recently created “images” folder.
Step 5:
Depending on your email provider (or the sender), you may be able to save things like logo, headers or text elements as images, or they may be static. In case of the former, you can use a image extractor service like Google Chromes’ “Shift Click Image Extractor” extension or you can choose to use a tool like the www.myfonts.com website to identify and match the fonts for you so you can add the typefaces to your library for future use. Once all images and fonts are saved to your designated folder, you will be ready to start constructing the email.html file.
Step 6:
Once back in Figma, begin building your template by ensuring that you’ve selected the emailify plugin under the “plugins” header on the Figma drop down menu on the left hand side of the screen (it will be located on the lower portion of the menu under “arrange”). Once selected, you’ll see a loading tab that says “running emailify plugin”. Once loaded, you’ll see another tab on the lower left side of the screen that says ‘’Add New Email”. Enter the name of your file in the text box and proceed onto the next step.
Step 7:
On the left hand side you’ll in the plugin menu, you’ll see a variety of elements called “containers” to help you easily build and arrange the components of your template. These containers include Header, Image, Content, CTA, E-Comm, and Footer. There’s also the “Custom” option and the ‘Favourites” tabs, which allow you to collect your favorite elements as well as create your own. With these options you can either build out your template with the components and add properties (images, texts, icons, etc) within the corresponding containers last, or you can add each to property to each container as you build the template out component by component. Be sure to utilize the appropriate types of containers for each element to make your recreation seamless and quicker. For example, if your original starts off with a header image, employ one of the various header choices that best match your original element. If the first section of your template is a call to action, use the CTA components to get the most functionality out of your clone.
Step 8:
To add the your properties to their containers, right click on the component and select either “paste here” or select “copy/paste as” and select “paste properties” from the menu that appears. You may also choose “place image” from the drop down menu located under the square icon on the left hand side. This function can also be achieved by using the key command “Ctrl+Shift+K”. To access the images that you’ll be using, when promoted choose the folder in the finder or file explorer assigned to hold all of your saved elements from the original email and click on the folder, and then element within.
Step 9:
Once your properties are added, you will have to manipulate the images using the cursor and the design menu on the right hand side. In this first tab of the menu, you will find variety of sizing options such as “resizing”, “frame”, “auto layout”, “layer” and “fill”. Beyond just sizing options, you’ll also find other tools to help you make the most out of your elements such as the “stroke” and “effects”. If there is any text you’d like to add that isn’t image based, do so with text tool (the “T”), being sure to choose the typefaces that most closely mimic the original email’s font.
Step 10:
After you’ve finished building out your clone and adding all of your properties, as well as sized them correctly, make sure to use the different viewing options Figma has to make your template either responsive or custom to the device you intend to display the clone on. Figma includes options for both various mobile device and desktop models. When sizing is complete, and all elements are in place, give your clone one more look over for any sizing discrepancies, errors, or typos. If there are none, choose “export” from the design menu on the lefthand side of the screen click to reveal exportation options. Choose the format you would like to export your final file in; pdf, svg, jpg, or png. Once selected click the button that should say “export ‘name of your file”. Once clicked, Figma will automatically download your clone in it’s desired format. To be sure, check the “downloads” folder in your file explorer or your finder.
Having completed all of these steps, you should have a functional mockup/clone of the original email you wished to recreate, and a file (depending on the format) you can now send off as a functional, clickable email as well.
Comments