How to export Figma to HTML for IAB using Bannerify

Video Transcript

Today, I'm going to be showing you how to export animated banners from Figma to HTML for IAB (or the Interactive Advertising Bureau).

To do this, we need to install a Figma plugin called Bannerify; to do that, we can go to the top toolbar in Figma and click on the little Figma icon and if you go to "Community" and then click on the search bar at the top you can type in the term "Bannerify", and then click on the "plugins" tab and you'll see a result come up called "Bannerify HTML Exporter". If you don't already have it installed you'll see an "install" button on the right-hand side, once you click "install" you get this little checkmark like mine has; it'll say "installed".

Once you've installed it, the next thing we're going to do is just click on the description or the title of the Figma plugin, and this is going to load up the description of the plugin. If you scroll down to the "additional notes" section, the first bullet point contains a URL, and that URL will take you to the Figma design that we're going to be using for this Figma tutorial; that's just an easy way to follow along if you want to use a pre-designed set of animations on some banners, or feel free to use your own if you have your own banner design that you want to use.

Let's jump back into our project and we can just right click anywhere and go down to "plugins" then click on "Bannerify HTML Exporter" and this is just going to fire up the Figma plugin that we just installed. Once it loads, you'll be able to see that we've got all of our banners from Figma represented in the Bannerify Figma plugin, and if we click on the little play icon you can see that they've already got an animation timeline applied. This Figma tutorial isn't going to show you how to apply animations or update timelines or do anything like that; there's a separate tutorial on our YouTube channel if you do want to go through the 40 minute Figma tutorial, it's very in-depth and it'll take you through everything you need to know to set all this up for yourself; it's very comprehensive, but in this tutorial we're just going to be covering exporting an already animated banner set to HTML, going from Figma to HTML for IAB, in this case.

The first thing we need to do is just click on the "Export banners to HTML" button in the top right hand side of the Figma plugin, and once we do that we'll get a variety of different settings; the one we're going to focus on today is just in the bottom right here called "code output settings" and under the "export format" label, we've got a little select drop-down box; if we click on that and scroll down a little bit, you'll see there's a group called "advertising platforms" and all the way down the bottom we've got one that is called "IAB", and that is the one that we want to select for today's Figma tutorial. If you click on "IAB", it'll show you that that's selected underneath the export format and that's going to let Figma and Bannerify know that this is the format we want to export to.

To export these banners from Figma to HTML for IAB, all we need to do is click on the "Export banners" button in the bottom right here; I'm just going to click on that, and this is going to generate all of the code that we need for these banners, and all of the images and zip them up for us. Now that we've got the save prompt, I'm just going to use the default file name and click on "save". If I go to my desktop I can double click on the zip file that I just saved, and inside of that folder you'll see that Bannerify has exported all of our banners into separate folders with the names from the Figma frames and prefixed them with the image dimensions or the banner dimensions.

The quickest way and easiest way to get a look at what we've just exported is to open up the "index.html" file that comes with the banner folder; I'm just going to do that now. That has opened up the browser and it's showing us all of the banners that have just been exported. These are all being previewed at the same time, we can make that a bit bigger if we want to see them all, and to replay the animations you can just click on this little play button. This is just loading in all of the banners at the same time to let you easily see what's been exported, but if we want to drill down into some of the other code that's being generated behind the scenes, what we can do is just go back to our folder.

I'm just going to open up Visual Studio Code, and I'm going to drag in the medium rectangle folder, and also just drag this medium rectangle index file into the browser, just to see what we're looking at. We've got our medium rectangle banner here in the browser and in Visual Studio, we've got our folder loaded in to have a look at what's being generated. You can see here it's generating all of the HTML that we need, with all of the images which are being pulled in from the "images" folder; you can see we've got SVG's for the text layers, PNG for the button and this JPG file for the background; and then we got our CSS file which is going to generate all of the positioning and all of the animations that we specified in Bannerify while we're in Figma.

Finally, we've got our JavaScript file; and this essentially just includes some code that IAB is going to be lookiung for. It's doing some some fancy things here to get the query string in order to obtain the click tag that it's going to want, and then that's being assigned to the banner itself; whenever someone clicks on your banner, it's going to trigger the window to open up the click tag, and the click tag is going to be included once you get these banners into IAB and the click tags going to be pulled in from from that parameter. That's everything that we need. Bannerify generated it all for us, so you don't need any developers, you don't need to know any code. That's pretty much all you need to know to get get these banners out of Figma to HTML, in this case for "IAB".

If we jump back into Figma, that's all done now, it's telling us that we can upload these to either our own server, if you want to put them somewhere to preview for your clients or stakeholders, or of course you can just individually upload those banners to your advertising platform. I hope that's been helpful if you were looking for a way to export banners from Figma to HTML for IAB. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this for other Figmatic Figma plugins, or more ways to use Bannerify in the future.