Uploading animated GIF images requires an Emailify Pro license.
If you’re using the free trial version of the plugin, GIFs will be uploaded as static images instead; or you can use the Export HTML option with the Upload toggle set to off to save export and download the animated .gif files with your HTML emails locally.

​
Add an animated GIF as a content image inside your Column layers

You can drag and drop a .gif file from your computer into any Column layer, which will add it as a Figma image content layer.

To keep your GIF quality high, please ensure you resize the layer proportionally (by holding the Shift key while resizing your Figma layer) to maintain the original aspect ratio, which will make sure that Emailify can use the original GIF file data in your exports.

If you change the aspect ratio of your Figma layer to be different to the original GIF, Emailify will need to re-create your GIF frames into a brand new .gif file to account for the cropped image area (as HTML email clients don’t support CSS cropping), which will lead to larger GIF file sizes and a slower export times.

You can set the alt text attribute or add a clickable URL link to your images by using the Settings button in the plugin header.
Emailify will try to automatically detect if your GIF contains a transparent background; if your GIF does require transparency, and the plugin isn’t detecting that by itself, please add the word Transparent anywhere in your Figma layer’s name (eg. My Layer Name - Transparent) to force it to be exported with a transparent background enabled.

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.

Animated GIFs will be displayed as static PNGs in preview mode Please Info, due to GIFs taking longer to render from Figma layers, they will only be exported in your final HTML exports in order to speed up refreshing previews inside the plugin.

​
Add an animated GIF as a background image on a Row, Hero or Wrapper layer

If you need to use an animated GIF as a background image behind real rich text content, you can drag a .gif file from your computer onto any Row, Hero or Wrapper frame’s Figma fill, which will set it as an image fill on the background of the frame. Any additional Figma fills (eg color/gradient overlays) on this frame will also be included in the final .gif export.

The advantage of this is that the content layers inside of the frame will still be rendered as individual rich content layers in your HTML email export, on top of the animated GIF background.

Emailify will try to automatically detect if your GIF contains a transparent background; if your GIF does require transparency, and the plugin isn’t detecting that by itself, please add the word Transparent anywhere in your Figma layer’s name (eg. My Layer Name - Transparent) to force it to be exported with a transparent background enabled.

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.

Animated GIFs will be displayed as static PNGs in preview mode Please Info, due to GIFs taking longer to render from Figma layers, they will only be exported in your final HTML exports in order to speed up refreshing previews inside the plugin.

Was this page helpful?

Content ImagesSocial Icons