How to export Figma to HTML for Google Ads using Bannerify

Video Transcript

Today, I'm going to be showing you how to export animated HTML banners from Figma to Google Ads.

The way we're going to do this is by installing a Figma plugin called Bannerify. If you haven't already got it installed, we can go to the top toolbar and click on the Figma icon, and if you go to the "community" area and use the search bar to type in "bannerify", and then click on the "plugins" tab, you'll see this result an "Bannerify HTML Exporter" pop right up. If you haven't already installed it, you can click on the "install" button; mine is already installed and that's why it's got this little checkmark, but if yours just says "install", you'll be able to click on "install" and that will change it to look like mine.

Once you've installed it, you can jump back into your project in my case I'm using the sample file that can be found in the additional notes section down here; if you go to the Bannerify plugin details area, and go to "additional notes", there's a link here that you can use; if you put this into your web browser it will open up the Figma file that I'm going to be using in the Figma tutorial and you can duplicate that file to your own Figma account, and you can use that to follow along.

Back in our project, what we want to do is right click anywhere on the page go down to "plugins" and then click on "Bannerify HTML Exporter", and that's going to fire up the Figma plugin that we just installed. You can see here that it's loaded up some banners that we've already got in our project here, and because we're using the project that's already been set up, we've already got some animations attributed to each of the layers on each frame. I'm not going to show you how to do all that in this Figma tutorial; I've got another Figma tutorial on our YouTube channel which goes for about 40 minutes; you can check that out if you want to have a in-depth breakdown of how to go through and apply all these animations really easily; I'm not going to cover that here, but you can see here we've got some animations set up and all we want to do is export them. We can get them into a format that we need, which in this case is going to be Google Ads.

To export these banners, we can click on the "Export banners to HTML" button in the top right hand side of the Figma plugin; I'll click on that, and you can see we've got a bunch of options here. We can do a whole bunch of things, but as with the other point on the animations, I'm just going to focus on this area down here which is "code output settings". At the moment, we've got it set to "Vanilla HTML and JavaScript", however because we want to export this from Figma to HTML for Google Ads, we're going to click on the drop down here and instead of selecting one from the "standard" group at the top (which are all the vanilla options that don't come with any additional code), we're going to scroll down and there's a second section called "advertising platforms", and you've got a list of a whole bunch of platforms here but the one we're after is right up on top which is "Google Ads"; if we click on "Google Ads", you can see here that it's selected that for us.

You might have noticed that one of the other fields is disappeared; if we click on the selection we had a second ago, you can see we've got the banner link URL here; if you put a link in there that'll that'll open up the the link whenever you click on the banner, but you might notice that when we click on "Google Ads", that option disappears; and the reason for that is you actually associate the URL for the Google Ad inside the Google Ads interface, you don't have to preset it in the code itself, but it's going to include some click tags that are going to allow the Google Ads UI to actually hook into that, which we'll see in a second.

Now that we've selected "Google Ads" from the advertising platforms this is going to export from Figma to HTML for Google Ads the way we we need; all we need to do is click on "Export banners" in the bottom right here; I'm going to click on that and it's generating all the code for us, exporting all the images for us automatically, and and that's all done; it's very quick, it only takes a couple of seconds. If I open up the zip file just by double clicking on it, that's going to reveal all of the banners that we've got here; you can see that these all match up with the banners that we've got on the left hand side in Figma, and it automatically prepends the dimensions and then it uses the frame name to also give a bit of a label to each folder.

The easiest way to see an overview of all of our banners to make sure that they're all looking the way we want is just by clicking on the "index.html" file; that's loaded up the index.html file, and you can see here we've got all of our banners from Figma; you can click this little play button in the top right to replay them if you want to keep having a look at them and this is also responsive; if you need to use this on different screen sizes the banners will automatically readjust, if you're sending this to a client or just reviewing it internally.

Now that we've got all of our banners that the way that we want them, let's just take a look at the code that is generated for us as well. I'm just going to open up my code editor, in this case which is Visual Studio Code, but you can use whatever you like. I'm just going to open up the "MREC" medium rectangle, and I'll open that up in the browser as well, and you can see here it's opened up the single banner. If I inspect the code in my code editor, you can see here that it's automatically generated all the code for me. It's got the the metadata for the banner, it's got all of the HTML for the banner, all the images with the alt text, and the CSS which handles all of the animation and positioning; it's automatically been generated for us. The other neat thing is that we've got a JavaScript file which automatically includes all of the stuff to detect when the images are loaded; it will only show them when they're actually loaded in.

That includes everything that we need to upload this banner to Google Ads. We can actually validate that by going to the Google Ads validator, so I'll go to that now. I'm in the HTML5 validator, which is a tool that Google offers which allows you to validate your ads or your creatives before they actually go into production, just to make sure the code and the structure is all valid. What I need to do to zip that up is just highlight all of the files, click on "Compress", and after I've done that I can click on "Upload", click on the zip file that we just made, and this is going to upload all the files to this validation service. It does tend to be a little bit slow I've noticed; so we'll just wait for that to finish. If you do need to get to this page by the way you can just search for "HTML5 validator for Google Ads" and then that will show up.

It's finished uploading, and you can see here, it's provided this long checklist of all the different things that it's checking for. It looks really nice, because we've got green check boxes from from zero to the end, which is really cool. Then here we can just click on this little icon, which will load in a preview if we want to have a look at that as well; that shows us the preview which will load in a second. If we click on that, you can see here that it says "your click was successful and should track correctly"; all you need to do is include a click tag or a click URL on that once you've uploaded it, and that should should work just fine. That's all validated and all working as expected; and we've got all of our banner sets, so we don't have to test all of them; all of the code gets exported in the exact same way; if one works, they all work. This is all built into Bannerify; you don't actually have to worry about this, but I just wanted to show you that it is actually all validated for Google Ads.

That's essentially it; you don't need to do anything else, those are production-ready. Of course, you've got all the code there if you do want to make any changes or manually tweak anything yourself in code, but the idea is that you can export production-ready banners from Figma to HTML for Google Ads and that'll just work straight away. You don't have to do any extra steps, you don't even need to know how to code, you don't need any developers on the team, you can just do it all directly from Figma to HTML and Google Ads will pick up on all of that, with everything all be valid.

I hope that's been a helpful Figma tutorial for anyone who's searching for how to do this, and was wondering if you could do this from Figma; the answer is "yes", but you just need to install the Bannerify Figma plugin to make it happen. That'll get your banners from Figma to HTML for Google Ads with no issues. Thank you as always for watching, and until the next one, I hope you can use this in your own projects or share it with your team; we'll be back very soon with more Figma tutorials just like this one.