How to export responsive HTML banners from Figma using Bannerify

Video Transcript

Today I’m going to be showing you how to automatically export responsive HTML banner ads from Figma using the Bannerify Figma plugin.

To get started, all we need to do is go up to the “Resources” icon at the top of your Figma file, click on that, then search for “Bannerify” and under the “Plugins” tab you’ll see Bannerify pop up; if you go ahead and click on that icon, you’ll get this result here. To run the Figma plugin, all you need to do is either click on the “Run” button here, or I’d recommend clicking on the “More options” icon here and clicking “Save Figma plugin” and that’ll just save it to your Figma plugins list for easy access later. I’ve already gone ahead and done that, so I’m going to right click on my Figma canvas, I’m going to go down to “Plugins” I’m going to go down to “Saved plugins”, then I’m just going to go to “Bannerify” and click on that, and that’s just going to run the Figma plugin we saved a second ago.

If you’re new to the Figma plugin, the way that it works is it basically treats any frames on your current page as banners. I’ve got a bunch of different frames here at all different sizes, and in each of those frames I’ve just got some text layers and image layers that I’m using as the banner elements. I’m just going to go ahead and load all of those in; I’m just going to load all the banners, and that’s just going to load them all into the timeline in the Bannerify Figma plugin. I’ve already got some animations applied to these, you can see here it’s just some basic fade and slide animations. I’m not going to go into detail about how to animate the banners and design them, there’s a couple of other Figma video tutorials on our YouTube channel if you want to check out the Bannerify playlist, that’s a good place to start, but for today I’m just going to assume that you’ve already got your banners set up in Bannerify, and animated and designed the way that you want; and what you want to be doing is just exporting them out to a responsive HTML banner format.

We’re going to do that now; I’m just going to start by clicking on the “Export to HTML” button in the Figma plugin, I’m going to click on “Export HTML” and then down here in the code output settings we just want to change this drop down here from “HTML/CSS”, which is kind of the “Non-Platform Specific” options at the top here, and then if we go down to the “Platforms” category, if you scroll down and get to the letter “R”, you’ll see “Responsive Display Ad” pop up as the format. We want to click on this Responsive Display Ad format, I’m going to click on that, and that’s just going to allow us to add a click tag if we want to do that; assuming we’re going to be uploading this to Google Ads or Google Ad product, there’s a few of them, you can add your own click tag. It’ll add the “clickTag” variable with the URL that you want to add, or you can just leave that blank and you can set that after you’ve uploaded the responsive display ad as well.

The other thing we can do is include a zip file inside of the zip, and this is going to allow us to have the files automatically zipped up when we export them; you can export that zip file straight up to your Google Ads platform. Then the other option we have here is just to either minify or unminify the code; minified will basically just put all of the HTML, CSS and JavaScript into one HTML file, and if you uncheck that it’ll give you a separate CSS and JavaScript file to export into your package as well. I’m just going to leave that as minified, and I’m just going to leave all the other options as is; now I’m just going to go ahead and click on “Export Banners”, this is going to generate all the HTML, CSS and JavaScript for our responsive banner automatically, and then it’s just going to export all of the images as well.

Once it’s done that, we’ll get this confirmation screen which is going to tell us that our banners are ready to download. I’m going to click on “Download your .zip file”, I’m just going to save that to my desktop and unzip the file, and I’ll show you what’s inside of that folder. Inside the unzipped folder, we’ve got a few different things; we’ve got our “backups” folder because we’ve got some backup jpegs, we’ve got all the backup jpegs in there, so you’ve got your backups files. Then you’ve got the “zip” folder which is the zip option that we selected; this is basically a zip file that automatically zips up the contents of this folder here, this zip file contains this index.html file and this images folder, and inside of those are your actual banners.

This other index file here that’s actually just the preview file of your banners; if we drag that into the browser, you can see here that this is the preview that’s loading up the banners, but the interesting thing is that all of these banners are the same file. If we jump into this folder here, we can see here that this index.html file is actually what’s being linked to on this page; this HTML file is being linked to in all of these different iFrames on this page, so if we were to open up this file here you would basically see nothing because the media queries for that page are not actually visible.

For example, if we were to open up this file in a code editor, if I just drag and drop the index file into here, you’ll be able to see that there’s a bunch of media queries; these media queries are essentially acting as the way to trigger the responsive banners. For example, certain banners will only show up if certain viewport sizes are being met; for example, 600 by 300, 280 by 336, these banners will only render those certain sizes when the viewport is the correct size. We can see here because all these viewports all these iFrames are being rendered at the exact size of the banner, that’s what’s allowing them to be swapped out in real time as a responsive Banner using one file.

That’s what that looks like when you actually open up the code and that’s why the file here will appear to be empty, but actually, is not rendering because it’s not at the right size. When you upload the banners and they get rendered in the correct size, the responsive code will kick in and automatically pick up on which banner to display based on the size of the viewport.

That’s basically what that looks like; this is the responsive banner, as I said, it’s all coming from this one index file and all of our images are in here and it’s just going to display whichever banner is the correct one based on the current viewport size. This is opposed to needing a bunch of different banners; for example, if we would export this normally, I’ll just do one really quick example of this. If we export for “Google Ads” and export those banners, this is basically just going to export all of the same banners, but it’s going to export them as separate HTML files. We’ll see what that looks like in a second, I’ll just quickly download this to my desktop and show you the difference.

If we open up this folder, you can see here that this is our responsive one and then if we compare that to the other one that we just downloaded, I’ll just compare those two; in in the responsive one we’ve just got one file, we’ve got one index file, one banner, and in the one we just exported through Google Ads, you can see that every banner has its own HTML file. It looks the same when you preview it, these are all going to look exactly the same, but they’re all being pointed to individual banners they’re being pointed to each of these individual banners; instead of uploading 12 banners, or 11 banners in this case, individually, you can basically just upload one and be done with it; that’s the advantage of using responsive banners in certain cases.

I hope that’s been helpful if you’ve been wondering how to export responsive banners from Bannerify; this is going to be the easiest way to do it you just click on the code output settings, change it to “Responsive Display Ad” and you’ll basically be good to go. Just click on the “Export Banners” button and you’ll have those responsive HTML banners in a few seconds. We’ll leave it there for today; I just wanted to go through this new option with you if you’ve been wondering how to export responsive HTML banners from Figma, this is going to be the quickest way to do it, using the Bannerify Figma plugin. Thank you as always for watching, and we’ll be back soon with more Figma tutorials like this one very soon.