← 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 switch the code output settings to Responsive Display Ad, 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.

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 Display Ad.
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
• Browse Bannerify tutorial docs