# Troubleshooting Emailify

# Non-Emailify Modules

At the moment, if you add a frame or element to an Emailify frame, it will be treated as a full width image layer. We'll be working towards making it easier for you to create/add your own bespoke modules in a future release!

# Setting image format overrides

Emailify will automatically detect if a layer contains areas of full transparency and set PNG as the default export format, otherwise it will be set to JPG. You can override this to set the export format of any layer to JPG or PNG by adding your own export setting.

# Columns stacking on desktop in Gmail

Some email service providers (like MailChimp) will try to modify your email's HTML before it gets sent out, which can cause some of the columns in your email to stack on Gmail when viewed on desktop, instead of being in a row.

Usually for the purpose of these platforms modifying your HTML is to ensure they're "inlining" styles onto your HTML elements; however, Emailify automatically pre-inlines all of the CSS styles, so that your emails are production ready. If you can find a setting in your email service provider's HTML/import options to "disable" this inlining or modification, this should resolve the issue.

If you're unsure if it's being caused by your email service provider or the code itself, please use a free service like PutsMail (opens new window) (which won't modify any of your HTML) to send yourself an email test. If the test works from PutsMail (opens new window), then your email service provider is modifying your HTML before it's sent out.

# Gmail clipping the email

Gmail clips emails (opens new window) that have a message size larger than 102KB, and hides the full content behind a "View entire message" link. To avoid this, use the Preview button to see the size of your HTML file before exporting, and remove as much content as possible to try and get the file size down.

# Dark mode overrides aren't supported everywhere

Currently, support for dark mode styles in email clients (opens new window) is still relatively low; so please be aware of this and try to design your emails with the "progressive enhancement" of these dark mode overrides in mind.

It's also worth using some other clever design techniques (opens new window) for creating your email with dark mode in mind as a fallback with other email clients, too.

# Google Fonts not showing up in some email clients

Currently, support for custom fonts in email clients is still quite varied (opens new window).

Also, certain email service providers (like MailChimp) actively strip them out before the email is even sent to ensure that only web safe fonts are used.

However, Emailify still includes Google Font @imports, and also sets a fallback websafe font (eg. "Arial", "Georgia" or "Courier") if a Google Font is being used for rich text. They'll be visible on any email clients that support the use of @font-face in emails.

Use custom fonts in your images

Please note that if you need to ensure a custom font is visually consistent across all email clients, it may be worth putting your text layers inside of an "Image" frame. This text content will be exported as part of the image itself, and therefore won't be relying on custom web font support to display correctly.

# 1px white line on "reversed order" rows in certain Outlook versions

There's a bug in some versions of Outlook when using the reverse column (opens new window) setting where a 1px white line shows up on the left hand side of the left column. This happens when the row with the "reverse" setting (which uses the dir="ltr" attribute in the HTML) also has padding applied to it. To resolve this, you can set the padding of the "Row" layer in Figma to "0" and add any padding onto the inner columns instead.

# Blank file extensions using Figma desktop app on Windows

There's a known issue with the Figma desktop app (only on Windows), which also happens for normal file exports from Figma. When you go to save your file, you may see an "all files" label. If you ignore this and continue by clicking "Save", it should still save the file with the correct extension and allow you to open it as expected after it has downloaded to your computer. If it still saves the file with a blank extension, you should be able to rename the file to manually append the correct extension to the file name.

# Thin white line around image exports

Occassionally some images will contain a faint, thin white line around the edges. Figma does this (opens new window) if a layer isn't positioned on a rounded pixel value (eg. Y: 156.76 or X: 56.3) will automatically result in this sub-pixel line getting included in the export. To resolve the issue, please ensure that your layer positions are all rounded pixel values.

# Pixelated image exports

If you're exporting your email while the image assets in Figma are still progressively loading, they may be exported looking pixelated, as the image wasn't fully loaded in the Figma file before it was exported. To resolve this, please ensure that all of the images have loaded 100% and are looking sharp inside the Figma file before exporting your emails with the Emailify plugin.

To help further with solving this issue, you can use the "Downsizer" feature (opens new window) in our TinyImage Figma plugin (opens new window) to shrink down your image fills to match their layer size, which will shrink their file size and ensure they load much faster in your Figma file.

# VPN may be required in China

Please note, if you're in China, the license server may be blocked by "The Great Firewall of China". If you're seeing a license error, despite using a valid key, you will likely need to use a VPN (opens new window) to resolve the issue.