# Troubleshooting Emailify
- Non-Emailify Modules
- Setting image format overrides
- Border radius not showing in Outlook
- Can't add links to normal Figma text layer content
- Columns stacking on desktop in Gmail
- Gmail clipping the email
- Colors/gradients in GIFs look a bit grainy
- Transparency isn't showing in GIFs
- GIF image not showing in Gmail
- Understanding how image blocking works in some clients
- Forwarding any HTML email templates breaks them
- Certain VPNs may be blocked from displaying uploaded images
- Dark mode overrides aren't supported everywhere
- Google Fonts not showing up in some email clients
- 1px white line on "reversed order" rows in certain Outlook versions
- Blank file extensions using Figma desktop app on Windows
- Thin white line around image exports
- Pixelated image exports
- VPN may be required in China
# 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.
# Border radius not showing in Outlook
Unfortunately, the border-radius property isn't supported in Outlook, so it will always fall back to normal square edges instead. Please see the border-radius support list (opens new window) for a better idea of which email clients support this CSS property.
# Can't add links to normal Figma text layer content
If you highlight the text you'd like to link in the Figma text layer, and then click on the native Figma "Link" icon button (opens new window) in the Figma header toolbar area, that will let you paste a URL in, which Emailify will automatically render.
Only use this for content text layers (not buttons or nav links)
Please note that this only works for normal content text layers; if you need to set a link on a button, social icon or navigation link layer that Emailify generates, you'll need to click on that Figma layer, then click the HTML & Mobile Settings button in the Emailify plugin header, then paste your URL into the link field.
# 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.
# Colors/gradients in GIFs look a bit grainy
GIFs are a bit different from normal JPG/PNG images, as they can only contain a maximum of 256 colors. If you're using highly detailed images or gradients with lots of color variation, it's expected that it won't look as sharp or have the same color accuracy as the original images used as the source of the GIF due to this limitation of the GIF format.
# Transparency isn't showing in GIFs
The GIF file format supports either 0% opacity or 100% opacity, but nothing in between. This means that you can have an animated GIF with a completely transparent background behind elements that are completely opaque and visible. This means that layers either need to be completely transparent or not; any layers with lower than 50% opacity will be transparent, while any layers with opacity greater than 50% will be opaque.
# GIF image not showing in Gmail
If you've used GIFs in your design, but aren't seeing them show up when you do a test send to a Gmail inbox, it's likely that the Gmail image caching limit of 20mb (opens new window) is being hit, which causes it to not render. You can try reducing the dimensions of the GIF, or using a GIF that's not as long (with less animation frames) to try and reduce the size.
# Understanding how image blocking works in some clients
Thare a couple of really good articles below describing what image blocking is and which email clients enable it by default (mainly Outlook), whereas other clients like Gmail, Android, Apple/iOS etc all show images by default.
Unfortunately, it's not related to if the images are secure (SSL) or not, it's always just across the board for any images inside of the email.
The upside is that usually if the recipient is using one of the former email clients, they're fairly used to this happening and clicking the "show images" button, or more likely have already enabled images to show by default for incoming emails.
# Forwarding any HTML email templates breaks them
Unfortunately, if someone decides to forward a custom HTML email that they've received to someone else, this often visually breaks the email after it's forwarded on to somebody else.
The reason for this is that different email clients will modify (or remove) part of the HTML code when the email gets forwarded, causing it to break; as this When Forwarded Emails Break (opens new window) article from Litmus details:
It’s common knowledge that email clients all render email differently. When a subscriber forwards an email, some email clients make changes to the code of the forwarded message. This can include stripping out certain HTML elements, wrapping your email in a blockquote, or inserting additional classes to your code—all of which can break your design and make the email less functional for the recipient of the forwarded email.
# Certain VPNs may be blocked from displaying uploaded images
If you've enabled the Upload Hosted Image URLs feature, or uploaded the HTML email to any email platform using the built-in Emailify export options, there's a very rare edge case where certain IP addresses assigned by some VPNs are blocked by the image host and will prevent the image from loading.
If you're having any issues with images not loading, this is the likely cause (please temporarily turn off your VPN to verify this yourself).
# 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 TinyImage (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 accounts server may be blocked by "The Great Firewall of China". If you're seeing a activation error, despite using a valid key, you will likely need to use a VPN (opens new window) to resolve the issue.