Adding animated GIFs to your email designs

You can add animated .gif files from your computer to your email designs as inline images (inside a Column) or background images (on a Row, Hero or Wrapper).

Video Tutorial: Add animated GIFs from Figma to HTML email exports

This video walks through how to add animated GIFs to your email designs and export production-ready, responsive HTML emails from Figma using the Emailify plugin.

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 slower export times.

Why is my exported GIF larger than the original GIF? ​

If you change the GIF layer's aspect ratio in Figma, Emailify has to recreate the GIF frames into a new .gif file so the exported email matches the cropped image area. HTML email clients do not support CSS cropping for GIFs in the same way Figma previews them, so recreating the frames can increase the final file size and slow down export.

To keep the exported GIF closer to the original file size, resize the GIF proportionally and keep the original aspect ratio.

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, Add the word Transparent anywhere in your Figma layer's name (for example, 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.

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, Add the word Transparent anywhere in your Figma layer's name (for example, 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 in Outlook: While most email clients support animated GIFs, Outlook 2019 and earlier only display the first frame of a GIF instead of playing the animation. Ensure that frame includes key imagery or text so it still works as a static fallback. In Outlook with Office 365, GIFs play automatically three times before pausing with a play button to replay.