Emails Builder for Figma

Overview of the Figma plugin that I developed to convert designs into ready-to-send HTML emails.

In this article, I’ll show an internal plugin for Figma that I developed for Acronis employees to convert Figma designs into ready-to-send HTML emails.

But before we get started, let me share the usage statistics so far. Since the plugin was published and we started using it, more than 2000 emails have been generated and sent. 90 employees use the plugin in their daily work to send internal communication emails. These include monthly updates from our CEO, event announcements, Acronis Foundation initiatives, design system updates, and more. So, let’s dive into the details.

Problem statement

One of the main problems that I've tried to solve is to reduce the complexity of email creation for those people in the company who prepare such emails on a regular basis. Previously, we had two ways to create emails:

• ContactMonkey—Third-party tool that gives a lot of possibilities to create responsive emails with the easy-to-use drag-and-drop email template builder. But in fact, it is a very capricious and not-so-handy tool in terms of HTML/CSS rendering that requires a lot of time for bug fixes (from time to time without any result) after the template is created. Moreover, you cannot get the template in .html format and need to install the add-on for Outlook before starting to create emails or using a special web service.
• HTML template editing —It's easy to copy/paste the template into Outlook for further editing. But in case you will need to combine several templates into a new one with custom blocks distributing, then welcome to HTML markup. As we all understand, this is the easiest way to do something wrong in terms of unplanned markup editing, removing tags or specific characters that HTML requires, etc.

As you can see, both methods have limitations and create specific problems that affect the convenience of use. In the first case, you may have to spend a lot of time fixing bugs in the created template without access to the .html file. In the second case, you will need a good understanding of HTML to do anything more than replace text and images.

But what if we take all the best from these methods and combine them into a single tool, with an easy-to-use, drag-n-drop template builder, the possibility to generate .html files, styling the content (bold, italic, link, list, etc.), and stable rendering with no bugs in 100% of cases?

Solution

Figma components library

Designers, developers, product, program, event managers, and marketers use Figma every day. Therefore, using Figma capabilities for a new tool in terms of development and support was the most obvious and cheapest solution.

First of all, I checked tons of existing templates to find all the blocks (hereinafter in the text we will refer to them as slices) that had been used before and then transferred them to Figma as a components library. As a result, I prepared six groups, 41 unique components, and the ability to combine these components in any order you might want by using simple copy/paste actions via shortcuts.

Example of template creation in Figma

Plugin logic

After the Figma library was ready, I started thinking about how to generate HTML templates. At the start, I had two ideas. The first was to generate new code directly from the mockup, and the second idea was to take the same approach I use to create templates in Figma. Split the existing email templates into smaller .html files that contain only a piece of the code relevant to a particular slice. Then map those files to slices in Figma and create the final email by matching the slice names in Figma with those in the .html file names.

List of .html files

I quickly abandoned the first idea because the cost of development was potentially too high, and focused on the second. I already had all the pieces and only needed to properly combine them into a working solution without having to invent anything new. So, the logic of the plugin is next:

1. The user selects a created template in Figma
2. Runs the plugin
3. The plugin collects the names of slices and their contents from Figma
4. Compares the collected names in Figma with the names of the .html files
5. Generates a new email from .html files mapped to Figma slices by name
6. Downloads a new email as a .html file

Example of using the Emails builder plugin to create emails

Content styling

To make the use of the plugin as convenient as possible and provide a native experience to work with content, I’ve added support for basic text editing features by using keyboard keys and shortcuts:

• bold text — ctrl/cmd + b
• underline text — ctrl/cmd + u
• italic text — cmd/ctrl + i
• links pasting — cmd/ctrl + v
• ordered/unordered lists — minus or 1, then space
• line break — enter

Example of content styling

Adding images

The trickiest part of the whole development was the functionality of adding images. For this, I had to develop another satellite plugin that could upload images to cloud storage and return direct links. How it works:

1. The user creates a new frame
2. Adds one or several images
3. Runs the plugin
4. The plugin uploads images to cloud storage and generates direct links
5. The user copies the links to the clipboard and pastes them in a specific place to link to the image

Paste link here

On each slice that should contain an image, I have added special text blocks for links and alternate text. After generating the link to the image, the user just has to paste it in the right place, generate an email, and check that everything is good.

On the one hand, it looks like a workaround, but on the other hand, in my opinion, it is a good solution to not let users who are not very familiar with Figma edit slices in depth, so as to avoid problems with the layout structure after images replacing, resizing, etc. I don’t even ask users to prepare the correct dimensions for the images. The plugin adjusts the image to the size of the container under the hood.

Example of adding images and generating links

In conclusion

The plugin works and meets the real needs of Acronis employees responsible for internal communications. And the main reason why more and more users choose Emails Builder as their main tool for creating email templates is good and predictable results in 100% of use cases.