How to export Figma to HTML for AppNexus using Bannerify

Video Transcript

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

To do this, we’re going to install a Figma plugin called Bannerify. If you haven’t already done that, you can go to the Figma icon in the top left, click on that, and then go to “Community”, and then in the search bar if you type “bannerify”, and then click on the “plugins” tab, you’ll see the result “Bannerify HTML Exporter” pop-up. I’ve already got mine installed, that’s why it’s got the little checkmark next to it, but if you don’t have it installed, you can click on the “install” button that will be on the right-hand side, and then it will change to look like this.

If you’re following along or if you don’t have a set of banners to work with already, you can go into the plugin description just by clicking on the Bannerify Figma plugin, going down to “additional notes” and the first bullet point contains a URL; if you copy that URL into your browser, you’ll be able to duplicate a copy of the animation template that were going to be using for these banners in this Figma tutorial over to your own Figma account.

I’m just going to switch into that file now, and what we need to do is just right click anywhere, go down to “plugins” and click on “Bannerify HTML Exporter”, and that’s just going to fire up the Figma plugin that we just installed. We can see here that it’s loaded up all of the banners that we’ve got designed in our Figma file and you can see that if I click on play, they’ve already got some animations attributed to them. This Figma tutorial won’t be covering how to set up those animations or how to do your timelines and all that sort of thing; if you do need to figure out how to do that and want to watch a tutorial on that, we do have another Figma tutorial on our YouTube channel that will go into a really comprehensive breakdown of how you can apply these animations and set up all the timings really easily, but for this tutorial we’re just going to be showing you how to export these animated banners from Figma to HTML for AppNexus.

To do that, we just need to click on the “Export banners to HTML” button in the top right hand side, and you can see we’ve got quite a few options here but for this Figma tutorial we’re just going to be focusing on the “code output settings” in the bottom right side down here; currently it’s set to at the export platform of Vanilla HTML and JavaScript, but if we click into that select box, underneath “standard” (that’s the the vanilla options that don’t contain any third-party code for different platforms), but because we want to export this to a AppNexus, we can go down to the “advertising platforms” group and the fourth result down is AppNexus; if you click on “AppNexus”, that will select it. You might notice that it’s removed the the need for the the URL bar that was there a moment ago when we were selecting the the vanilla one; and the reason for that is with the vanilla ones, there’s no third party platform involved; you have to add that URL in there which will get added to the code when it exports. Because we’re using AppNexus, you can assign the clicktag URL inside of the AppNexus UI once you upload these banners; so that’s why that doesn’t show up.

Now that we’ve got AppNexus selected as our export format, we can click on this button in the bottom right which is “Export banners”; click on that, and this is going to generate all the code for us, export all the images for us, and give us a zip file. It has just finished, it only takes a few seconds; and I’m just going to click “Save” and then I’m going to go to my desktop and double click on the zip file, and inside of this folder you’ll be able to see all of the banners that we’ve just exported from Figma to HTML; all of these match up with the file names and the folder names that we’ve got in here.

The easiest way to get a sense of what’s been exported is just to double click on the “index.html” file; I’m just going to do that now. It’s just loaded up our banners, and you can see here all of them have been exported as you’d expect; all the animations are included and everything is looking looking really good. To get a bit of a sense of what’s being exported in these banners, now let’s open up one of these folders in our code editor and have a look what’s going on in there.

I’ve just opened up Visual Studio Code and I’m going to drag in the medium rectangle panel, and we can see here it’s got a bit of a breakdown of the files inside of this folder. If we open that up in here, that’s just matching these files; we’ve got our HTML and this contains all of the elements that we need for our banner; all of the images they’re automatically included; the JavaScript and the CSS; and you’ll notice up here as well as an extra bit of JavaScript that is including the AppNexus HTML5 library; this is what’s required for banners that are being uploaded to a AppNexus, that gets included automatically because we’ve selected the AppNexus platform.

In our CSS we’ve got all the positioning all the animations automatically generated. In the JavaScript, you can see here that we’ve got a special click handler which fires off an AppNexus click tag function, and this is going to hook into your AppNexus UI in the web browser, and that’s going to pull in that URL and make sure it gets directed to the right place. Of course, we’ve got all of our images SVG’s and JPGs for for all the images that we need for these banners; they get exported automatically; so that’s roughly what gets exported, all of the banners are there as you’d expect and that’s really all there is to export your banners from Figma to HTML for the AppNexus platform.

If you’ve been looking for a way to do this, or we’re just wondering if you could even get your banner designs from Figma to HTML for platforms like AppNexus, then I hope this has been an interesting Figma tutorial for you. If you need more platforms or more Figma tutorials on this, there’s a bunch more on our YouTube channel, so you can check them out on there. Until next time, I hope you’ve learned something that you can use in your own projects or share with your own team, and I’m looking forward to coming back shortly with even more Figma tutorials for you; thanks again for watching.