---
url: "/bannerify/tutorials/export-banners-to-gifs-from-figma.md"
description: "The video shows how to use the Bannerify Figma plugin to export animated banner designs from Figma to GIF files. It also demonstrates the export settings, the ZIP download, and the generated index.html preview page."
---

# Export banners to GIFs from Figma

> The video shows how to use the Bannerify Figma plugin to export animated banner designs from Figma to GIF files. It also demonstrates the export settings, the ZIP download, and the generated index.html preview page.

[← Back to Bannerify Video Tutorials](/bannerify/tutorials)

[Embedded media](https://www.youtube.com/embed/J2wk4r1QL1k)

**What this video covers**

The video shows how to use the Bannerify Figma plugin to export animated banner designs from Figma to GIF files. It also demonstrates the export settings, the ZIP download, and the generated index.html preview page.

**Things you'll need**

- Figma installed
- Bannerify plugin installed
- Animated banner designs already set up in Bannerify

**Steps**

1. Install the Bannerify plugin from Figma Community or Plugins by searching for “Bannerify” and clicking Install.
2. Open your Figma file, then right click on the page and choose Plugins > Bannerify.
3. Confirm that your parent frames are loaded as banners and that your layer animations are already set up.
4. Click “Export to GIF/Video” to open the export settings panel.
5. Choose whether the GIF should loop, adjust the output quality slider, and optionally enable the preview page dark mode.
6. Click “Export to GIF” and wait while Bannerify plays each banner, renders the GIFs, and zips the results.
7. Save the ZIP file, unzip it, and open the included index.html file to preview all exported GIFs together.

**Useful links**

- [Watch the full video on YouTube](https://www.youtube.com/watch?v=J2wk4r1QL1k)
- [Read the full video transcript](https://www.hypermatic.com/tutorials/how-to-export-animated-banners-from-figma-to-gi-fs-using-bannerify)
- [Browse Bannerify tutorial docs](https://docs.hypermatic.com/bannerify/tutorials)