How to export Figma to HTML for AdForm using Bannerify

Video Transcript

Today, I’m going to be showing you how to export animated banners from Figma to HTML for the AdForm platform.

The first thing we need to do is goto the Figma icon in the top left, because we want to install a Figma plugin called Bannerify; if we click on this little Figma icon, and if you go to “Community” and then click on the search field and type in the term “bannerify”; then click on the “plugins” tab and you’ll see a result come up that says “Bannerify HTML Exporter” and on the right-hand side you’ll see a button that says “install” or it will say “installed” if you’ve already got it installed like mine does; but if you just see a button that says “install” over here you can click on that, and then it’ll look like mine with the little checkmark on it.

Once that’s ready to go, if you click into the plugin name just to jump into the description, we can see down here in the “additional notes” section once we scroll down, that we’ve got this little URL here; and if you copy paste that URL into your web browser you’ll be able to duplicate the file that we’re going to be using for this Figma tutorial; and that’s just going to make it a bit easier to follow along if you don’t already have a set of banners designed, but feel free to use your own if you do.

Now that we’ve installed the Figma plugin we can go back to our project and we’re just going to run the plugin by right-clicking anywhere going down to “Plugins” and then clicking on “Bannerify HTML Exporter”, and this is just going to open up the Figma plugin that we just installed. You can see that it’s loaded in all of our banners from the Figma file and you’ll notice that they’ve also got these little animations applied to them already when I click this little play button; this Figma tutorial is not going to cover how to add these animations or how to control the timelines, if you’re interested in that we do have another Figma tutorial on our YouTube channel that you can check out, it goes for about 40 minutes and it covers all of those things in depth; but for today we’re just going to be looking at how to export banners that you’ve already got designed and already got animated; we’re just going to see how to export those from Figma to HTML for AdForm.

To start off with, we just need to click on the “Export banners to HTML” button in the top right; I’m just going to click on that now and you can see we’ve got a few different export options, but for today I’m just going to be focused on the “code output settings”; underneath where it says “export format/platform” you can click on that drop-down, and that’s going to open up a list of options for us. In the second section down here that’s called “advertising platforms”, we can see there’s a whole bunch of options, but the one that we want to select is closer to the bottom and it’s the “AdForm” option; if we click on “AdForm” that’s now selected the platform for us, which means that we’re ready to go with exporting. To export these banners from Figma to HTML for AdForm, all you need to do is click on the “Export banners” button in the bottom right down here; I’m just going to do that now, and this is going to generate all of the code that we need, and all of the images that we need in to a zip file with all of our banners.

I’m just going to use the default naming convention in our save dialog here and click on “save”, then I’m going to go to my desktop and double click on the zip file; once that unzips, we can click on the folder and you’ll see here that it’s exported all of our banners from Figma to HTML, and to get a sense of what that looks like all in one snapshot, we can double-click on the index.html file that comes with the folder in the root here; I’m just going to double click on that to open up in the browser. I’ve just loaded that up in the browser and you can see here that all of the banners have been exported as would expect they’ve all got the animations on them, I can replay those animations with this little play button if I want to do that, but everything’s looking really good and as I would expect.

To get an idea of what was actually exported by Bannerify from Figma to HTML for AdForm, we can open up one of these banners in our code editor; I’m going to do that now, I’m just going to drag the medium rectangle into Visual Studio Code (you can use whatever code editor you like; in this case, I’m just going to use Visual Studio) and I’m also going to open up the “MREC” medium rectangle banner in the browser so we can have a look at which one we’re looking at; you can see here these are all the files that can exported from Bannerify when we export from Figma to HTML, and in this case we’re doing it for AdForm.

You can see right up the top its including the script file from the AdForm domain; we’ve got a script file from “adform.net” and it’s the “AdFormDHTML.js” file, and that’s a required file that any banners being uploaded for AdForm needs, that gets included automatically; we’ve also got our metadata up here, that gets automatically included; these are all of the images that we need to render out the HTML for our banner; and we’ve also got a little JavaScript file down here and we can open these up.

We’ve got the JavaScript file, you can see down here that there’s some specific code for AdForm; we’ve got this little “clicktag” variable, it’s the “htmlGetVar” function; that’s coming coming from the AdForm library, and don’t worry too much about this “example” URL, when you upload these banners to AdForm it’s going to give you the option to specify where you want the click tag to go; this is purely just a placeholder that’ll get swapped out in real time when you do upload these banners into AdForm. Then we’ve just got a little click tag event that that’s gonna open up the the the click tag when you click on the banner inside of the browser for AdForm; all of the JavaScript is written for you, so you don’t have to worry about any of that, that’s all taken care of.

We’ve also got this little file that AdForm requires as well, which is the “manifest.json”; Bannerify is automatically exporting this from Figma into the AdForm banners; we’ve got this “manifest.json” and when you upload this banner into AdForm, it’s going to read the contents of this file, and that’s going to give it some information that it requires; things like the width and the height, the title and where the entry point for the banner is, and all that sort of stuff; that all gets included for you, so you don’t have to worry about that.

Then of course we’ve got the “images” folder as well; this includes SVGs for the text layers to keep them nice and sharp; the PNG for the button; and the JPG for the background; that’s all of the files you need, you get you get all those files for each of your banners, all the HTML is generated from the Figma plugin, and you don’t need to be a developer or even jump into the code editor; I just wanted to show you what Bannerify was generating in case that was of interest.

If we jump back into Figma, as you can see the message is telling us it’s all done it’s ready to be uploaded; there’s there’s no more steps. That’s all you have to do, as you can see it only took a few seconds to export from Figma to HTML for AdForm; it’s extremely quick, and that just means you can keep re-exporting these banners if you have changes, or if you want to try out different versions, or have different campaigns; you can just export it really quickly from Bannerify and it’ll be ready to export from Figma to HTML in a few seconds.

I hope this has been helpful for anyone wondering how to export banners from Figma for AdForm; this is the way you can do it, using the Bannerify Figma plugin. As always, thank you for watching, and we’ll be back with more Figma tutorials just like this very soon.