Video Tutorial: Export banners to HTML/GSAP from Figma
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.
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.
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 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.