Hypermatic Docs

# 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.

# Setting the outer background colour

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.

# Understanding the design elements

The options that are available in the context menu will change based on your current Figma layer selection. You can see which options are available under which context below, along with a brief description of what each element does.

# ✉️ Email Frame Elements

These options will be visible when an ✉️ Email Figma layer is selected:

Adding background images and/or gradients to frame elements

You can add image and/or gradient background fills to any top level 🚣 Row, 🦸 Hero or 🎁 Wrapper. Applying background images/gradients to any other elements won't be included (eg. 🏛️ Column layers).

# Content Row

🚣 Row elements are the main basic building blocks inside of an Emailify ✉️ Email frame. These can only be added directly inside of the main email frame, and are just used as containers for 🏛️ Content elements.

Rows can't be nested

🚣 Row layers can only be added directly to an ✉️ Email frame, and can only contain one or more 🏛️ Content layers inside of it.

# Hero

🦸 Hero elements are a special type of content container that are able to have a background image added to its own frame element.

Hero layers can't be nested or contain colunns

🦸 Hero elements can only be added directly inside of ✉️ Email layers.

🦸 Hero elements cannot contain any 🏛️ Column layers, as it doesn't support multiple column layouts; instead, content layers are added directly inside of the frame, without needing any 🏛️ Column layers (unlike a 🚣 Row element).

# Row Wrapper

If you need to wrap multiple 🚣 Row layers into a padded section with its own background color, you can move them inside of a 🎁 Row Wrapper layer to achieve this effect.

Wrapper layers can't be nested

🎁 Row Wrapper layers can only be added directly to an ✉️ Email frame, and can only contain one or more 🚣 Row layers inside of it.

# Custom Code

If you need to add any custom code in between any elements in your ✉️ Email frame, such as platform specific template/conditional tags, you can insert a 🧑‍💻 Custom Code layer to do this. It will be added as a Figma text layer, which you can paste your custom code into, and have that rendered out as plain code when the email gets exported to HTML.

Code layers can't be nested

🧑‍💻 Custom Code layers can only be added directly to an ✉️ Email frame as a way to inject custom code blocks between 🚣 Content Row, 🦸 Hero and 🎁 Row Wrapper layers in your email design.

# 🎁 Row Wrapper Elements

These options will be visible when a 🎁 Wrapper Figma layer is selected:

# Wrapper Row

🚣 Row elements are the main basic building blocks inside of an Emailify ✉️ Email frame. These can only be added directly inside of the main email frame, and are just used as containers for 🏛️ Content elements.

Row layers can't be nested

🚣 Row layers can only be added directly to an ✉️ Email frame, and can only contain one or more 🏛️ Content layers inside of it.

# 🚣 Content Row Elements

These options will be visible when a 🚣 Row Figma layer is selected:

# Content Column

🏛️ Content elements and are used to create a single or multiple column layouts which hold the actual content layers.

Column layers can't be nested

🏛️ Content elements can only be added directly inside of 🚣 Row layers. If you need multiple rows of columns, you'll need to create brand new 🚣 Row for each row of columns you need.

# 🦸 Hero and 🏛️ Column Content Elements

These options will be visible when a 🦸 Hero or 🏛️ Column Figma layer is selected:

# Text

The ✍️ Text element layer allows you to add rich text content into your emails. These can be styled in Figma to match the size, color, line-height, letter-spacing etc of your designs.

Add hyperlinks to text layer content

You can add hyperlinks inside of your ✍️ Text layers by highlighting the selection of text you would like to link, and then using the native Figma hyperlink feature (opens new window) to include your URL.

This URL will automatically be converted into an <a> link tag when the email is exported out to exported HTML.

# Image

The 📷 Image element layer allows you to include image content into your emails. These can be styled in Figma to swap out the image content, or add styles like border radiuses or image fill overlays.

Add hyperlinks to image layers

You can add hyperlinks to your 📷 Image layers by clicking the HTML & Mobile Settings button in the Emailify plugin header, then clicking on your 📷 Image layer; this will allow you to paste your URL into the link input field.

This URL will automatically be converted into an <a> link tag when the email is exported out to exported HTML.

# Button

The 🔗 Button element layer allows you to include CTA (call to action) links into your emails with the style of a button. These can be styled in Figma to match the size, color, line-height, letter-spacing etc of your designs. You can also

Add hyperlinks to button layers

You can add hyperlinks to your 🔗 Button layers by clicking the HTML & Mobile Settings button in the Emailify plugin header, then clicking on your 🔗 Button layer; this will allow you to paste your URL into the link input field.

This URL will automatically be converted into an <a> link tag when the email is exported out to exported HTML.

# Spacer

The 📐 Spacer element layer allows you to add an extra amount of space between elements inside of your content areas, where the default Figma auto-layout item spacing distribution needs to be modified for a particular part of the content (eg. you would like to add extra space just before a CTA button).

Add even spacing using Figma auto-layout

Where possible, using Figma's auto-layout item spacing (opens new window) to evenly create spacing between your content is preferable to using 📐 Spacer elements, as this will reduce the amount of extra code needed to create spacing.

# Divider Line

The ➖ Divider Line element layer allows you to create a solid color divider line between your content elements, this can be used as a visual way to break up content inside of a column or hero block.

# Spreadsheet (Import)

The 🧾 Spreadsheet option allows you to import data from a CSV/XLSX spreadsheet and automatically turn that content into an HTML table with multiple rows and columns. You can add additional rows or columns by copy/pasting the table row and/or table data cell Figma layers that are initially created.

Please note that the 🧾 Spreadsheet will render the same way on desktop and mobile, so please be mindful about the width of your table if you're adding more than a couple of table columns.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to import spreadsheets into your email designs as tables.

# Data Table

The 🪑 Data Table element layer allows you to render content into an HTML table with multiple rows and columns. You can add additional rows or columns by copy/pasting the table row and/or table data cell Figma layers that are initially created.

Please note that the 🪑 Data Table will render the same way on desktop and mobile, so please be mindful about the width of your table if you're adding more than a couple of table columns.

The 🍔 Navigation Links element layer allows you to include a menu bar containing navigation links.

Add hyperlinks to navigation link layers

You can add hyperlinks to your 🍔 Navigation Links link layers by clicking the HTML & Mobile Settings button in the Emailify plugin header, then clicking on your 🔗 Navigation Link child layer; this will allow you to paste your URL into the link input field.

This URL will automatically be converted into an <a> link tag when the email is exported out to exported HTML.

# Social

The 🐦 Social element layer allows you to add linkable icons for any social network or platform.

Add hyperlinks to social icon link layers

You can add hyperlinks to your 🐦 Social link layers by clicking the HTML & Mobile Settings button in the Emailify plugin header, then clicking on your 🔗 Social Icon Link child layer; this will allow you to paste your URL into the link input field.

This URL will automatically be converted into an <a> link tag when the email is exported out to exported HTML.

The 🎠 Image Carousel element layer allows you to add an interactive image carousel that can be navigated with left/right arrows and (optional) thumbnails.

Customise image carousel thumbnails

You can customise the appearance of your 🎠 Image Carousel component's thumbnails by clicking the HTML & Mobile Settings button in the Emailify plugin header, then clicking on your 🎠 Image Carousel layer; this will allow you modify things like the thumbnail size, if it's shown on desktop/mobile, and other things like active/hover border colors and item spacing.

Image carousels not supported in Outlook

Please note that if you're viewined the 🎠 Image Carousel component on Outlook email clients, it will fallback to only displaying the first image in your carousel slides instead. Unfortunately, Outlook doesn't support the features required for the interactive image carousel to work.

Understanding this limitation, please be mindful of this and design your emails with "progressive enhancement" in mind for any email clients that won't be able to see all of your images, and ensure that the first "fallback" image that will be shown is the most important one, and any additional slides aren't essential to the messaging of the email itself.

These options will be visible when a 🍔 Navigation Links Figma layer is selected:

Navigation links allow you to add more menu items to your existing 🍔 Navigation Links elements.

Add hyperlinks to navigation link layers

You can add hyperlinks to your 🔗 Navigation Link layers by clicking the HTML & Mobile Settings button in the Emailify plugin header, then clicking on your 🔗 Navigation Link layer; this will allow you to paste your URL into the link input field.

This URL will automatically be converted into an <a> link tag when the email is exported out to exported HTML.

# 🐦 Social Elements

These options will be visible when a 🐦 Social Figma layer is selected:

Social icon links allow you to add more linkable social icons to your existing 🐦 Social elements. There are a number of presets for popular social networks you can select from:

Add hyperlinks to social icon link layers

You can add hyperlinks to your 🔗 Social Icon Link layers by clicking the HTML & Mobile Settings button in the Emailify plugin header, then clicking on your 🔗 Social Icon Link layer; this will allow you to paste your URL into the link input field.

This URL will automatically be converted into an <a> link tag when the email is exported out to exported HTML.

You can also add your own social icons

If the platform icon you'd like to use isn't included in the preset options, you can manually swap out the contents of any 🔗 Social Icon Link Figma frame layer and replace them with a new social icon vector.

  • 🔗 Facebook
  • 🔗 Twitter
  • 🔗 Instagram
  • 🔗 YouTube
  • 🔗 TikTok
  • 🔗 LinkedIn
  • 🔗 Pinterest
  • 🔗 Snap
  • 🔗 SoundCloud
  • 🔗 Twitch
  • 🔗 Tumblr
  • 🔗 Spotify
  • 🔗 Slack
  • 🔗 Discord
  • 🔗 Medium
  • 🔗 PayPal
  • 🔗 Flickr
  • 🔗 LINE
  • 🔗 WeChat
  • 🔗 VK
  • 🔗 Reddit
  • 🔗 Behance

These options will be visible when an 🎠 Image Carousel Figma layer is selected:

The 🎠📷 Carousel Image element allow you to add more image slides to your existing 🎠 Image Carousel parent elements.

# 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.

# Adding individual layout blocks and design elements

Emailify allows you to build out your designs using special layout blocks and content elements that are added as layers to your Figma designs, and allows them to be exported out to HTML from the plugin.

To add these layout blocks and content elements, ensure that you have created at least one Emailify frame, and then click on that frame to automatically reveal the context menu at the bottom of the plugin.

If you're just getting familiar with the Emailify plugin for the first time (or need a refresher), it's also highly recommended to read through the understanding the design elements section below to see which elements are available under what selection, and what each element does and relates to the others.

# 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:

Keep the original aspect ratio for your GIF to avoid re-creating it during export

If you drop your GIF into Figma and resize the layer proportionally to maintain the original aspect ratio, Emailify will automatically use the original GIF file in your exports.

Conversely, if you change the aspect ratio of your Figma layer to be different to the original GIF, Emailify will need to re-create your GIF to account for the cropped image area, which can lead to larger GIF file sizes and a slower export times.

Flagging transparent GIFs for export

By default, your GIF exports won't include transparency. If your GIF does require transparency, please add the word transparent anywhere in your Figma layer's name.

# 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.

# Adding platform specific personalization content

You can add personalised text for things like people's names by adding the merge tags from your email service provider (eg. MailChimp, Klaviyo etc). You can do this by adding your merge tag into your Emailify text content layers.

As an example, adding Hello, %FIRSTNAME% or Hello, *|FNAME|* (depending on your platform's syntax and values) to your Figma text layer's content will make merge tag will automatically be swapped out with the real data when the email gets sent out.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you the fundamentals of adding dynamic personalization content.

# Some platform specific template variable documentation

As these tags will be different based on the platform you're using to send your emails, please reference your own email service provider's template documentation to find out which tags are available to use. Links to some (but not all) popular platforms are listed below:

Add personalized/dynamic images

To use custom template variables for image src tags, please refer to the Emailify feature to set a custom URL or dynamic template variable for images in your email designs.

# Localizing your email designs with text translations

Emailify comes with built-in localization features to help you translate any email design created with Emailify into multiple languages.

# Translating using Excel Spreadsheets (XLSX file)

By clicking the Localize button in the Emailify header toolbar and selecting the Excel option, you can export your design(s) and select the target languages you'd like to translate the designs to (eg. French, German etc). Clicking the Export XLSX button will automatically export the text content from your email design(s) to an .xlsx spreadsheet file.

You can then edit the Excel file and populate the placeholder locale columns, and then re-import your spreadsheet .xlsx file back into the Emailify plugin by dragging and dropping it in. Upon re-importing the file, Emailify will automatically create a brand new page with a new email frame per locale with all of the text updates you made (per text layer/"row") in the spreadsheet.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to localize your Emailify design(s) into multiple languages using the Excel spreadsheet feature.

# Using Markdown Formatting

You can optionally export the text in your Localization spreadsheets as markdown by enabling the Add Markdown toggle, which will automatically render any bold, italic or hyperlinked text in their markdown format (below). This will allow you to edit/add formatting to different parts of your Emailify design's text content before re-importing any translated text.

After editing the exported spreadsheet, and adding/removing markdown formatting, enabling the Import Markdown Formatting toggle with ensure your XLSX import will automatically parse basic supported markdown formatting (below) and apply this to your Figma text layers.

# Supported markdown formatting:
  • You can specify Bold text by using double asterisks **Text to bold** or double underscores eg.__Text to bold__
  • You can specify Italic text by using single asterisks *Italic Text* or single underscores eg._Italic Text_
  • You can specify Bold Italic text by using triple asterisks ***Italic Text*** or triple underscores eg.___Italic Text___
  • You can specify hyperlinks by using the markdown syntax of This is [my link here](https://example.com) in a text paragraph (you can also format the link text by adding the bold/italic syntax inside of the link's [] text area).

# Translating using Lokalise platform API

If you use the Lokalise (opens new window) platform, you can use the built-in API integration by clicking the Localize button in the Emailify header toolbar and selecting the Lokalise API option.

Once you've entered your Lokalise API Token (opens new window) and Project ID (opens new window), you can then export your design(s) and text to the base locale you've setup in your Lokalise project. Clicking the Upload button will automatically export the text content from your email design(s) to your Lokalise project.

You can then add translations for your text in the Lokalise project in your web browser, and then click on the Import Translations button in the Emailify header toolbar to re-import your designs into each translated language.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to localize your Emailify design(s) into multiple languages using the Lokalise platform API feature.

# Creating a reusable component library

Any elements that you add to Figma from the Emailify plugin will automatically be added as native Figma components, which you can customize the style and content of; and any Emailify components inside your current Figma file can be accessed directly from the plugin by clicking on the Library icon button in the header tabs row.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to create, design and customize an Emailify Figma component library.

# Adding components from your Component Library tab

Clicking on the Load all Emailify Components from this Figma file will find and load previews of any Emailify Figma components in your file; clicking on any component in the plugin will automatically add it to the selected Emailify frame, just like any other category.

If you've added any new components to your Figma file since loading the initial components, you can click on the Refresh icon button in the plugin, which will re-check the Figma file for any Emailify components and include them in the list.

# Organizing your component library with custom categories

By default, all of your Figma components will be Uncategorized, but you can optionally create your own custom categories by clicking on the Pencil icon button in the component library subheader tabs row.

This will allow you to create new custom categories, and then move components from any existing categories into any other category that you've added.

You can also remove a custom category at any time, which won't delete any of your Figma components, but will automatically move any components that were in that category back to the Uncategorized category.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to manage custom categories for your Emailify Figma components.

# Searching and sorting your Component Library

To quickly find a custom Figma component in the component library tab, you can use the Search input field to filter down your components list by the layer name of any Figma component.

You can also sort the list of components by any of these options:

Sort by Figma Layer Age

  • Newest to Oldest ↓
  • Oldest to Newest ↑

Sort by Figma Layer Name

  • Figma Layer Name ↓
  • Figma Layer Name ↑

Sort by Figma Layer Order

  • Figma Layer Order ↓
  • Figma Layer Order ↑

Sort Visually (Rows)

  • Visually Top to Bottom ↓
  • Visually Bottom to Top ↑

Sort Visually (Columns)

  • Visually Left to Right →
  • Visually Right to Left ←

# Adding metadata to your Figma components

You can add metadata to your Figma components by clicking on your component layer in Figma, and then clicking on the Component configuration icon button in the Figma right-hand side column next to the component name. This will allow you to enter some text for How to use this component and a URL as a Link to documentation.

If these are present on any of your Emailify components, the label for your component in the component library tab will automatically be linked to your documentation URL, and the description of how to use the component will appear in the tooltip of the component when the thumbnail is hovered over.

# 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 HTML & Mobile Settings button in the plugin header (or the Settings Icon if you're inside the preview window).

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 Emulated Dark Mode toggle in the preview HTML feature in the plugin.

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.

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.

# 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.

# Showing and hiding variations of the same element on mobile and desktop

To achieve the effect of showing a variation of a content element on mobile and another on desktop, you can duplicate the Figma layer and set one to Hide on Mobile and the other to Hide on Desktop, which will ensure that each only appears on either view. Please note that this should be done sparingly, as it will add some extra code to your HTML export each time.

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 native Figma "Link" icon button (opens new window) feature to add a URL. Emailify will automatically include this as an <a> tag in your HTML export.

# Adding links to Figma text layer content areas

If you highlight the text you'd like to link in the Figma text layer, and then click on the native Figma "Link" icon button (opens new window) in the Figma header toolbar area, that will let you paste a URL in. Emailify will automatically include this as an <a> tag in your HTML export.

Only use this for content text layers (not buttons or nav links)

Please note that this only works for normal content text layers; if you need to set a link on a button, social icon or navigation link layer that Emailify generates, you'll need to click on that Figma layer, then click the HTML & Mobile Settings button in the Emailify plugin header, then paste your URL into the link field.

# Adding hover states to buttons

You can apply hover states to any Emailify "🔗 Button" layer by selecting the layer while the HTML & Mobile Settings panel is open, then adding the hex color values and/or selecting the animated transition option you'd like to apply to the selected button layer on hover under the Button Hover State area.

You can set any/all of the following properties:

  • Background Color
  • Text Color
  • Transition

You can preview your hover states using the preview HTML feature in the plugin.

Hover styles aren't supported everywhere

Currently, support for hover 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 hover styles in mind. If an email client doesn't support hover styles, the button's hover state will just fall back to looking the same as its normal state when the user hovers over it.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to add hover states to buttons in your Emailify designs.

# Adding hover states to text and navigation links

You can apply hover states to any Emailify "✍️ Text" or "🍔 Navigation" layer by selecting the layer while the HTML & Mobile Settings panel is open, then adding the hex color value you'd like to apply to any text links in the selected layer on hover under the Links Hover State area.

You can also optionally enable the Fade Transition toggle, which will add a slight color transition to the link's text color change on hover.

You can preview your hover states using the preview HTML feature in the plugin.

Hover styles aren't supported everywhere

Currently, support for hover 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 hover styles in mind. If an email client doesn't support hover styles, the button's hover state will just fall back to looking the same as its normal state when the user hovers over it.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to add hover states to text and navigation links in your Emailify designs.

# Set a custom URL or dynamic template variable for images

You can override the image URL for a certain image layer in your email designs by adding a value to the Override Image Src input field. You can either use a URL for an image that's already uploaded somewhere (eg. https://mycdn/img.jpg) or a dynamic variable for your email platform's templating language (eg. { variable.my_image }) which will be automatically added to the src attribute of the <img> tag when the HTML is exported.

# 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 HTML & Mobile Settings button).

# 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.

You can apply UTM tags (opens new window) or any other query string to your links by either manually adding them to any clickable links (eg. https://www.example.com/?utm_campaign=spring&utm_medium=email&utm_source=newsletter1&utm_content=toplink), or you can also apply a global query string to be appended to every <a> tag's href attribute per email.

You can do this via the Emailify plugin by selecting the parent Emailify container frame, and opening the settings panel (by clicking on the HTML & Mobile Settings button), then pasting in the query string that you'd like to be applied to every link in that email (eg. ?utm_campaign=spring&utm_medium=email&utm_source=newsletter1&utm_content=toplink).

If you're applying a global query string to all of the links in your email, and also applying some query strings to individual links throughout the email, Emailify will automatically include both sets of query string parameters in the final URLs.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to add query string parameters to links in your emails.

# 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 emulated dark mode in the HTML preview window

Enabling the Emulated Dark Mode toggle in the plugin's preview panel will allow you to see an approximate visual of what your design will look like when it's viewed on a device with dark mode enabled by emulating some of the changes that they apply.

Please note that different email clients (that have dark mode support) will apply their own dark mode overrides automatically to invert and update colors to try and maximize readability and contrast, so 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) to accurately see how they're rendered in all email clients in dark mode.

This will also allow you to easily see any of the background color, text color or dark/light image swaps that you've added in the Emailify dark mode override settings.

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.

Different email clients render dark mode differently

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.

# 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.

The default option selected is HTML Email, which will ensure your emails are exported to compiled/inlined production ready emails.

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

# Upload your images online

By default, Emailify will export your HTML emails with any images saved alongside the .html files, so you can upload them wherever you like.

However, if you would like to use the Emailify CDN (content delivery network) to host your images for you, you can enable the Upload Hosted Image URLs toggle. This will upload your images and automatically swap out the URLs in your HTML email to point to the uploaded files.

# Add extra whitespace to the preheader text

You can optionally include the whitespace preheader trick to ensure that the body content of your email doesn't show up in the recipient email client's subject line area. You can turn this on by enabling the Add Whitespace to Preview Text toggle in the email export options.

# Emails with RTL (right-to-left) text content

Emailify will automatically detect if any text layers im your design require RTL (right-to-left) styling, and will automatically apply the dir="rtl" HTML attribute to any text content areas in your exported emails.

# Export developer friendly MJML source code files

Selecting the MJML Email export option will include a developer friendly .mjml source code files for each of your emails.

# Export HTML files for email signatures

Selecting the HTML Signature (BETA) export option will export your email design to .html with the <head> tag removed, and just the body content of the email that can be used as an email signature.

Email signatures must be under 10,000 characters

Please note that if you're using this option, the HTML must not have more than 10,000 characters or you won't be able to use it in most email clients. Consider using a preset signature component found under the Footer category in the Emailify plugin as a starting point to customize.

# 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.

# Built-In Emailify Platform Integrations

These are the email service providers/platforms that Emailify has built-in export/upload integrations with:

Don't 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.

# Uploading your emails to Klaviyo

Emailify includes a built-in integration with Klaviyo, which allows you to upload HTML emails directly from the Figma plugin directly into your Klaviyo templates list.

In the Emailify export panel, select the Klaviyo option from the dropdown list, then paste in a valid Klaviyo private API key, which can be generated from your Klaviyo account settings (opens new window) page.

When you're ready, click the Upload To Klaviyo button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your Klaviyo templates (opens new window) page.

# Edit text/images in Klaviyo (optional)

If you would like to enable content blocks to be editable after the template has been uploaded to Klaviyo, enable the Editable Content toggle in the Emailify export options, and then follow the steps below in Klaviyo:

  1. Create a new email campaign (opens new window) in Klaviyo
  2. Click the Drag and Drop** option in the campaign Content step
  3. Click the My Templates tab, then click on your new template
  4. Click the Save button, then click Back to Content
  5. Click the Edit Email button

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to generate your API key and upload your emails from the Emailify Figma plugin into Klaviyo.

Klaviyo's new editor adds padding to editable text blocks

Due the Klaviyo updating their editor (opens new window), and forcing all templates to use it as of June 6th 2023; unfortunately, if you're exporting HTML emails with the Editable Content toggle enabled in Emailify, Klaviyo will automatically apply ~18px of additional padding around each text element by default, as an inline style attribute to a new <td> element that it injects into the HTML if it's an editable template.

Enabling the Force the padding added by Klaviyo's new editor to be 0px toggle in Emailify does automatically add some extra CSS to remove this padding for all mobile clients and non-Outlook desktop clients like Gmail etc, however, Outlook will still render the padding unless each of the "Padding" values for any editable text blocks in your template are manually changed to "0" when editing the email for your Campaign in the Klaviyo editor.

# Uploading your emails to MailChimp

Emailify includes a built-in integration with MailChimp, which allows you to upload HTML emails directly from the Figma plugin directly into your MailChimp templates list.

In the Emailify export panel, select the MailChimp option from the dropdown list, then paste in a valid MailChimp API key, which can be generated from your MailChimp account settings (opens new window) page.

When you're ready, click the Upload To MailChimp button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your MailChimp templates (opens new window) page.

# Making images editable in MailChimp campaign editor

By default, the text content areas and rows in your HTML template will be editable in the MailChimp campaign editor after it's uploaded; you can also optionally allow images to be editable by enabling the Editable Images toggle in the Emailify export settings.

Enabling editable images will use @1x images (instead of @2x retina)

You can optionally enable your images in the template to be editable in MailChimp with the Editable Images toggle, but unfortunately, MailChimp doesn't support editable @2x retina images (opens new window), so these will be @1x instead.

If you'd prefer to have @2x retina images that aren't editable, please leave this option turned off.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to generate your API key and upload your emails from the Emailify Figma plugin into MailChimp.

# Uploading your emails to Postmark

Emailify includes a built-in integration with Postmark, which allows you to upload HTML emails directly from the Figma plugin directly into your Postmark templates list.

In the Emailify export panel, select the Postmark option from the dropdown list, then paste in a valid Postmark API key, which can be generated from your Postmark account Servers (opens new window) page.

When you're ready, click the Upload To Postmark button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your Postmark Server's templates (opens new window) page.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to generate your API key and upload your emails from the Emailify Figma plugin into Postmark.

# Uploading your emails to HubSpot

Emailify includes a built-in integration with HubSpot, which allows you to upload HTML emails directly from the Figma plugin directly into your HubSpot templates list.

In the Emailify export panel, select the HubSpot option from the dropdown list, then paste in a valid HubSpot Private App API key, which can be generated from your HubSpot account by creating a new Private App (opens new window) from the Integrations -> Private Apps page in your HubSpot account settings by following then steps below:

  1. Click the Create private app button
  2. On the Basic Info tab, give the private a name (eg. Emailify)
  3. Then on the Scopes tab, search for content and tick the content checkbox.
  4. Click the Create app button, then click Continue creating
  5. Click the Show token button, then click the Copy button
  6. Store this key somewhere safe (for future re-use/reference)
  7. Go back to Emailify and paste it in the HubSpot API key input

When you're ready, click the Upload To HubSpot button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your HubSpot templates (opens new window).

HubSpot Marketing Hub Professional or Enterprise account required

As per the HubSpot docs (opens new window) for custom HTML emails: a Marketing Hub Professional or Enterprise account is required to build custom coded email templates.

# Uploading your emails to Salesforce Marketing Cloud

Emailify includes a built-in integration with Salesforce Marketing Cloud, which allows you to upload HTML emails directly from the Figma plugin directly into your Marketing Cloud templates list.

In the Emailify export panel, select the Marketing Cloud (API) option from the dropdown list, then follow the steps below to get your authentication credentials:

  1. Go to Marketing Cloud -> Setup -> Platform Tools ("Apps") -> Installed Packages.
  2. Click New.
  3. Give the package a name and description.
  4. Select to create the package with enhanced functionality.
  5. Save the package.
  6. Under Components, click Add Component.
  7. Select API Integration (after you add an API integration component, it can’t be removed).
  8. Select the Server-to-server integration type.
  9. Set the properties for the component, you'll need to allow Read and Write persmissions for Emails (under Channels) and for Documents and Images and Saved Content (under Assets).
  10. Click Save to save the component.

After that's created, you will be able to copy/paste the following required details from your new integration created above into your Emailify export settings:

  • Client ID (eg. 3e8poc4erkli6ghjavq8kuio)
  • Client Secret (eg. EOjPb4HPWwtyUkcb5CnCpo5C)
  • REST Base URL (eg. https://mcvb5-qrzy845tggex49976pmz38.rest.marketingcloudapis.com/)

When you're ready, click the Upload To Marketing Cloud button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your Content Builder templates (opens new window) in Marketing Cloud.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to generate your API key and upload your emails from the Emailify Figma plugin into Salesforce Marketing Cloud.

# Additional options for Salesforce Marketing Cloud

There are a few other options you can optionally enable for your Salesforce Marketing Cloud exports:

# Add Content Slot

Enabling the Content Slot toggle will automatically add a <div data-type="slot" data-key="uniqueKeyHere" data-label="Drop Blocks or Content Here"></div> tag into your exported HTML, which will allow you to drag and drop other content into your email from the Marketing Cloud editor.

# Add Alias Tags

Enabling the Alias Tags toggle will automatically add an alias="Your Figma layer name" attribute to any of your button, image, social icon or navbar links in your Figma design. It will automatically populate this with whatever each Figma layer name is in your layers panel.

This will allow you to specify aliases for those <a> tag links in your exported HTML to help tracking data by naming them something relevant to the design (eg. "Hero CTA Button").

# Add Conversion Tags

Enabling the Conversion Tags toggle will automatically add a conversion="true" attribute onto any <a> link tags your exported HTML.

# HTML Block Files

Enabling the Blocks toggle will automatically include some extra .html files to your .zip file export; it will automatically split out each row from your Emailify design into their own HTML files, allowing you to extract these more easily if you're planning to create your own re-useable modules in Salesforce Marketing Cloud.

You'll also need to be mindful that the HTML code for each block will still require the CSS/<style> tags and other elements from the <head> tag, so you'll need to spend some time extracting those if you are taking this approach.

Please note, this toggle will only be available when the Marketing Cloud (Zip) platform option is selected in the Emailify export settings panel, and won't be visible if the API option is selected.

# Uploading your emails to Pardot (Marketing Cloud Account Engagement)

Emailify includes a built-in integration with Pardot (now known as Account Engagement (opens new window) in Salesforce Marketing Cloud), which allows you to upload HTML emails directly from the Figma plugin directly into your Pardot templates list.

In the Emailify export panel, select the Pardot (API) option from the dropdown list, then copy/paste the following Pardot credentials and details into the Emailify export settings input fields:

  • Pardot Business Unit ID (eg. 0UvXXXXXXXXXXXXXXX)
  • Pardot Username (eg. [email protected])
  • Pardot Password (eg. *********)
  • Consumer Key (eg. y0Zd2jVHJ5Cc1wQg0l5yMJsXpPs...)
  • Consumer Secret (eg. 8C8F8D11A3B7B026A90C5C3...)

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to generate your API key and upload your emails from the Emailify Figma plugin into Pardot (Salesforce Marketing Cloud Account Engagement).

Once you've pasted all of these details in, Emailify with authenticate with your Pardot instance.

Troubleshooting Pardot authentication issues

If you're having trouble authenticating with your Pardot username/password, you'll need to make sure you're using an account that doesn't have 2FA (2-Factor Authentication), and also ensure that the Pardot connected app policies are set to Relax IP restrictions, and Permitted Users set to All users may self-authorize, as per this support thread (opens new window) recommends.

Once your Pardot API connection has been successfully authenticated, you'll be able to specify the following required fields using the inputs and dropdowns that will show up:

  • Sender Name

  • Sender Address

  • Campaign Name

  • Folder Name

  • Domain Tracking Name

You can also optionally automatically include Pardot editable region tags (opens new window) to your HTML template by enabling the Editable Tags toggle.

Once you've selected the desired options above, when you're ready, click the Upload To Pardot button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your email templates in Pardot.

# Finding your Pardot Business Unit ID

Your Business Unit ID is an 18-character long ID that begins with "0Uv"; you can find your Pardot Business Unit ID by following the steps below:

  1. Log into Salesforce using the same account you use to log into Pardot.
  2. Click on the Setup tab.
  3. Find the Pardot dropdown and click Pardot Account Setup.
  4. You may have multiple Pardot business units; choose the Business Unit ID of the one you want to use with Emailify.

# Uploading your emails to Mailjet

Emailify includes a built-in integration with Mailjet, which allows you to upload HTML emails directly from the Figma plugin directly into your Mailjet marketing templates list.

In the Emailify export panel, select the Mailjet option from the dropdown list, then paste in a valid Mailjet API key and secret, which can be generated from your Mailjet account (opens new window) API settings page.

When you're ready, click the Upload To Mailjet button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your Mailjet marketing templates (opens new window).

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to generate your API key/secret and upload your emails from the Emailify Figma plugin into Mailjet.

# Uploading your emails to Mailgun

Emailify includes a built-in integration with Mailgun, which allows you to upload HTML emails directly from the Figma plugin directly into your Mailgun templates list.

In the Emailify export panel, select the Mailgun option from the dropdown list, then pasting in your Mailgun domain (opens new window) and a valid Mailgun private API key (opens new window) from your Mailgun account.

When you're ready, click the Upload To Mailgun button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your Mailgun account, which can be viewed by logging into your Mailgun dashboard (opens new window), clicking the Sending menu link, then clicking on the Templates link.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to find your API key, get your Mailgun domain and upload your emails from the Emailify Figma plugin into Mailgun.

# Uploading your emails to Brevo (formerly Sendinblue)

Emailify includes a built-in integration with Brevo, which allows you to upload HTML emails directly from the Figma plugin directly into your Brevo marketing templates list.

In the Emailify export panel, select the Brevo option from the dropdown list, then paste in a valid Brevo API key and sender email address, which can be generated from your Brevo account API settings (opens new window) page, and from the Senders (opens new window) page.

When you're ready, click the Upload To Brevo button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your Brevo marketing templates (opens new window).

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to generate your API key/secret and upload your emails from the Emailify Figma plugin into Brevo.

# Uploading your emails to Braze

Emailify includes a built-in integration with Braze, which allows you to upload HTML emails directly from the Figma plugin directly into your Braze marketing templates list.

In the Emailify export panel, select the Braze option from the dropdown list, then paste in a valid Braze API key and REST endpoint region (opens new window), which can be found and generated via your Braze dashboard page.

When you're ready, click the Upload To Braze button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your Braze marketing templates; which you can view by logging into your Braze account, clicking the Templates sidebar item, clicking Email Templates, then clicking the HTML Editor option and browsing the Saved HTML Templates list below.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to generate your API key, find your REST endpoint region and upload your emails from the Emailify Figma plugin into Braze.

# Uploading your emails to SendGrid

Emailify includes a built-in integration with SendGrid, which allows you to upload HTML emails directly from the Figma plugin directly into your SendGrid templates list.

In the Emailify export panel, select the SendGrid option from the dropdown list, then paste in a valid SendGrid API key, which can be generated from your SendGrid account API Keys (opens new window) settings page.

When you're ready, click the Upload To SendGrid button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your SendGrid Design Library (opens new window) templates.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to generate your API key and upload your emails from the Emailify Figma plugin into SendGrid.

# Uploading your emails to SendPulse

Emailify includes a built-in integration with SendPulse, which allows you to upload HTML emails directly from the Figma plugin directly into your SendPulse templates list.

In the Emailify export panel, select the SendPulse option from the dropdown list, then paste in a valid SendPulse API ID and Secret, which can be generated from your SendPulse account API Settings (opens new window) page.

When you're ready, click the Upload To SendPulse button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your SendPulse Email Templates (opens new window) dashboard page.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to generate your API key and upload your emails from the Emailify Figma plugin into SendPulse.

# Uploading your emails to OneSignal

Emailify includes a built-in integration with OneSignal, which allows you to upload HTML emails directly from the Figma plugin directly into your OneSignal marketing templates list.

In the Emailify export panel, select the OneSignal option from the dropdown list, then paste in a valid App ID and API key, which can be found on your OneSignal App ID and API key (opens new window) settings page.

When you're ready, click the Upload To OneSignal button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your OneSignal marketing templates (opens new window).

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you where to find your App ID and API key, and upload your emails from the Emailify Figma plugin into OneSignal.

# Uploading your emails to Selzy

Emailify includes a built-in integration with Selzy, which allows you to upload HTML emails directly from the Figma plugin directly into your Selzy templates list.

In the Emailify export panel, select the Selzy option from the dropdown list, then paste in a valid API key, which can be found on your Selzy API key (opens new window) settings page.

When you're ready, click the Upload To Selzy button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your Selzy templates (opens new window).

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you where to find your API key, and upload your emails from the Emailify Figma plugin into Selzy.

# Uploading your emails to ActiveCampaign

Emailify includes a built-in integration with ActiveCampaign, which allows you to upload HTML emails directly from the Figma plugin directly into your ActiveCampaign templates list.

In the Emailify export panel, select the ActiveCampaign option from the dropdown list, then paste in a valid ActiveCampaign URL and API key, which can be generated from your ActiveCampaign account (opens new window) settings integrations page.

When you're ready, click the Upload To ActiveCampaign button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your ActiveCampaign templates (opens new window).

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to generate your API key and upload your emails from the Emailify Figma plugin into ActiveCampaign.

# Uploading your emails to Customer.io

Emailify includes an option to export your HTML for Customer.io, which allows you to take your exported index.html file and copy/paste it into the Customer.io email layouts section in your account.

In the Emailify export panel, select the Customer.io option from the dropdown list, then when you're ready, click the Export For Customer.io button to start exporting the emails you've selected from Figma to HTML.

Once the export is finished, download the .zip file to your computer and unzip it, then open the "index.html" inside the folder with your email name in a code/text editor and copy all the HTML in the file, then:

  • Login (opens new window) to your Customer.io account
  • Expand the Content menu item in the admin navigation
  • Then click the Email Layouts menu item
  • Click the Create Layout button
  • Click the Start from scratch option
  • Name your layout and click Create Layout.
  • Paste your copied HTML from the exported index.html file into the Edit tab editor.
  • Click the Save changes button.

# Creating a totally blank layout in Customer.io

Make sure you're using a totally blank layout

By default, Customer.io will automatically add its own <html><head><body></body></head></html> tags to any new layout created; you'll need to ensure that this code is removed, otherwise your HTML template will look broken when it's sent out.

In Customer.io, when you start creating an email, you'll need to select a Layout (opens new window), and this needs to be totally blank, so that your own custom HTML template is the only thing that gets rendered.

As you can see in the screenshot below, selecting a Layout that looks blank, isn't actually blank (as it has those <html> tags automatically included and wrapping around your HTML template content)

To fix this, you'll need to manually remove any HTML that Customer.io adds to your blank Layout, and only leave the content tag (below).

After the Layout has been saved and only contains the content tag, your custom HTML template should render as expected.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to get your exported HTML from the Emailify Figma plugin into Customer.io as a custom email layout.

# Uploading your emails to a custom Webhook URL

Emailify includes a built-in Webhook export option, which allows you to send a POST request contain a JSON payload (below) that includes your email's name, HTML code, subject line and preheader text.

# The JSON payload sent from Emailify

The JSON payload sent from Emailify contains the object keys/values below; you'll need to ensure that your custom webhook URL has been created to handle this payload, which you can then use however you like.

{
  "name": "Name of the Figma frame",
  "subject": "Subject line set in Emailify settings",
  "preheader": "Preheader text set in Emailify settings",
  "html": "<html><head></head><body>Exported email HTML</body></html>"
}

In the Emailify export panel, select the Custom Webhook URL option from the dropdown list, then paste in your own custom URL endpoint that has been created to handle the JSON payload sent from Emailify.

When you're ready, click the Post to Webhook URL button to start exporting the emails you've selected from Figma to HTML, and have them automatically sent as a POST request to your custom webhook endpoint.

# Uploading your emails to other platforms

To manually upload your HTML emails into other email service prodider platforms; in the Emailify export panel, select the HTML option from the dropdown list, and ensure the Upload Hosted Image URLs toggle is enabled, then click the Export To HTML button.

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.

Inside your exported .zip file, you can open up the .html emails and copy/paste them into your email platform's template upload/creation area, which will automatically have all the uploaded image URLs included and should be ready to send out.

# 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.

You can also send a simple test email of the HTML to yourself using a free service like PutsMail (opens new window), which is also a great way of ruling out any issues that may be caused by an email marketing platform modifying some of the HTML (as PutsMail doesn't modify the HTML, and sends the email "as-is").

# Using the Email on Acid integration

Emailify includes a built-in integration with Email on Acid, which allows you to upload HTML email tests directly from the Figma plugin directly into your Email on Acid projects.

In the Emailify export panel, select the Email on Acid option from the dropdown list, then paste in a valid Email on Acid API key, which can be generated from your Email on Acid account (opens new window) page, and then paste in your Email on Acid account password (the one you login to the website with) into the second text input field in the Emailify export options.

When you're ready, click the Upload To Email on Acid button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your Email on Acid projects (opens new window).

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to generate your API key and upload your email tests from the Emailify Figma plugin into Email on Acid.

Emailify includes a built-in integration with Netlify, which allows you to upload HTML emails directly from the Figma plugin into your Netlify sites list to use as a shareable preview link to send to stakeholders or anyone else for review/approval.

In the Emailify export panel, select the Netlify option from the dropdown list, then paste in a valid Netlify personal access token (opens new window) to connect Emailify and create a new Netlify site for the current Figma page.

You can optionally click on the Change site name link to update the auto-generated subdomain name from Netlify to something more personalized, and then click the Refresh icon button in Figma after saving it in Netlify to show the updated URL.

When you're ready, click the Upload To Netlify button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your Netlify URL.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to generate your API key and upload your emails from the Emailify Figma plugin into ActiveCampaign.

# Exporting your emails to PDF (as previews of the HTML)

Emailify includes a built-in PDF export option, which allows you to export images of your real rendered HTML emails directly from the Figma plugin to PDF files to use as a shareable preview documents to send to stakeholders or anyone else for review/approval.

In the Emailify export panel, select the PDF Previews option from the dropdown list, then when you're ready, click the Export To PDF button to start exporting the emails you've selected from Figma to PDFs, and then download your .zip file from the confirmation screen when it's completed.

The export will also include static JPG images of your emails, too.

Export PDFs as Grayscale Wireframes

If you would prefer to export your PDF previews with Lorem Ipsum text, grayscale colors and blank images, you can optionally toggle the Enable Wireframe Mode setting, which will automatically convert your email designs into stripped back previews; sometimes this is useful for early client feedback.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to export your emails from the Emailify Figma plugin to PDF/JPG previews.

← Troubleshooting Emailify →