← Back to Bannerify Video Tutorials

What this video covers

This video shows how to use the Bannerify Figma plugin to export animated banner designs from Figma to HTML for DoubleClick Studio. It walks through installing the plugin, exporting the banners, and checking the generated DoubleClick Studio-compatible files in the browser and code editor.

Things you'll need

• Figma
• Bannerify HTML Exporter
• DoubleClick Studio

Steps

1. Install Bannerify from the Figma Community by searching for "bannerify" and selecting "Bannerify HTML Exporter".
2. Open the provided Figma file from the plugin description and duplicate it for the tutorial banners and preset animations.
3. Launch Bannerify from Figma by right-clicking, going to plugins, and selecting "Bannerify HTML Exporter".
4. Click "Export banners to HTML" and choose "DoubleClick Studio" under the advertising platforms code output settings.
5. Click "Export banners" to generate the code, images, and zip file.
6. Open the exported zip, then open "index.html" in a browser to preview the banners and animation.
7. Inspect the exported folder in a code editor to see the HTML, JavaScript, CSS, and DoubleClick Studio-specific Enabler.js integration.

Useful links

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