---
url: "/bannerify/export/html.md"
description: "Once you've finished animating your layers in the timeline, you can export your banners to animated HTML banners"
---
# Exporting your banners to HTML
> Once you've finished animating your layers in the timeline, you can export your banners to animated HTML banners
### Video Tutorial: Export banners to HTML/GSAP from Figma
This video tutorial is a complete step-by-step guide showing you how to export production-ready animated banners from Figma to HTML/GreenSock (GSAP) in seconds using the Bannerify plugin.
[Embedded media](https://www.youtube.com/embed/SS2J6k5Wo7s)
### Video Tutorial: Export HTML banners from Figma to multiple ad platforms
This video tutorial is a complete step-by-step guide showing you how to export animated HTML banners from Figma to multiple ad platforms with one click using the Bannerify plugin.
[Embedded media](https://www.youtube.com/embed/Q16MPp9YKjg)
[Video](/assets/videos/bannerify/export/html-export.mp4)
## Exporting to HTML
Once you're happy with your banners and would like to export them to HTML, you can click the **Export to HTML** button in the Bannerify header. This will open the HTML export settings.
After you've configured all of your HTML export settings, you can click the **Export Banners** button at the bottom of the export panel to begin exporting your banners from Figma to HTML.
After Bannerify has finished processing your banners, you'll be shown a confirmation message; you can download your `.zip` file containing your exported banners by clicking the **Download your .zip file** button.
After you've downloaded your `.zip` file from Figma to your computer, you can open your file explorer to the directory where it was saved. **Double clicking** on the exported `.zip` file will unzip the contents and let you use your banners however you like.
> **Note:** **Please ensure you unzip the exported `.zip` file first** before using the banners or uploading them to an ad platform, as the exported .zip file contains all of the individual banners (and the nested `_zips` folder, where all of your banners are pre-zipped individually, ready to be uploaded to an ad platform).
> **Tip:** **Saving file downloads from Figma** If you're using the Figma **desktop app**, you'll see a prompt appear to download your file. However, if you're using Figma in a **web browser**, your file will automatically be downloaded to your computer by default (usually to the **Downloads** directory on your computer).
## Standard Options
### Adding a 1px black border to all banners
Enabling the 1px border option will automatically include a `1px solid black` border to the CSS of all of your banners. This can be helpful for certain advertising platforms that prefer (or require) you to include a 1px black border to your banners.
### Adding a preloader animations to all banners
Enabling the preloader option will automatically include a preloader to the HTML of all of your banners. This loading animation will be displayed until all of the banner's images have loaded in the web browser.
## Playback Options
### Setting the number of times to play through banners
Setting this option will specify how many times you would like the banner timeline on all of your banners to play through from start to end. The default option is **1**, which means that your banners will play through the animation timeline from start to end **once**.
You can change this number by entering a higher number into the number input field, like **6**, for example. This would ensure that the timeline animation for all of your banners are played through **six times** from start to end.
### Infinitely looping your banners
You can repeat the animation timeline to play on repeat _forever_ in all of your banners by enabling the **Infinitely loop all banners** option.
## Include individual .zip files for each banner
Enabling the **Include individual .zip files for each banner** toggle will include an additional folder called `_zips` in your exported file. The `_zips` folder will contain individual zip files for each of the banners that you've exported. This can be useful and time saving if your advertising platform requires you to upload a zip file for each banner.
> **Info:** **Optionally include backup.jpg from zips** If you want the `backup.jpg` image file to be included inside each zip, enabling the **Add "backup.jpg" to individual zip files** toggle will ensure that `backup.jpg` images are included inside your individual zips. If this toggle is disabled while individually zipping your banners, and you've _also_ enabled the **Include a "backup.jpg" for all banners** toggle, all of your backup images will also be included in a `_backups` folder inside the root directory of the main Bannerify exported `.zip` file.
## Google App Campaign playable exports
If Google Ads asks for the Exit API or playable App Campaign metadata, select the **Google App Campaign (Playable)** code output platform. This export includes Google's `exitapi.js` script, uses `ExitApi.exit()` for banner clicks, adds the required orientation metadata, and scales the banner to fit Google's full-screen playable placements.
Google App Campaign HTML5 assets must use files that are included in the uploaded `.zip` bundle. When this export finds an external video URL in a video layer, Bannerify downloads the video, adds it to the banner's `videos` folder, and rewrites the banner HTML to use that local file. Keep each uploaded banner `.zip` under Google's 5MB limit, so make sure any video files are small enough alongside the other image and code assets.
> **Note:** Use **Google Ads** or **Google Display Network** for standard uploaded display banners such as `300x250` display ads. The **Google App Campaign (Playable)** option is only for Google HTML5/playable App Campaign uploads.
## Including or excluding banners in your export
By default, all of the top level layers in your Figma file that are loaded into Bannerify as banners will be included in your export; if you would like to exclude any banners from being included (without [re-loading the selected banners](/bannerify/design/figma-frames#refreshing-your-banners-from-figma) in), you can toggle the **Include Banner in Export** switch in any banner's timeline header to "off"; this will hide that banner's timeline and also exclude it from being added to any exports.
## Minified code exports
To optimize file sizes, Bannerify will minifies all the code that's exported by default, and will save out a single `.html` file per banner. If you need your code to be more readable and/or split out into separate `.html`, `.css`, `.js` files, you can turn off the **Minified** toggle in the code export options.
## Export text as paragraph tags instead of SVG images
By default, any text layers in your Bannerify timeline will be exported as SVG images (in image tags), but you can optionally export these as rich text (in paragraph tags) instead by enabling the **Export text as