# 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 modules 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 module 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 modules) 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 modules from inside one Emailify frame into another also works, too.

# Selecting an Emailify frame

To select an email to start adding modules 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 modules

Emailify is powered by modules 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 module by adding responsive design overrides and URLs/alt text etc via the Emailify plugin, too.

# Browsing email module categories

To browse the modules 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 modules that the category contains, which you can then scroll up and down to visually browse the subcategories inside the selected tab.

# Categories

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

# Favourites

Any modules 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 modules like a brand logo, "view online" links, a navigation menu, social icons etc.

# Images

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

# Content

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

# CTAs (Call To Action)

These modules are primarily used for asking the user to click something or take an action; these can be modules 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 modules for displaying your brand logo and address details, social media links, unsubscribe links or app download buttons.

# Using the Favourites category

Any modules 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 modules from your favourites by clicking on the Trash icon; this will remove the module from your favourites list, but won't "delete" it from the other categories.

# Adding modules to the Figma canvas

Once you've browsed and found a module like, you can click on the module thumbnail to instantly add it to your Emailify container frame on the Figma canvas.

# Customising the design and content of your modules

When you a any Emailify module 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 and horizintal 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.

Emailify content modules use Figma's Auto-Layout 3

The modules included with Emailify are using auto-layout, making them really easy to adjust layout values like padding and space between columns or elements.

# Re-ordering modules 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.

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

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

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

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

# Hiding a layer from displaying on mobile

If you'd like to hide a certain element on mobile 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. This will prevent the element from showing on mobile, while still being visible on desktop.

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.

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

# 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 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 on the MJML documentation site.