How to animate and export Figma Buzz banners to HTML, MP4 video or GIF using Bannerify

Video Transcript

Today I’m going to be showing you a quick tutorial on how you can animate and export your banners from Figma Buzz to HTML, GIF, or MP4 videos using the Bannerify Figma plugin. To get started, all you need to do is go to Figma and create a new Figma Buzz file. From there, you’ll be able to select either a template or you can start from scratch. I’m basically just going to select one of these templates and click on add template. Once that opens up, you’ll see that we’ve got this singular banner template at the moment.

Now that we’ve got that banner set up, we’re going to roll that out to multiple sizes in a moment. The first thing we’re going to do is animate the layers on this first banner, and that will automatically carry over those animations later. We’re going to now open up the Bannerify Figma plugin. In Figma Buzz, the way that you run Figma plugins is to go over here where there’s this little Figma plugins icon. If you just click on that and search for Bannerify, you’ll see the Bannerify Figma plugin pop up. All you need to do to run the Figma plugin is either click on this little pink run button here, or you can click on the save icon here, and that will let you run the Figma plugin from your Figma plugins list. In this case, I’m just going to go ahead and click on the run button.

Once that loads up, you’ll see that it opens up in this sidebar area here in Figma Buzz by default. You’ll notice that it doesn’t pop out a big window automatically. You basically have to load up the banner that you want first. In this case, I’m just going to go ahead and click on load all banners. You’ll notice that up here it gives you a little message saying that we can now open up the full Bannerify Figma plugin workspace. It’s loaded up one banner. All you need to do is click on the pop-out icon up here, and it’s going to load up the Bannerify animation timeline. I’m just going to go ahead and click on that open in a modal icon up here.

Once you click on that, you’ll see that the Figma plugin window basically pops out into the full interface where we can now go through and start animating the layers in our Figma Buzz banner. The way that the Figma plugin works is it basically lists all of the elements in your banner design and then allows you to apply animations to those. For example, I could select one of these animations here, and you’ll see if I click play in our little timeline preview, it’s now animating in that element. You can go through and animate all of these. It’s totally up to you what kind of animation style you want to use. It’s completely flexible. You can create custom animations as well. In this case, I’m just going to keep it really simple and animate a handful of layers really simply.

I’m just going to use a few really basic animations like fades just so you can see what that looks like. You’ve got full control over the timeline itself. If you want to stagger some of these, you can do that by moving around the timeline. In this case, I’m just going to drag a few of these to stagger them a little bit. If you replay that, you can see that the animations are coming in the way that we would expect. Again, I’m not going to go through a huge amount of detail with this particular animation. Feel free to play around with all of the animation features in your own time.

Once you’re happy with the animation and you want to roll it out to multiple sizes in Figma Buzz, all you need to do is go to your Figma Buzz canvas. If you just go ahead and click on your existing animation banner, you can click on this drop-down up here. You can see that it’s currently set to the Google wide skyscraper ad. You can change that if you want to, but in this case, we’re just going to actually copy that. I’m just going to click on the frame, do a command C to copy, and then a command V to paste. Now you’ll see that we’ve got a second banner over here.

Now that we’ve got our copied banner, we can actually change that banner size. If I click on the frame over here, I can now go through the ad sizes and change that to a different ad, for example. We might want to do a mobile medium rectangle ad. You can just click on that, and that will automatically shift the elements around. Now we’ve got the skyscraper and the medium rectangle. To load that up into our timeline, all you need to do is click on the refresh button up here in the top left. That will allow you to refresh all of your banners. I’m just going to click on load all banners again. Once that loads up, you’ll see that we’ve got our original banner and our new banner.

You’ll notice that because we already applied some animations on our original banner up here, the skyscraper one, it’s automatically applying those exact same animations to our other banner over here too. We don’t have to reapply them. That’s why I’d recommend getting your animations set up on the original banner first, and then you can always really easily roll that out. Otherwise, you’re just going to have to go back through and update all of those individual banners each time. I’m just going to do one more copy just to show you again how that works. I’m just going to copy this second frame and paste that. Again, I’m just going to go to that third frame now, and we can change that one more time. I might want to do that one as a landscape one. Again, just refresh your banners in the Figma plugin, and now we should have a brand new one over here.

What we can now do is export these to different formats. I’m just going to keep this really simple. I’m just going to get rid of the second banner and refresh these two just to make it really simple. I’m going to export these out to a couple of different formats. The first one we’re going to do is just a standard HTML banner. If you need to export to HTML, you can do that using the HTML export settings here. All I did there was just click on the export to HTML button. You’ve got a bunch of different options you can configure, but the main one would be selecting what platform you’re using. If you’re exporting the banners to be uploaded to a platform like Google Ads, you can go ahead and click on the Google Ads option, and that’s going to automatically format the code for that platform.

All you need to do is click on the export banners button. You might want to enable some different options up here. You might want to enable file size targets and things, but again, just keeping this really simple, I’m going to click on the export banners button down here. That’s going to generate all of the HTML code and images, and then it’s going to give me this zip file. All I need to do now is click on the download your zip file button. Then I’m going to save that to my desktop and just click on save. Now all I need to do is double-click on my zip file that we just saved, open up that folder, and you can see here that we’ve got our banners exported.

You’ll notice that there’s an images folder with all of the image assets. Those are all the images from the banner. We’ve also got the index.html files in here as well. You can really easily preview those just by grabbing the index.html file from the main banner directory and dropping that into your browser. If we open that up here, you can see that we’ve got a preview of our HTML banners. Those are looking really good. If you need to upload those to Google, you can basically just go into the zips folder. There’s an underscore zips folder, and those zip files are ready to upload. That’s the HTML export option.

Then you’ve also got the export option of GIF or video. If you’re uploading social banners or other platforms, you might want to use those. To do that, all you need to do is click on the export to GIF/Video button up here. Then, you just want to choose your output format. You can choose MP4, you can choose GIF, and a bunch of other formats as well. In this case, I’m just going to keep it simple and use MP4. I’m just going to use that. Again, I’m not going to customize anything, but you can customize things like frame rate and stuff like that. I’m just going to click on the export MP4 button, and that’s going to generate the MP4 versions of these banners. Once that’s finished, it’s going to allow me to download those MP4 video files, and then I can use them however I like.

That’s just finished now. I’m going to again click on the download your zip file button, going to save that to my desktop. One more time, I’m just going to unzip that by double-clicking on the zip. Now we’ve got this video export. If I open up one of these previews, we’ve got our MP4 video file. I can click around, and that’s a proper video. We can also preview those at the same time by dragging and dropping the index.html file into the browser again. This time it’s going to load up the video previews.

That’s basically what it looks like. That’s essentially it. I just wanted to give you a really quick overview of how you can use the Bannerify Figma plugin in your Figma Buzz files to easily animate those banners in your Figma Buzz files, but more importantly, export them out to really useful formats like HTML and GIF or videos. That’s basically the tutorial, and I hope it’s helpful if you’ve been using Figma Buzz for your banners but have been wondering how to animate them and export them out. The Bannerify animation timeline Figma plugin is going to make that really easy for you. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one.