Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Export banners to HTML/GSAP from Figma - 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.. Machine-readable page: /bannerify/tutorials/export-banners-to-html-gsap-from-figma.md.

Export banners to HTML/GSAP from Figma

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.

← 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