← Back to Bannerify Video Tutorials

What this video covers

This tutorial shows how to use the Bannerify HTML Exporter Figma plugin to export animated banner designs from Figma to HTML for the AppNexus platform. It also demonstrates the generated file structure, including the AppNexus HTML5 library, HTML, CSS, JavaScript, and exported image assets.

Things you'll need

• Bannerify HTML Exporter installed in Figma
• A Figma file containing banner designs

Steps

1. Install Bannerify from Figma Community by searching for “bannerify” and selecting “Bannerify HTML Exporter.”
2. Open a banner file in Figma, then right click, go to Plugins, and launch Bannerify HTML Exporter.
3. Click “Export banners to HTML” and open the code output settings.
4. Change the export platform from Vanilla HTML and JavaScript to AppNexus.
5. Click “Export banners” to generate the code, images, and zip file.
6. Save and open the zip file, then double click “index.html” to preview the exported banners.
7. Optionally inspect the exported folder in a code editor to see the HTML, CSS, JavaScript, images, and AppNexus click handling.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Exporting HTML banners for AppNexus
• Next: Export banners for Sizmek from Figma
• Open Bannerify in the Figma Community