Previewing your HTML email in Figma

Clicking on the Preview button in the Emailify plugin header will automatically generate a real HTML preview of your email directly inside the Figma plugin.

While the preview window is open, updates you make to your Emailify layers in Figma are reflected in real time in the HTML preview.

Previewing your email at different 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 (726px Wide)
  • iPhone 15 Pro Max (430px Wide)
  • iPhone 15 (393px Wide)
  • iPhone 13 Mini (375px Wide)
  • iPhone 12 Mini (360px Wide)
  • iPhone SE (320px Wide)

Live preview changes in HTML preview window from Figma ​

With the HTML preview open, you can keep editing your Figma layers and immediately see those changes update in the preview window, without needing to click Refresh each time.

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.

This preview mode 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.

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 or Email on Acid to accurately see how they're rendered in all email clients in dark mode.

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

Checking the file size of your HTML email 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.

Previewing web safe font fallbacks in your email ​

If you've specified any web safe fallback fonts for custom web fonts in your email, you can preview how they will look by toggling the Show Fallback Fonts switch at the bottom of the Emailify preview window.

Auto-layout linting (and auto-fixing) for Emailify layers ​

When previewing your HTML in the Preview feature of the plugin, it will automatically detect if any of your layers that were added via the Emailify plugin still have the correct Figma auto-layout properties to ensure a visually consistent export to HTML.

It will show you a list of layers that need to have their auto-layout properties tweaked (eg. changing "Fixed" height to "Hug"); you can optionally automatically apply these changes by clicking the Apply all Layer Fixes, which will update the Figma layers flagged with the auto-layout property tweaks that are required.

Manually moving and resolving Emailify layers that are in the wrong place ​

When previewing your HTML in the Preview feature of the plugin, it will automatically detect if any of your layers that were added via the Emailify plugin are still in the correct structure that they were created with (eg. Row Layer -> Column(s) Layers -> Content Layers) to ensure a visually consistent export to HTML.

It will show you a list of layers that need to to be manually moved, along with instructions for each item (eg. "Move this Row layer back into the main Email frame"), and a button to instantly jump to the layer on your page and in your Figma layer's list, making it easier to find and move as required.