How to export Figma to HTML for DoubleClick Studio using Bannerify

Video Transcript

Today, I’m going to be showing you how to export animated banners from Figma to HTML for DoubleClick Studio.

To do this we just need to install a Figma plugin called Bannerify. You can do that by going up to the top toolbar and clicking on the little Figma icon, once you’ve done that you, you’ll be able to go to the “Community” tab and go to the search bar and if you search for the term “bannerify” and then click on the “plugins” tab you’ll see “Bannerify HTML Exporter” pop up. If you haven’t got it installed, you’ll be able to go to the right-hand side here and click on the “install” button and that’ll make it appear the way that mine does with the little check box.

If you’re using this for the first time or if you just want to follow along, if you click into the plugin and go down in the Figma plugin description to the “additional notes” section, the first bullet point contains a URL which is this one; if you copy paste that into your browser, you’ll be able to open up the Figma file that we’re going to be using in this tutorial which has a pre-designed set of banners and some preset animations that we’re going to use, just to show you how to export these banners from Figma to HTML for to DoubleClick Studio.

Once you’ve done that, you can open up the Figma file that you’ve just duplicated. To open up the Bannerify Figma plugin, we can just right click anywhere, 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. Once that opens up, we get a full list of all the frames from our designs, and you can see here these are all coming in from the left hand side here; they’ve already got animations on them because we’ve opened up the file that has been pre-designed.

I’m not going to be showing you how to do any animation or any timeline settings or anything like that in this tutorial; if you are interested in that, there’s another video on our YouTube channel which goes for about 40 minutes, and it’s a real in-depth deep dive into how to structure your animations and adjust the timelines; it has a whole bunch of neat tricks that lets you apply these animations really quickly in your own designs; you can check that out on our YouTube channel if you like, but for now we’re happy with these designs and all we want to do is export them from Figma to HTML for DoubleClick Studio.

The way we export our banners is just by clicking on this button in the top right here, which is called “Export banners to HTML”; if we click on that, we’ll get a whole bunch of options here, and the one we’re focusing on today is just going to be the “code output settings”; at the moment it’s set to “Vanilla HTML/JavaScript”, but if we click on that drop down you can see that that’s categorized in this top area here called “standard” (which means that these are all vanilla exports they don’t have any third-party code for any other third party platforms or any third party advertising networks); if we go down to the second category called “advertising platforms”, you can see there’s a bunch more options down here, and today the only one we’re looking at is the “DoubleClick Studio” option which is the one down in the list.

If you click on “DoubleClick Studio” and select that, you’ll notice that the URL bar has disappeared from the option that we had selected before; when we were selecting the “vanilla” option, there was a banner link URL field here and that will let you put in your website or your landing page that you want the banner to click through to; now we’re using DoubleClick Studio, we don’t have to include that URL here, because when we upload the banners into DoubleClick Studio, it will provide the option in the DoubleClick Studio UI to add a URL or exit event that will point to a URL or a campaign page that you’re after for your particular ad campaign; so that’s why that’s left off there.

Now that we’ve got DoubleClick Studio selected, all we need to do is click on the “Export banners” button in the bottom right; this will generate all of the code for us, it’ll also export all the images for us, and give us a little zip file. It’s just finished doing that, it only takes a couple of seconds; and if I click “save” and jump to our desktop; if we double click on the zip file, that will open up the banners that we’ve just exported. You can see we’ve got all the folders here that represent all the frames that are coming in from our Figma design. To get a sense of what they all look likem the easiest way to do that is just to double click on this “index.html”, file which will open it up in the browser; I’ll just do that now. You can see here we’ve got our banners exported from Figma to HTML, this is in the browser now; we can play back that animation by using this little play icon in the corner we don’t have it set to loop; that’s why I’m doing it manually, and you can see here it’s coming in exactly the way that we would expect all the animations have been automatically generated for us. This preview page will adapt; it can be really nice if you’re presenting to clients or sharing it around internally.

To get a bit of a look at what’s going on under the hood, we can open up our code editor and actually see what’s going on. I’m just going to open up my my files that were just exported from Figma; if we open up the “MREC”, the medium rectangle, that will give us a little bit of a look into what’s going on. I’m just going to open up this individual banner by going into the folder and opening the index file; and you can see it over here, if I open up the index file, you’ll notice a couple of things in here. We’ve got all of our HTML images, all of our elements to make up the banner, we’ve also got our JavaScript, and we’ve got our CSS.

The JavaScript contains some code that automatically makes this compatible with DoubleClick Studio. It’s got a few event listeners going on and what we can actually do to test that in the browser is, if we go to dev tools “inspect”, and then switch into “console”, and I’m just going to refresh the page. You can see here in the console that there’s a few things going on; “Studio SDK”, that’s the DoubleClick Studio library which is being loaded from the index file, it’s including this script here which is the “Enabler.js” file, and that’s specifically being loaded in for DoubleClick Studio. You can see that script being initialized here, it knows that we’re in a test environment while running it locally; that’s why it’s saying it’s “simulating local events”.

If we go ahead and click on this little banner anywhere, you can see it’s firing off the “background exit” event which is being invoked; that’s how we can tell that it’s registering the click event, and that it’s a successful click event. Once that goes into DoubleClick Studio, and once you’ve associated a background exit event with a URL or an action clicking on the banner to fire that event successfully; that’s how we can tell that it’s working. Everything’s looking really good there. We’ve also got our CSS, which is handling all the animation and positioning for us; this is all getting generated automatically, as are the images. We’ve got SVGs for all the text, to keep them really crisp and small; and then we’ve got some PNGs and JPGs for some of the other assets in there.

That’s that’s a rough look at what the Bannerify Figma plugin is exporting for all of the banners, and these are designed to be production ready; you don’t need to know any code, you don’t need to have any developers on standby to manually convert them from Figma to HTML; Bannerify will automatically generate all the necessary code from Figma to HTML for DoubleClick Studio,.

If you zip up each of those banners now, or just drag the folders into DoubleClick Studio, you should be good to go for your campaign, and all you’ll have to do is associate those exit URLs with the URLs for your campaign or your landing page. That’s pretty much it. As I said, this is just a tutorial on exporting to the DoubleClick Studio format, just the process of going from Figma to HTML; so if you do want to have a look at our other Figma tutorials we have, as I mentioned before, we have a really in-depth one on actually adding the animations and messing around with the timelines and doing all sorts of neat tricks with delays and speeds and selections and all that sort of stuff; and you can find that video on our YouTube channel.

Until the next time, I hope this has been a valuable Figma tutorial for you if you were trying to figure out how to export your banner designs from Figma to HTML for DoubleClick Studio; now you know the Bannerify Figma plugin will do it really quickly and automatically for you. Thank you as always for watching, and we’ll be releasing more Figma tutorials very soon.