← Back to Bannerify Video Tutorials

What this video covers

The video shows how to install the Bannerify Figma plugin and use it to export animated banners from Figma as HTML and JavaScript in the GreenSock (GSAP) format. It then demonstrates saving the export as a zip, opening index.HTML to preview the banners, and inspecting the generated HTML and JavaScript files.

Things you'll need

• A Figma account with a banner design file open
• The Bannerify plugin installed in Figma

Steps

1. Install the Bannerify plugin in Figma by searching for "Bannerify" in Community or search and selecting "Bannerify HTML Exporter".
2. Open the Figma file with the prepared banners, or duplicate the example file from the plugin description if you want to follow along.
3. Right-click on the page, go to Plugins, and launch "Bannerify HTML Exporter".
4. Click "Export Banners to HTML" to open the export settings.
5. Under "Code output settings," choose "Vanilla HTML/JS" and then select "GreenSock (GSAP)" as the export format/platform.
6. Click "Export banners," save the generated zip file, and unzip it.
7. Open "index.HTML" to preview the exported banners in the browser, or open the generated HTML and JavaScript files in a code editor to inspect the output.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Exporting HTML banners with GSAP
• Next: Add custom HTML, CSS, and Javascript to Figma banner exports
• Open Bannerify in the Figma Community