--- url: "/emailify/design/preview.md" description: "The preview window in Emailify will allow you to see and interact with your email in real HTML before you export it." --- # Previewing your HTML email in Figma > The preview window in Emailify will allow you to see and interact with your email in real HTML before you export it. [Video](/assets/videos/emailify/design/preview-email.mp4) 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. > **Info:** **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. > **Tip:** 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) > **Note:** **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. > **Tip:** 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. [Video](/assets/videos/emailify/design/live-preview-edits-desktop.mp4) ## Toggling emulated dark mode in the HTML preview window [Video](/assets/videos/emailify/design/emulate-dark-mode.mp4) > **Warning:** The [support for dark mode override styles](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) 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](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/) 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](/emailify/design/dark-mode) settings. > **Tip:** To _accurately_ see what your design looks like in [email clients that support dark mode overrides](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/), it's always worth doing a test of your own emails using a service like [Litmus](https://www.litmus.com/) or [Email on Acid](https://www.emailonacid.com/), 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](https://www.litmus.com/) or [Email on Acid](https://www.emailonacid.com/) to accurately see how they're rendered in all email clients in dark mode. It's also worth using [some other clever design techniques](https://www.campaignmonitor.com/blog/email-marketing/designing-an-email-for-dark-mode-dark-and-light-optimization/) 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](https://mailchimp.com/help/gmail-is-clipping-my-email/). > **Warning:** **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. > **Tip:** [Reducing or consolidating the number of "Row" layers in your email](/emailify/design/optimizing-html-file-size) is the best way to reduce your HTML file size. ## Previewing web safe font fallbacks in your email [Video](/assets/videos/emailify/design/preview-font-fallbacks.mp4) If you've specified any web safe [fallback fonts](/emailify/design/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 [Video](/assets/videos/emailify/design/linter-auto-fix.mp4) 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 [Video](/assets/videos/emailify/design/manual-move-layers.mp4) 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. > **Tip:** You can [apply settings in bulk](/emailify/design/settings#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.