--- url: "/emailify/content/gifs.md" description: "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)." --- # 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 tutorial is a complete step-by-step guide showing you how to add animated GIFs to your email designs and export production-ready, responsive HTML emails from Figma using the Emailify plugin. [Embedded media](https://www.youtube.com/embed/Jmy2Tuzzwjg) > **Warning:** Uploading animated GIF images requires an Emailify Pro license. > **Note:** 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 [Video](/assets/videos/emailify/content/inline-animated-gif.mp4) 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. > **Tip:** You can set the [alt text](/emailify/content/alt-text) attribute or add a [clickable URL link](/emailify/content/link-images) to your images by using the Settings button in the plugin header. > **Note:** 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. ## Add an animated GIF as a background image on a Row, Hero or Wrapper layer [Video](/assets/videos/emailify/content/gif-background-image.mp4) 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. > **Note:** 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. > **Warning:** **Animated GIFs in Outlook:** While most email clients [support animated GIFs](https://www.caniemail.com/features/image-gif/), 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.