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.

If you make any updates in your Figma design afetr the preview has loaded, clicking the Refresh icon will re-generate the preview HTML content and any updated images.

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)

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.