Video Tutorial: Export banners to HTML/GSAP from Figma

This video walks through how to export production-ready animated banners from Figma to HTML/GreenSock (GSAP) in seconds using the Bannerify plugin.

Video Tutorial: Export HTML banners from Figma to multiple ad platforms

This video walks through how to export animated HTML banners from Figma to multiple ad platforms with one click using the Bannerify plugin.

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.

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).

Browser ad blockers can stop local banner previews from playing correctly. If an exported HTML banner looks frozen, does not animate, or behaves differently in your browser preview, temporarily disable ad blocker/privacy extensions for the local preview file or test in another browser before re-exporting.

Each HTML output format has its own setup and packaging requirements. Use the Ad Platform Options guide to choose the correct format before exporting.

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.

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.

Choosing an HTML output format

Bannerify can export platform-neutral HTML, platform-specific upload packages, responsive layouts, and several batch formats. Each option in Code Output Settings has a dedicated guide under Ad Platform Options, including its setup, click handling, package structure, and testing notes.

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 want to exclude any banners from being included (without re-loading the selected banners 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 <p> tags instead of <svg> toggle option.