How to export Figma to HTML for DoubleClick Campaign Manager (DCM) using Bannerify
Follow along with this step by step Figma tutorial video
Figma plugin used in this video
Animate and export production ready banners from Figma to HTML for different platforms in seconds.Try Bannerify
See all features and licenses
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 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 tutorial on the Figmatic 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.
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.
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.
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 the Figmatic 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.
Founder of Figmatic