Video Tutorial: Add animated GIFs from Figma to HTML email exports
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.
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.
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.