# Using Emailify

# Creating Emailify container frames

Emailify works by creating special blank Figma container frames using the plugin, which then allows you to instantly add content components from the Emailify plugin to your Figma canvas, where you can modify the content and styles as you normally would; then you can power up each component by adding responsive design overrides and URLs/alt text etc via the plugin, too.

Customising the background colour around the outside of your email contents

Emailify will automatically use the background colour fill of your Figma file as the background colour around the outside of your email contents. To update it from the default (#E5E5E5), you can modify the background colour of your Figma file.

# Creating your first Emailify container

The first time you run the Emailify plugin on a page that doesn't contain any existing Emailify container frames, the plugin will automatically prompt you to name and create your first frame to get started.

# Adding additional Emailify containers

You can add as many additional Emailify container frames as you need. Each container will be treated as a seperate email by the plugin.

To add a new blank Emailify container frame at any time, you can click on the plus (+) icon in the plugin header, which will prompt you to name and create another blank frame.

Copying + Pasting Emailify frames (and component "rows") works, too

You can also copy + paste and existing Emailify frame that you've worked on if you don't want to start from scratch. Copying and pasting components from inside one Emailify frame into another also works, too.

# Selecting an Emailify frame

To select an email to start adding components to, you can either select it from the drop down box in the Emailify plugin header, or you can simply click on the parent frame itself on the Figma canvas.

Clicking on an email option using the select box will also automatically shift the focus on your Figma page onto the selected email.

Checking which email frame is active

The email name that's currently shown as being selected in the Emailify plugin header drop down box always indicates which email is currently selected.

# Using the Emailify content components

Emailify is powered by components that can be instantly added from the plugin to your Figma canvas, where you can modify the content and styles as you normally would; then you can power up each component by adding responsive design overrides and URLs/alt text etc via the Emailify plugin, too.

# Browsing email component categories

To browse the components available in the Emailify plugin, you can click on any of the category tabs under the plugin header bar. Clicking on each tab will reveal the components that the category contains, which you can then scroll up and down to visually browse the subcategories inside the selected tab.

# Categories

Emailify sorts components into a few categories to make it easier to browse for what you need in your email design:

# Favourites

Any components you add in another category will automatically be "bookmarked" to the Favourites category to make it easy to access them again later.

# Headers

Typically used at the top of your email; these can be components like a brand logo, "view online" links, a navigation menu, social icons etc.

# Images

These are components for displaying image content; these can be components like a full width image, background image (for adding text on top of), logo grid, image cards, grids and captions.

# Content

Includes many different components for displaying text-based content; these can be components like simple paragraphs, quotes/tesimonials, author avatars, article cards, feature icons, stats, promo codes and product cards.

# CTAs (Call To Action)

These components are primarily used for asking the user to click something or take an action; these can be components like buttons, links, background image heroes, video thumbnails, feature tiles, app store buttons, social media icons and product heroes.

Typically used at the bottom of your email; these can be components for displaying your brand logo and address details, social media links, unsubscribe links or app download buttons.

# Using the Favourites category

Any components you add in another category will automatically be "bookmarked" to the Favourites category to make it easy to access them again later.

You also have the option to remove any components from your favourites by clicking on the Trash icon; this will remove the component from your favourites list, but won't "delete" it from the other categories.

# Adding components to the Figma canvas

Once you've browsed and found a component like, you can click on the component thumbnail to instantly add it to your Emailify container frame on the Figma canvas. This will be added as a native Figma component.

# Customising the design and content of your components

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.

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 3

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.

# Creating your own custom components

If the base components that come included with Emailify aren't what you're looking for, you can create your own custom components using the built-in component builder feature.

Clicking on the Custom tab in the component categories header, then clicking the Create New Component button will open up the component builder, which will allow you to customise your own component layout and content elements.

When you're happy with the structure, you can click the Create & Insert New Component button, which will add the component to your email design in Figma, and also save it in your Custom category for future use.

# Editing and forking your saved custom components

You can edit your saved custom components by clicking on the Settings icon button next to any component listed under the Custom tab in your component categories.

You can either save the updated component back to the original, by clicking the Update Saved Component button, which will update your saved component, but will not affect or modify the component anywhere that it has already been used in your design.

Alternatively, you can fork your original component and "save as" a brand new custom component by clicking the Create & Insert New Component button, which will save it as a brand new custom component in your list, without overriding the original saved component.

Removing a saved custom component

You can also remove a saved custom component by clicking on the Trash icon button. This will remove the saved component from the Custom and Favourites categories, but will not delete or modify the component anywhere that it has already been used in your design.

# Adding animated GIFs to your designs

There are a few different options for using GIFs in your email designs, each one works a bit differently, depending on how you'd like to incorporate the GIF into your design:

# Using animated GIFs in "📷 Image" layers

You can drag a .gif file from your computer onto any 📷 Image frame's Figma fill, which will set it as an image fill on the background of the frame. Any additional Figma fills (eg color/gradient overlays) on this frame will also be included in the final .gif export.

The advantage of this is that you can then add other Figma layers (text, images etc) inside of the frame on top of your animated GIF, and those will also be included in the .gif that gets exported with your HTML email.

# Using animated GIFs in "🦸 Hero" layers

If you need to use an animated GIF as a background image behind real rich text content, you can drag a .gif file from your computer onto any 🦸 Hero frame's Figma fill, which will set it as an image fill on the background of the frame. Any additional Figma fills (eg color/gradient overlays) on this frame will also be included in the final .gif export.

The advantage of this is that the content layers inside of the frame will still be rendered as individual layers in your HTML email export.

# Using animated GIFs in "🏛️ Content (Column)" layers

Alternatively, you can also drag a .gif file inside of any 🏛️ Content (Column) frame, which will add it as a Figma image layer.

This method won't allow to include any other content over the top of the animated GIF, however, any additional Figma fills (eg color/gradient overlays) on this frame will also be included in the final .gif export.

Animated GIFs will be displayed as static PNGs in preview mode

Please note, due to GIFs taking longer to render from Figma layers, they will only be exported in your final HTML exports in order to speed up refreshing previews inside the plugin.

# Re-ordering components with drag and drop in Figma

To re-order any row, you can click and drag the row up and down inside the Emailify container frame to change its position.

You can also re-order any content columns or elements inside of a content column the same way, by clicking and dragging either vertically or horizontally (depending on the direction of the element's container.

Correct nested layer structures

Please be mindful of how the layers are structured in terms of layout; for example, "rows" can only be used directly under the root emailify frame, and columns can only be used directly under "rows", and content can only be added directly under "columns". Changing this, where there are nested rows or nested columns will cause those parts of the email to either not be rendered correctly or not rendered at all.

# Configuring HTML and responsive settings

Emailify allows you to have extra control over each element of your email by using the Emailify settings panel. To open the settings panel, click on the Settings Icon in the plugin header.

Once the settings panel is open, you can click into any layer inside of your email design (including the parent Emailify container frame), to view and modify the settings for each individual element. This allows you to do things like specify clickable URLs on images and buttons, override responsive design styles for mobile and inject custom CSS into your email export.

You can visually preview your settings using the preview HTML feature in the plugin.

# Adding mobile responsive design style overrides

With the settings panel open, you can click on elements like text, images, buttons and links to specify responsive design overrides that will be used specifically for mobile.

For example, clicking on a text layer in your email will allow you to override its font size, line height, letter spacing, paragraph spacing, padding and alignment for mobile.

To update or change a setting, enable a toggle to indicate that you would like to override a certain style on mobile, and then enter or select the value(s) that you would like to be used for mobile.

You can visually preview your responsive overrides using the preview HTML feature in the plugin.

# Adding dark mode design overrides

With the settings panel open, you can click on elements like text, images, buttons, sections and columns to specify dark mode design overrides, which will be shown on the email clients that support (opens new window) this feature when the email is being viewed on a device with dark mode enabled.

At the bottom of your plugin settings panel, you can add custom background color values for section backgrounds or custom text colours values for buttons, links and text layers. You can also show or hide certain image layers to swap them out on dark mode.

You can preview your dark mode overrides using the preview HTML feature in the plugin.

Dark mode overrides aren't supported everywhere

Currently, support for dark mode styles in email clients (opens new window) is still relatively low; so please be aware of this and try to design your emails with the "progressive enhancement" of these dark mode overrides in mind.

It's also worth using some other clever design techniques (opens new window) for creating your email with dark mode in mind as a fallback with other email clients, too.

# Adding mobile responsive design layout overrides

With the settings panel open, you can click on a layout layers in your email, such as rows, columns and heroes and specify responsive design overrides that will be used specifically for mobile.

For example, clicking on a row layer in your email will allow you to override its padding, the item spacing between its columns and whether it should stack the columns on mobile (or not).

To update or change a setting, enable a toggle to indicate that you would like to override a certain style on mobile, and then enter or select the value(s) that you would like to be used for mobile.

You can visually preview your layout overrides using the preview HTML feature in the plugin.

# Reversing column visual order of a row (on desktop)

If you would like to visually reverse the order of the columns within a row inside your email on desktop (but preserving the natural stacking order on mobile); with the settings panel open, you can click on a row layer in your email, and enable the Reverse column display order (on desktop) toggle.

You can visually preview your visual order column overrides using the preview HTML feature in the plugin.

# Rendering a row as an image (instead of HTML)

For whatever reason, if you'd like to ensure that a certain row is rendered out as a full width image (instead of rich text/HTML content), you can do this by clicking on any row in your Emailify container frame with the settings panel open, then clicking on the Render as image (instead of HTML) toggle.

You can visually preview your image render using the preview HTML feature in the plugin.

# Hiding a layer from displaying on mobile or desktop

If you'd like to hide a certain element on mobile or desktop for any reason, you can do this by clicking on any layer in your Emailify container frame with the settings panel open, then clicking on the Hide On Mobile toggle to hide the element on mobile, or clicking on the Hide On Desktop toggle to hide the element on desktop.

You can visually preview your visibility overrides using the preview HTML feature in the plugin.

Optimising responsive images

Emailify will automatically detect any 2 adjacent "image" layers inside of any content column layer, which have alternating Hide On Mobile/Hide On Desktop toggles enabled on them, and will treat them as a single image element in your HTML code export, reducing the size of your HTML.

You can specify URL links on any button, image, social or navbar item by selecting the layer while the settings panel is open, and filling in the Clickable Link URL input box.

For images and social icons, you can also specify the alt text by filling in the Image Alt Text input box.

You can preview your links using the preview HTML feature in the plugin.

Using native Figma hyperlinks

If you need to add links inside of a text content layer, you can highlight the text and use the native Figma hyperlink feature to add a URL. Emailify will automatically include this as an <a> tag in your HTML export.

# Injecting global custom HTML/CSS in an email

For any reason, if you needed to add some very specific custom CSS into your email, or some HTML into the <head> tag, you can do this via the Emailify plugin by selecting the parent Emailify container frame, and opening the settings panel (by clicking on the Settings icon).

# Setting a custom base image URL for an email

By default, the src for all the images in your HTML exported by Emailify will be a relative img/ path (eg. img/402.png); this will allow you to easily review your email and upload a zip to certain platforms like MailChimp, which will automatically upload the images and update the src URLs for you.

However, if you're using a platform that doesn't support this feature or are just hosting the images on your own CDN (content delivery network), you might want to set your own custom base URL instead.

Enabling the custom base URL will automatically prefix all of the image src attributes for your images (for example, replacing img/ with https://yourcdn.com/image/path/here).

# Using Google Fonts

Emailify automatically includes Google Font @import code in your HTML exports.

Please note that Google Fonts will only be visible on any email clients that support the use of @font-face in emails, and a fallback websafe font (eg. "Arial", "Georgia" or "Courier") will automatically be loaded instead for any email clients that don't support custom fonts.

Google Fonts aren't supported everywhere

Currently, support for custom fonts in email clients (opens new window) is still quite varied; so please be aware of this and try to design your emails with the "progressive enhancement" of custom fonts in mind.

Also, certain email service providers (like MailChimp) actively strip them out before the email is even sent to ensure that only web safe fonts are used.

Using custom fonts in your images

Please note that if you need to ensure a custom font is visually consistent across all email clients, it may be worth putting your text layers inside of an "Image" frame. This text content will be exported as part of the image itself, and therefore won't be relying on custom web font support to display correctly.

# Previewing your HTML email in Figma

To preview how your email will look in real HTML before you export it, click on the Preview button in the Emailify plugin header (or from inside the Export panel). Clicking on the Preview button will automatically generate a real HTML preview of your email directly inside the Figma plugin.

Animated GIFs will be displayed as static PNGs in preview mode

Please note, due to GIFs taking longer to render from Figma layers, they will only be exported in your final HTML exports in order to speed up refreshing previews inside the plugin.

# Changing the preview device widths

To see how it looks on different device widths, click on the select box in the header of the preview panel, and choose from the options below:

  • Desktop (700px Wide)
  • iPhone 12 Pro Max (428px Wide)
  • iPhone 12 (390px Wide)
  • iPhone SE 2nd Gen (375px Wide)
  • iPhone Mini (360px Wide)
  • iPhone SE (320px Wide)

# Previewing the size of your HTML in kilobytes (kb)

In the header of the preview panel, you'll see a number that represents the total file size of your email's HTML (which is just the .html itself, not including any image assets). This can be helpful for knowing if you've gone over the Gmail 102kb clipping limit (opens new window).

# Toggling dark mode overrides being shown in the preview

Enabling the Show Dark Mode Overrides toggle in the plugin's preview panel allows you to easily see any of the background color, text color or dark/light image swaps that you've added in the Emailify settings. If you haven't added any dark mode overrides to your layers yet, you won't be able to use this toggle until you've added at least one.

Dark mode preview doesn't emulate your email client's automatic dark mode

Please note, the dark mode preview toggle only shows any of your own custom dark mode overrides, which means it doesn't actually emulate the other "automatic" dark mode styles that email clients include themselves, too.

To accurately see what your design looks like in email clients that support dark mode (opens new window), it's always worth doing a test of your own emails using a service like Litmus (opens new window) or Email on Acid (opens new window), just to ensure they're looking good before you send them out.

Dark mode overrides aren't supported everywhere

Currently, support for dark mode styles in email clients (opens new window) is still relatively low; so please be aware of this and try to design your emails with the "progressive enhancement" of these dark mode overrides in mind.

It's also worth using some other clever design techniques (opens new window) for creating your email with dark mode in mind as a fallback with other email clients, too.

# Updating attributes and refreshing the preview window

You can also continue editing the HTML and responsive attributes by clicking on the Settings icon in the preview panel header. The plugin will automatically refresh the preview window if you use the settings panel to make changes while the preview window is open.

Please note that you'll need to click on the Refresh icon in the preview panel header after making any design/content updates in Figma to see those changes in the preview window. Clicking the Refresh icon will re-generate the preview HTML content and any updated images.

# Exporting your emails to HTML

Once you're happy with your design and the settings that you wanted to configure, you can export your email(s) from Figma to HTML by clicking on the Export button in the Emailify plugin header, selecting the email(s) you'd like to export and optionally adding a subject line and preheader text.

When you're ready, click on the Export to Code button to start exporting the emails you've selected from Figma to HTML.

Include developer friendly MJML source code files

You also have the option of only exporting HTML, or HTML (and MJML), which will include a developer friendly .mjml source code file. Select the second item in the export options drop down list to select this option.

# Saving your exported .zip file

After Emailify has finished processing your email(s), you'll be shown a confirmation message; you can download your .zip file by clicking the Download your .zip file button.

File downloads from Figma

If you're using the Figma desktop app, you'll see a prompt appear to download your file. However, if you're using Figma in a web browser, your file will automatically be downloaded to your computer by default (usually to the Downloads directory on your computer).

# Reviewing your exported HTML

After you've downloaded your .zip file from Figma to your computer, you can open your file explorer to the directory where it was saved. Double clicking on the exported .zip file will unzip the contents.

The .zip file contains the index.html HTML code and image assets inside of a seperate folder for each email, and also includes another index.html file in the root of the zip file, which is a preview page that's automatically generated so you can easily review all of your exported HTML emails at once (or upload it to a preview link for your clients/team).

Double clicking on either the preview page index.html file or any index.html file inside your individual email folders will open up the file in your web browser and let you preview the exported HTML.

# Opening the (optional) MJML file exports

If you selected the MJML option when you exported your emails from the Emailify plugin, your exported email folder(s) will include an additional index.mjml alongside the regular HTML file.

MJML (opens new window) stands for Mailjet Markup Language, and is the source code for the .html file that was also exported from Emailify. Having the MJML file makes it really easy for a developer to open up the file in their code editor and make any manual updates or customisations, without needing to deal with the compiled HTML tables that are much harder to work with.

Once the updates have been made, they can be compiled into HTML by using one of a number of methods detailed in the usage section (opens new window) on the MJML documentation site.

# Sending your HTML emails

After you've exported the HTML, you'll need to use an email service provider (ESP) such as Klaviyo (opens new window), MailChimp (opens new window) or one of the many other services that allow you to send HTML emails to a list.

If you aren't already using an ESP to deliver emails to your list, you'll need to sign up for one, which will help you host all of your image assets online and also handle delivering the send of your HTML email in bulk to a your email audience list.

Testing your HTML emails before sending

The base design components that come included with the Emailify plugin have been pre-tested using Litmus (opens new window) to ensure they look great across all popular desktop (including Outlook) and mobile email clients.

However, it's always worth doing a test of your own emails using a service like Litmus (opens new window) or Email on Acid (opens new window), just to ensure they're looking good before you send them out.

Avoid trying to use Outlook or Gmail to send your HTML email

Unfortunately, you can't reliably send out HTML emails using Gmail or Outlook, as the images need to be hosted somewhere online, and the HTML will get messed up in the process using these email services that aren't designed for handling this type of bulk send.

Try signing up for a service like Klaviyo (opens new window) or MailChimp (opens new window) to get started if you're new to sending HTML emails.