Video transcript
7-minute video ·
Today I’m going to be showing you a quick tutorial on how to export your animated banners from Figma to production-ready HTML for multiple ad platforms at once using the Bannerify Figma plugin. Those will include things like Google Ads, DoubleClick, Adform, and other platforms that we’ll run through in a minute.
If you’re new to the plugin, the way that you can get started is by going to your Figma file, just going down to the little resources icon or actions icon at the bottom of your toolbar. Then, if you search for Bannerify under the plugins tab and click on the Bannerify item, you can run the Figma plugin either by clicking on this run button down here, or I’d recommend clicking on the save icon next to it. Clicking on save allows you to run the Figma plugin from your plugins list.
I’ve already clicked on the save button, so I’m just going to go back to my Figma canvas. I’ll right-click anywhere, go down to Plugins, then go down to Saved Plugins, and click on the Bannerify item. That will run the Figma plugin we saved a moment ago.
As I mentioned, if you’re new to the plugin, the way it works is it basically takes any frames on your Figma page and allows you to load those into the Figma plugin as banners that we can animate. You can see here I’ve got eight different frames, each with some content layers in them. We can load all of these into the plugin, which I’ll do now, and then you can see we’ve got access to all of our content layers from the Figma file. We can then animate those to create animated banners, which we will be able to export in a moment.
You can see I’ve already got a bunch of animation set up on these layers here. I did that by using the animation tools in the UI over here. I’m not going to go through all the ways you can animate the banners. I’ll assume that you’ve already animated all of your banners and layers and adjusted the timings the way you want. If you’re new to the plugin, I’d recommend checking out some of the other YouTube tutorials and Bannerify documentation to get a better understanding of how to set up your animations.
Today, I’m assuming you’ve already finalized all your animations and are happy with them, and you just want to export them to HTML for multiple ad platforms.
The way we can do that is by going to the top-right corner of the Figma plugin, where it says “Export to HTML.” Under the code output settings, by default, it exports to plain HTML and JavaScript using CSS keyframes. You also have the option to export for various ad platforms. These include Adform, AdRoll, DoubleClick, DoubleClick Studio, Google Ads, and other Google properties.
If you’re exporting for one format, you can use these existing options. For example, if you need to export a banner set for Google Ads, select the Google Ads option and click on the export button. That will generate HTML for all your banners, ready to upload to Google Ads.
If you need to export for multiple platforms, the Figma plugin now has an option at the very bottom called “Multiple Platforms.” Scroll down in the platforms list, find the Multiple Platforms option, and click on it. You’ll notice a new input called “Add Platforms.” This allows you to specify multiple platforms by searching for them.
For example, I could click on Google Ads, then add DoubleClick, and also add Adform. Now we’ve got three sub-options selected. With the new Multiple Platforms option, we can add as many platforms as needed. This will automatically export the banners for all selected platforms in one go.
I’ll leave the other banner options as default, but you can customize these. For example, if Google Ads has a 150-kilobyte size limit, you can enable that file size target. Today, I’ll leave those turned off for ease of use. You can also customize what’s included in the zip files.
Click on the “Export Banners” button. You’ll see it’s generating Google Ads code for eight different banners—platform one of three. Now it’s doing DoubleClick—platform two of three. In a moment, it will do Adform, the last platform selected.
Once all are exported, you’ll see a confirmation message saying the HTML banners are ready to download. Click on “Download Your Zip File” and save it to your computer. The zip file needs to be unzipped. Once unzipped, you’ll get a folder with all the content in it.
Since we selected Google Ads, DoubleClick, and Adform, there are three different folders inside the exported zip file. Each contains its own banner set. You can see under “Banners,” we’ve got all the code for each banner for Adform, Google Ads, and DoubleClick. Each HTML file is different, depending on the platform requirements.
The Figma plugin automatically takes care of click tags, meta tags, and click handlers. You now have a folder of zip files under the “_zips” folder for each platform. To upload your banners to Google Ads, you can take the zip files inside the “_zips” folder and upload each to the respective platform.
You’ll also notice a preview page. Open the index.html file in a browser to see all banners for each platform. This is useful for previewing banners before uploading or for internal or client approvals.
That’s it. This tutorial shows how to export your animated banners from Figma to HTML for multiple platforms. You don’t have to individually export each option and restart the export process. Selecting multiple platforms at once speeds up the workflow, and you’ll get a single zip file containing all platforms, ready to upload or share.
I hope this has been helpful. If you’re using the Bannerify Figma plugin to create HTML banner ads and want to export them to multiple formats more easily, the new Multiple Platforms option should improve your workflow. Thank you, and we’ll be back soon with more Figma tutorials like this one.
Pro Bundle