← Back to Bannerify Video Tutorials

What this video covers

This video shows how to use the Bannerify HTML Exporter Figma plugin to export animated banners from Figma to HTML for the Flashtalking ad platform. It walks through installing the plugin, opening a prepared Figma file, choosing the Flashtalking export format, and checking the generated HTML package.

Things you'll need

• Figma
• Bannerify HTML Exporter plugin
• A banner design or the duplicated example project

Steps

1. Install the Bannerify HTML Exporter plugin from Figma Community if it is not already installed.
2. Open the Bannerify plugin details and use the URL in the 'additional notes' section to duplicate the example project, or open your own banner design.
3. Right-click in the Figma file, go to plugins, and launch 'Bannerify HTML Exporter' to load the banners.
4. Click 'Export banners to HTML', then open 'code output settings' and select 'Flashtalking' from the 'export format' dropdown.
5. Click 'Export banners' to generate a zip file containing the exported banners and assets.
6. Open the zip contents and preview 'index.html' to verify that the banners and animations load correctly.
7. Inspect the exported files in a code editor if needed, including the HTML, CSS, JavaScript, and 'manifest.js' files for Flashtalking.

Useful links

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