← Back to Bannerify Video Tutorials

What this video covers

The video shows how to install the Bannerify HTML Exporter Figma plugin and use it to export already animated banner designs from Figma to HTML for IAB. It then previews the exported output, explains the generated files, and shows where the banners can be uploaded afterward.

Things you'll need

• Figma
• Bannerify HTML Exporter

Steps

1. Open Figma Community, search for “Bannerify,” and install “Bannerify HTML Exporter.”
2. Open the plugin description to find the example Figma design link in the “additional notes” section, or use your own banner design.
3. In your Figma project, right click and choose plugins, then launch “Bannerify HTML Exporter.”
4. Click “Export banners to HTML,” open “code output settings,” and select “IAB” under the “advertising platforms” export format group.
5. Click “Export banners,” then save the generated zip file.
6. Open the exported folder and use the “index.html” file to preview the banners in the browser.
7. Inspect the exported folder in Visual Studio Code to see the HTML, images, CSS, and JavaScript generated for the banner set.

Useful links

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