---
url: "/bannerify/tutorials/animate-and-export-banners-to-html-from-figma.md"
description: "This video shows how to use the Bannerify Figma plugin to turn top-level Figma frames into animated banner ads. It covers applying and previewing animations, refreshing edits, and exporting banners to HTML with options like Vanilla HTML/CSS, dark mode, image compression, and ad-platform-specific formats."
---

# Animate and export banners to HTML from Figma

> This video shows how to use the Bannerify Figma plugin to turn top-level Figma frames into animated banner ads. It covers applying and previewing animations, refreshing edits, and exporting banners to HTML with options like Vanilla HTML/CSS, dark mode, image compression, and ad-platform-specific formats.

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

This video tutorial is a complete step-by-step guide showing you how to animate and export production-ready HTML banners from Figma in seconds.

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

**What this video covers**

This video shows how to use the Bannerify Figma plugin to turn top-level Figma frames into animated banner ads. It covers applying and previewing animations, refreshing edits, and exporting banners to HTML with options like Vanilla HTML/CSS, dark mode, image compression, and ad-platform-specific formats.

**Things you'll need**

- Figma
- Bannerify plugin installed in Figma

**Steps**

1. Install Bannerify from Figma Community, or duplicate the example file from the Files tab to get started quickly.
2. Open Bannerify from the Plugins menu and review how each top-level frame in the Figma file becomes a separate banner in the plugin.
3. Assign animation styles to individual layers, groups of layers, or an entire banner, then preview the motion with the play button and adjust timing, loop, delay, and speed.
4. Use multi-select, quick select by layer name, and the magic delay and magic speed controls to apply consistent animation settings across multiple layers or banners.
5. If you change the Figma design after opening Bannerify, click the refresh button so the plugin updates the preview with the latest layer positions and content.
6. Click Export Banners to HTML, choose options such as dark mode, black border, preloader, image compression, and the export format, then export the banners to a .zip file.
7. Open the exported folder and use index.html to review the responsive preview page and replay the animations.

**Useful links**

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