← Back to Bannerify Video Tutorials

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
• Read the full video transcript
• Read: Exporting your banners to animated GIF files
• Next: Export banners to WebM videos from Figma
• Open Bannerify in the Figma Community