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.
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.
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
The support for dark mode override styles in email clients is limited to Apple Mail on iOS/MacOS; which means dark mode overrides will not work on any other clients like Gmail, Outlook etc. Please be aware of this and try to design your emails with the progressive enhancement in mind.
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.
You can apply settings in bulk by opening Settings, then selecting multiple Emailify layers of the same type in Figma. Any setting you change will be applied to all selected layers.