How to export Figma to HTML for DoubleClick Campaign Manager (DCM) using Bannerify

Video Transcript

Today, I’m going to be showing you how to export animated banners from Figma to HTML for DoubleClick Campaign Manager (or “DCM”).

To do that, we need to install a Figma plugin called “Bannerify”. If you haven’t already done so, you can go to the top toolbar and click on the little Figma icon and then go down to “Community” and search for “bannerify”, click on the “plugins” tab and you’ll see “Bannerify HTML Exporter” pop right up. Because I’ve already got it installed mine has this little check mark and tells me that it’s installed, but if you don’t have it installed, you’ll see a button here that will say “install”, and if you click on “install”, that’ll change it just to look just like mine and you’ll be ready to go.

For this example I’m going to be using the file that you can clone or duplicate to your own Figma project; to do that, you just click on the Figma plugin itself, and underneath the “additional notes”, section the first bullet point contains a URL, and if you go to that URL, it’ll load up the Figma project that we’re going to be looking at in a second which has pre-designed banners with some animations set on them; you can just get started really quickly or follow along with this Figma tutorial.

I’m going to go back to that file right now, and to start up the Figma plugin, we can just click right click anywhere on the page, go down to “plugins”, click on “Bannerify HTML Exporter”, and that’s going to open up the Figma plugin that we just installed. Once that loads, you can see that we’ve got all of the banners that are in the Figma file are being represented in the Bannerify Figma plugin, and I’m not going to be showing you how to apply all these animations or kind of adjust the timings or anything like that; if you’re interested in that and this is your first time using it, I’ve got another Figma tutorial on our YouTube channel which goes into a lot of detail about how to do this, and it goes for about 40 minutes; it’s very detailed and it shows you all the different ways you can apply animations and do all kind of neat things, but today we’re just going to be playing with the pre-designed banners that already have these animations set, and all we want to do is just export them from Figma to HTML for DoubleClick Campaign Manager.

To do that, we can simply click on the “Export banners to HTML” button in the top right of the Figma plugin, and when we click on that we’ll see a whole range of different options, but for now all I’m really focused on is this bottom right section called “code output settings”; at the moment I’ve got it set to “Vanilla HTML/JavaScript” (that’s categorized under the standard category, and these formats don’t include any additional third-party code or any platform specific code); but because we want to export these banners from Figma to HTML for DoubleClick Campaign Manager, we can go to the second grouping called “advertising platforms” and there’s a whole bunch of options in here, but for this platform we just want to click on this second option called “DoubleClick Campaign Manager (DCM)”, and if we click on that, that will select the platform for us.

You might notice that the option that we had a second ago has disappeared; if I quickly switch back, you can see when we use the “vanilla” options there’s an input box here for the URL where the banners link to; putting a URL in there will link the banner to that particular URL, but because we’re using DoubleClick Campaign Manager, DoubleClick works a little bit differently; we don’t need to manually specify any URL here, but what it’s going to do is it’s going to add a click tag or some code that’s going to be recognized by DoubleClick Campaign Manager (DCM); and when you upload these banners into DoubleClick Campaign Manager (DCM) you’ll have the opportunity to associate a URL in the DoubleClick Campaign Manager (DCM) user interface; we don’t need to worry about that.

Now that we’ve got “DoubleClick Campaign Manager (DCM)” selected, we can go ahead and click on the “Export banners” button in the bottom right, and this is going to generate all the code for us. It’s also going to export all the images that we need for our banners; it’s already finished, it does it in only a couple of seconds, it’s very quick. All I’m going to do now is just save it with the default file name that matches my Figma project, I’m going to save that to my desktop just by clicking “save” and then if I jump to my desktop, all I need to do is double click on the file zip file that was exported. If I open up that folder, you can see that we’ve got all of our all of our banners that match up with the files or the frames that we have in our Figma file.

To get a quick look at what that’s done, the easiest way is just to open up the “index.html” file that comes inside the folder, I’ll open that up now; you can see here it’s exported our banners from Figma to HTML, we can view it in the browser; if we click on this little play button again, you can see it play the animation one more time; it’s all looking really good. To have a look at what’s going on behind the scenes here, I’m just going to open up my code editor and if we drag the “MREC”, or medium rectangle, into the Visual Studio Code editor (you can use any code editor for this), we’ve got a few files here; we’ve got our HTML file and you can see in here that there’s a few things going on; one is that its output all of the images and the HTML that we need for our banner; it’s also included our CSS file which contains all the positioning of the animations, all of the the nice things that we need for these banners to to be animated.

Then in the JavaScript file we’ve got a few things going on, and the one that’s key to the DoubleClick Campaign Manager (DCM) format is this little snippet down here; this is basically adding a click handler on the banner, which means that when you click on it, it’s going to fire off this little window, that open function, and it’s going to use the click tag variable that the Bannerify Figma plugin is automatically adding in. If you look up here, you’ll see this little script that says the click tag equals to “Google”, and you don’t have to worry about that being being put in, as Google; it’s purely just a placeholder and this will be swapped out when the banner gets uploaded to to DoubleClick Campaign Manager.

Jjust to show you what I mean by that, we can verify this code by going to a service called “HTML5 Validator”. You can get to this by just Googling “HTML5 Validator DCM”; and if we want to test out one of our banners, all we need to do is go into one of them, highlight all the files, right click, then click on “Compress”, and that’ll give us a little .zip file. Now that we’ve got a zip file, all we need to do is click on this “Upload” button and upload it into the HTML5 validator. I’m just going to double click on my zip file. For some reason, this service can be a little bit slow; so if it’s taking a little while just be patient, it’ll work.

There we go, it has picked up on our banner, and as you can see here we’ve got all of our items checked off and everything is in place. The way we can test if the click event is working is just by clicking anywhere on the banner, and you can see here we’ve got a “click was successful and it will track correctly” message, and as I said before, with the the Google domain, you don’t have to worry about that; that will get replaced once it gets put into DoubleClick Campaign Manager, and you’ll be able to point that to a landing page that you own, or the campaign page that you want to point everyone to for the ad.

That’s all accounted for; you don’t need to do this test for all of the other banners; all of the code gets exported to be identical, as far as the click tag code goes, and everything that comes out of Bannerify has has already been run through this validator previously.

Whatever you getting from Bannerify will be production ready, and of course you can make manual code changes if you wanted to do that; you can edit the HTML or the CSS or add some custom JavaScript, or whatever you need to do; but the main thing is you’ve got all the images, you’ve got all the assets, all the code for this to be production ready if you don’t have any in-house developers, or if you don’t know code; that’s that’s totally fine, the Bannerify Figma plugin this will automatically do it for you.

That’s essentially how you can export animated banners from Figma to HTML for DoubleClick Campaign Manager (or “DCM”) and I hope that’s been helpful for you if you’ve been wondering how to do this; you can you can quite easily do it with the Bannerify Figma plugin. There’s a bunch of other formats supported as well, which we’ll cover in future Figma tutorials that you’ll be able to find on our YouTube channel, if you’re interested in those. Thank you as always for watching, and we’ll be back with more Figma tutorials very shortly.