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.

GIFs are displayed as static images in preview mode to speed up the preview loading (due to GIFs taking longer to render), but they will be animated in your final HTML exports from the plugin.
You can edit any mobile overrides while in the preview window is open by clicking on the Settings button in the preview panel header.

​
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)
Mobile breakpoint for the emails. The HTML emails exported from Emailify have a single “breakpoint” that’s automatically set by the width of the desktop frame in Figma; for example, if your Emailify frame is 600px, the mobile styles/overrides will start showing at 599px and below.
Keeping the width of the email between 600px - 640px is typically recommended, as some email client/app’s inbox reader panels can be less than 700px wide, which would render the mobile styles at that width instead of the desktop layout.

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

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

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.

If your HTML size is over 102kb, the file size in your preview window will be highlighted in yellow as a visual flag to indicate that your email has exceeded that limit.
Reducing or consolidating the number of “Row” layers in your email is the best way to reduce your HTML file size.

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

Was this page helpful?

Add Starter ComponentsInsert New Rows