← Back to Emailify Video Tutorials

What this video covers

The video shows how to install the Emailify Figma plugin and use it to add animated GIFs to HTML email designs from Figma. It demonstrates GIFs as hero backgrounds, inline images, and standalone content layers, then exports the email to HTML to confirm the GIFs render in the output.

Things you'll need

• Figma
• Emailify
• A GIF file to place into the design

Steps

1. Install Emailify from the Figma Community under the Plugins tab.
2. Open a Figma file, run the Emailify plugin, create a new frame, and click Add New Emailify Container.
3. Add a GIF as a hero background by selecting a Hero Background-style module such as Full Width Background Image or Hero CTAs, then replace the image fill with a GIF.
4. Add GIFs as inline images by drilling into an image component or image layer and replacing the image fill with a GIF.
5. Drag a GIF directly into a content frame to add it as its own inline layer, and optionally add text or other layers inside a frame-based module.
6. Use additional fills such as opacity or gradients on top of GIFs, and adjust image sizing in the settings icon if needed.
7. Click Export to Code, download the .zip file, and open the exported HTML preview to verify the GIFs rendered correctly.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Adding animated GIFs to your email designs
• Next: Embed custom web fonts in HTML email exports from Figma
• Open Emailify in the Figma Community