← Back to Bannerify Video Tutorials

What this video covers

The video shows how to use the Bannerify Figma plugin to export animated banners from Figma as HTML Canvas. It covers installing the plugin, choosing the HTML Canvas export format, and opening the exported files to preview the generated canvas-based animations.

Things you'll need

• Figma
• Bannerify HTML Exporter plugin
• A Figma file with banners and animations already set up

Steps

1. Install the Bannerify HTML Exporter plugin from the Figma Community if it is not already installed.
2. Open your Figma file and launch Bannerify by right-clicking the design, then selecting plugins and Bannerify HTML Exporter.
3. In the plugin, click Export Banners to HTML to open the export settings panel.
4. Under Code output settings, change Export format/platform from Vanilla HTML/CSS to Vanilla HTML/JS (HTML Canvas).
5. Click Export Banners and save the generated zip file with the default or preferred name.
6. Open the zip file, then open index.html in Chrome to preview the exported banners and animations.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Ad Platform Options
• Next: Animate and export banners to HTML
• Open Bannerify in the Figma Community