How to export Figma to HTML for Sizmek using Bannerify

Video Transcript

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

To do this, we need to install a Figma plugin called Bannerify. If you haven't done that already, you can go to the top toolbar and click on the Figma icon and then you want to go to "Community" and in the search box type in the word "Bannerify", then click on the "Plugins" tab and you'll see a result that says "Bannerify HTML Exporter"; I've already got this installed, but if you don't you'll see a button on the right-hand side that says "install", and if you click on that, yours will change to look like mine does with this little checkmark on it.

The next thing we're going to do, so you can follow on with the Figma tutorial is click on the plugin description by clicking on the plugin, and once that loads you'll see in the second section under "additional notes". If you scroll down and go to the additional notes section, the first bullet point has a URL in it, and this URL here on the second line if you copy and paste that into your web browser, that will load up a copy of the pre-designed banners that we're going to be using in this tutorial. That's just going to be a much easier way for you to follow along, otherwise you can use your own banners as well.

Let's jump back into our project and you can see we've got these banners designed already; I'm just going to right click, go down to "plugin" and then go to "Bannerify HTML Exporter", then click on that. This is going to start up the Figma plugin that we just installed and once that loads you'll see that we've got all of our all of our banners loaded in from the designs, and you'll notice that they've already got some animations on them; we can click on the little play button to preview them. This Figma tutorial won't be covering how to add animations or how to configure your timeline, if you do want to get a sense of how to do that, we have another Figma tutorial on our YouTube channel which goes into depth on all of those things regarding animation selections and timelines. That tutorial goes for about 40 minutes and it's very comprehensive; I'd recommend checking that one out if you do need a bit of background on how to set up the animations, but in this case we're just going to export the current animations and designs that have been set up to HTML for the Sizmek platform.

Now we're going to export Figma to HTML for Sizmek, and to do that we just have to click on the top right button in the Figma plugin, which is "Export banners to HTML; I'll click on that, and there's a number of options here, but the one that we're focused on today is under the "code output settings" area here in this bottom right corner and underneath the "export format" we just want to click on that drop-down and underneath the "advertising platforms" group, you'll see about fifth down we've got the "Sizmek" platform. There's a number of them, but in this case we just want to export to Sizmek; I'm going to click on that, and now it's indicating that Sizmek been selected. All we need to do now to export this to HTML is to click on the "export banners" button in the bottom right; I'm just going to click on that now, and this is going to generate all of the code and all of the image files that we need for our HTML banners.

It's going to pop up the save dialog; I'm just going to keep the default file name and click on "save" then I'm going to go to my desktop and double click on that zip file that Bannerify just created once that unzips, you can go into the folder and you'll see that it's exported all of the frames from Figma to HTML. The easiest way to get a look at what's been exported is just to double click on the "index.html" file that comes in the the root of the folder; I'm just going to click on that now. That has loaded up our banners now and we can see that all of the banners that we exported are available; we can click on this little play icon to repeat the animations if we want to, there's some more down here as well; all of them have been exported as we expected.

To get a sense of what has been exported, I'm just going to open up my code editor and show you what's inside one of these folders; if I open up Visual Studio Code and drag in this folder, just the medium rectangle, I'll open up that that file as well in my browser. Inside a Visual Studio we can see that we've got an HTML file and all of the images that we need have been included automatically, we've got our JavaScript, we've got our CSS.

You'll also notice we've got an extra script tag which is pointing to this file called "EBLoader.js" and it's getting served from a content delivery network URL; this is the file that's required to to use the Sizmek ad platform. That gets included automatically, and inside of the JavaScript file that gets included, we've also got these little functions down here which is a click through; this is getting called on the click handler for the banner; whenever you click on this banner you'll be able to fire off that that call and that's going to trigger the URL to open in Sizmek once it gets loaded in. That's all good, we don't need to do any extra work to make that work it's just going to get triggered whenever these banners get uploaded into Sizmek, and you'll be able to add the URL once you're in the Sizmek UI in the browser; we don't need to do any extra work there.

We also have a images folder; this is just where all the images are stored; all the SVG's, all the PNGs and JPGs. The PNGs and JPGs for the the images, and then we've got SVGs that are being rendered out for the text to keep them nice and smooth and crisp. That's essentially all the files that we have.

If we jump back into Figma, we can we can pretty much just close this off now; if we just click on the "X". That's actually all you need to do to get these banners out of Figma to HTML for Sizmek. I hope if you've been searching for a solution to this, then this Figma tutorial has been helpful for you. If you and your team are using Sizmek and also using Figma, and just want a really easy way to get your designs out of Figma into HTML for Sizmek then this is definitely the easiest way to do that, using the Bannerify Figma plugin. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one for Bannerify and some of the other Figma plugins as well.