Clicking 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.
Using the preview panel tabs
The preview panel includes four focused views:
- HTML Preview shows the current responsive HTML, updates as you edit the Figma layers, and includes a simple dark mode preview toggle.
- Preflight checks the production HTML for practical subject, preheader, accessibility, link, image, delivery, and Gmail clipping issues.
- Test Send prepares the production HTML so you can copy it into htmltest.email for a manual inbox test.
- Email Previews submits the production HTML for screenshot rendering in up to 12 selected email clients. It is available while free Pro trial uses remain or with an active Emailify Pro license.
Preflight, Test Send, and Email Previews use Emailify's production-HTML access, so they are available with an active Pro license or while free Pro trial uses remain. See Testing your HTML emails before sending for the complete Email Previews workflow and data-processing details.
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 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 17 Pro Max (440px Wide)
- iPhone 16 Pro Max (430px Wide)
- iPhone Air (420px Wide)
- Google Pixel (412px Wide)
- iPhone 17 (402px Wide)
- iPhone 16 (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 email width between 600px and 640px is typically recommended because some email client or app reader panels can be less than 700px wide and may render the mobile styles 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.
Previewing dark mode
Turn on Dark Mode in the HTML Preview toolbar to compare the current email with Emailify's approximate local dark mode preview. You can keep using the preview-width selector to review the same dark mode design at desktop or mobile widths. Dark Mode is unavailable while the combined Desktop & Mobile Hybrid view is selected.
If the email contains Emailify dark mode overrides, use the adjacent Overrides switch to show or hide its explicit background, text, border, and image-swap styles.
The toggle is a design aid, not a client or device emulator. Email clients apply their own dark mode transformations, and the local preview does not reproduce authenticated sanitizers, native rendering engines and fonts, app chrome, delivery processing, or every client/version difference.
The support for dark mode override styles in email clients is limited. Emailify's explicit overrides are intended for supporting Apple Mail versions; Gmail, Outlook, Windows Mail, Yahoo, and other clients may apply different automatic color behavior.
For release validation, use the Email Previews tab to request screenshots from the real dark-mode clients available in the live catalog. See Testing your HTML emails before sending.
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 (for example, 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 (for example, 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 (for example, "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.