Understanding how the Emailify plugin works

Before using Emailify to design and export HTML emails, it's very important to understand a few fundamentals about how the plugin works.

Emailify does not support any Figma email designs that were created outside of the plugin.

Emailify Overview ​

Emailify helps you to design emails in Figma by providing a set of common starter components which you can 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.

Emailify does... ​

  • Provide you with starter components and design tools to create email layouts.
  • Let you customize any text/image content, visual styles and links using Figma.
  • Export your emails (designed with the Emailify plugin) to production-ready HTML.
  • Integrate with email marketing platforms to upload HTML templates via API.

Emailify does not... ​

  • Automatically convert Figma email designs that have been manually designed in Figma without using the Emailify plugin (if you have a design like this, you will need to recreate the design using the Emailify plugin's design tools to export it to HTML).
  • Offer any special workarounds to overcome lacking email client support for certain HTML/CSS properties that are only supported in certain clients (for example, overriding dark mode styles for Gmail or Outlook, or displaying custom fonts in non-Apple Mail clients)

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 (for example, 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 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 (for example, text, images, buttons etc).

Basic Example of Emailify Layer Structure

Basic Example of Emailify Layer Structure ​

  • ✉️ Email
    • 🦸 Hero
      • ✍️ Text
      • ✍️ Text
      • 🔗 Button
        • ✍️ Button Text
    • 🚣 Row
      • 🏛️ Column
        • 📷 Image
      • 🏛️ Column
        • ✍️ Text
        • ✍️ Text
    • 🚣 Row
      • 🏛️ Column
        • 📷 Image
      • 🏛️ Column
        • 🪑 Data Table
          • 🪑🚣 Data Table Row
            • 🪑🏛️ Data Table Cell (Content)
              • 📷 Vector Icon
            • 🪑🏛️ Data Table Cell (Content)
              • ✍️ Text
          • 🪑🚣 Data Table Row
            • 🪑🏛️ Data Table Cell (Content)
              • 📷 Vector Icon
            • 🪑🏛️ Data Table Cell (Content)
              • ✍️ Text
    • 🚣 Row
      • 🏛️ Column
        • 📷 Image
        • ✍️ Text
        • 🐦 Social
          • 🔗 Social Icon Link
            • 📷 SVG Vector Icon
          • 🔗 Social Icon Link
            • 📷 SVG Vector Icon
          • 🔗 Social Icon Link
            • 📷 SVG Vector Icon
          • 🔗 Social Icon Link
            • 📷 SVG Vector Icon
        • 🍔 Navigation
          • 🔗 Nav Link
            • ✍️ Nav Link Text
          • 🔗 Nav Link
            • ✍️ Nav Link Text
    • 🚣 Row
      • 🏛️ Column
        • 🪑 Data Table
          • 🪑🚣 Data Table Row
            • 🪑🏛️ Data Table Cell (Content)
              • ✍️ Text
            • 🪑🏛️ Data Table Cell (Content)
              • ✍️ Text
          • 🪑🚣 Data Table Row
            • 🪑🏛️ Data Table Cell (Content)
              • ✍️ Text
            • 🪑🏛️ Data Table Cell (Content)
              • ✍️ Text
    • 🎁 Wrapper (For Multiple Rows)
      • 🚣 Row
        • 🏛️ Column
          • 📷 Image
        • 🏛️ Column
          • ✍️ Text
      • 🚣 Row
        • 🏛️ Column
          • 📷 Image
        • 🏛️ Column
          • ✍️ Text

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 ​

Video Tutorial: Design and export Emails from Figma to HTML

This video walks through how to design and export production-ready, responsive HTML email from Figma using the Emailify plugin.

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 customise the images, text and layout values to match your own brand and styleguide.

Re-using components as Figma instances Once you've customised a component, you can re-use it multiple times as a Figma instance, or even across other email designs in the future.

Emailify content components use Figma's Auto-Layout. The components included with Emailify are using auto-layout, making them really easy to adjust layout values like padding and space between columns or elements.

Next steps ​