← Back to Bannerify Video Tutorials

What this video covers

The video shows how to use the Bannerify Figma plugin to export responsive HTML banner ads from Figma. It explains how to select Responsive HTML (Media Queries), export the banners, and download the resulting .zip file with a single responsive index.html file that uses media queries to display the right banner size.

This Responsive HTML (Media Queries) format is generic responsive HTML for custom hosting; it is not a Google Ads upload format. For a single responsive uploaded Display ZIP, use Google Ads (Responsive HTML5). For separate fixed-size ZIPs, use Google Ads or Google Display Network.

Things you'll need

• Figma
• Bannerify Figma plugin
• Frames already designed and animated as banners

Steps

1. Open Figma, go to Resources, search for Bannerify under the Plugins tab, and run or save the Bannerify plugin.
2. Load the frames on the page into Bannerify so they appear in the timeline as banners.
3. Click Export to HTML, then choose Export HTML and change the code output settings from HTML/CSS to Responsive HTML (Media Queries).
4. Optionally add a clickTag, include a zip file inside the zip, and choose whether to minify the code.
5. Click Export Banners to generate the HTML, CSS, JavaScript, and images.
6. Download the .zip file, unzip it, and use the responsive folder containing the index.html file and images.
7. Preview or inspect the exported index.html to see how media queries swap banners based on viewport size.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Exporting responsive HTML banners with media queries
• Next: Export banners for DoubleClick from Figma
• Open Bannerify in the Figma Community