Understanding how the Emailify plugin works

Emailify helps you to design emails in Figma by providing a set of common starter components which you can then customize the content, styles and brand of using the normal design tools in Figma, then apply responsive styles and export the emails to production ready HTML.

​

How is Emailify different from other email Figma plugins?

Unlike other Figma plugins that try to help you to export emails from Figma to HTML, Emailify does not attempt to automatically take any Figma file that has been manually designed in Figma and then magically turn it into HTML code that you can send via email.

​

The problem with other “email design to HTML” Figma plugins

The fundamental problem with trying to convert any manually designed Figma file of an email mockup to HTML is that there is no concept of intent.

The simplest example of this would be imagining what a “Frame” layer in Figma that contains a “Rectangle” layer and a “Text” layer inside of it is intended to be (by the designer):

• a clickable button?
• a single static image (with some text embedded inside of it)?
• a hero block with a background image, and some rich text sitting on top of it?
• a social icon link?

Even if a Figma plugin were able to correctly determine the intent of those 3 layers, this still doesn’t also include any intent about how that element should look on mobile, if it should link somewhere when clicked, or if it has other attributes (like alt text), etc.

While the example above is tricky enough, this is being generous and providing the simplest example of understanding the intent of 3 Figma layers; the complexity only increases.

Knowing that a real email mockup Figma design may contain thousands of layers, potentially nested inside of dozens (or hundreds) or other “frame” or “group” layers that also offer no information about how they should be rendered as HTML, it quickly becomes almost impossible to get the HTML output that you need based on the design input (hundreds of unstructured rectangles, frames, groups and text layers) you’ve created in Figma.

Due to HTML emails already being very difficult to visually render consistenly across all email clients, we believe that it’s way too risky to try and infer the intent of the designer from an infinite number of possible Figma layer structures of every designer doing things differently.

​

How Emailify solves the “intent” problem

To resolve the intent problem, Emailify takes a more opinionated “on-rails” approach to designing emails, where it helps you create special layers in Figma that map directly to real HTML elements when you export your code; so the plugin understands exactly what each element of your email is intended to be (eg. a “Button” is a button, a “Column” is a column, etc).

For example, adding a Button layer to your Figma email design using the Emailify plugin will create a brand new layer with some special data attached to it that tells Emailify that this is a button, and not just a rectangle layer that may (or may not) be intended to be a “button”.

By providing these design tools, it helps you to quickly create layouts and content elements that Emailify understands, and can then automatically export to HTML for you in a reliable way.

​

What kind of designs can you create with Emailify and Figma?

Emailify provides a bunch of tools to help you create layouts, when you can then customize the content and styles of using Figma, and also specifify responsive design for as well.

Using a combination of the tools that the plugin provides and using Figma for styling and content, you can create an email design that is totally customized and on-brand.

For some inspiration, please feel free to check out these free Emailify compatible Figma templates (that were designed entirely with Emailify in Figma) as some inspration for email customization with your own brand.

Each Figma template also has a link to a full step by step video tutorial walkthrough in its Figma page description for additional context and reference for how it was created. You can also browse through the full YouTube playlist for each of the Figma templates.

​

Understanding the Figma layer structure in Emailify designs

When creating layouts for your emails using Emailify using the starter components and Quick Add Element (the dropdown at the bottom of the plugin) design tools, the plugin will automatically create the required layer structures for you.

It’s very important that you maintain this basic layer structure and not do things like nesting these generated Figma layers inside of other Figma frames or groups that you’ve added manually in Figma, otherwise the plugin will get confused and treat those blocks as foreign layers (which are rendered as static images instead of rich text/HTML content).

​

Example Emailify layer structure

To show a quick example of what this looks like, in the screenshot below, you can see a set of Figma layers that were automatically created by the Emailify plugin.

You will notice that there is a very consistent Figma layer structure: the parent email frame added by Emailify can contain one or more “Row” layers directly inside of it, which can each have one or more “Column” layers inside of each of those, and then each “Column” layer can contain one or more “Content” layers (eg. text, images, buttons etc).

​

Emailify layer types you can use

To understand more about each layer type, you can ready about each of the individual layout elements and design elements in the Emailify documentation.

Again, it’s very important that this structure is maintained, as moving these layers around out of order will cause the HTML not to render as expected (for example, you cannot put a “Row” inside of another “Row”, or put a “Text” layer directly inside of an “Email” frame, or put a “Row” inside of a “Column etc”).

The simplest way to make sure you’re adding the correct structure is to add starter components from the Emailify plugin, and customise the cotent/styles as needed, without fundamentally changing the structure of your layout layers.

​

Customizing your layers in Figma

When you a any Emailify component to your email, it’s rendered onto your Figma canvas, where you can interact with the layers as you normally would (as if you had added the layers manually yourself).

For example, this means that for a text layer, you can update its content, change its font sizes, line-heights, letter spacings, paragraph spacing, and horizontal alignment using the regular Figma settings panel.

Emailify purposefully renders very basic elements, so you can then customise the images, text and layout values to match your own brand and styleguide.