How to export animated banners from Figma to WebM Videos using Bannerify

Video Transcript

Today I’m going to be showing you how to export animated banners from Figma to WebM video files in one click using the Bannerify Figma plugin.

If you haven’t already done so, you’ll need to install the Bannerify Figma plugin by going up to the top left hand corner of the Figma app and clicking on the little Figma icon, and if you go down to “Community” or “Plugins” and then if you search for the keyword “Bannerify”, then just click on the “Plugins” tab and you’ll see a result called “Bannerify” pop right up, and if you haven’t already done so, you can go over to the right hand side here and there’ll be an “Install” button, if you just click on that “Install” button, it’ll change it to look like mine where it says “Installed” and has a little check mark on it and when you see it change to look like mine, that means you’re ready to go and you can jump back into your Figma project.

I’m just going to be using a banner set that I designed as a bit of an example to use with this Figma plugin, and the first thing we need to do is just right click anywhere, go down to “Plugins” and click on “Bannerify” in your plugin list and that will start up the Bannerify Figma plugin that we just installed. What this is going to do is it’s going to look through all of our layers on the left hand side here, and it’s going to treat every parent frame as its own banner. Each each of these frames is treated as its own banner and then if you open up the layers list you’ll see that those correlate to the layers in all of our banners inside of the Figma plugin; each of those layers can be animated and as you can see here, I’ve already got some animations set up. If I just click on the little preview you can see it animating over here. I’ve set these up before, but you can set up the animations any way you want, I’m not going to go into detail about setting up animations in this video, but I do have another in-depth video on it on the YouTube channel; if you just browse for the animation video on Bannerify, you’ll be able to get a full deep dive into how to set up the animations and the most efficient way to do that, but today I’m just going to be assuming that you’ve already set up the animations in Bannerify the way that you want, and now you just want to export them to some WebM video files from Figma.

We can do that really easily just by clicking on this button up here in the top header called “Export to GIF/Video”; if you click on that button you’ll see this little module pop out, this little feature which is letting us export our banners to a GIF or WebM video from Figma using the Bannerify plugin. It’s just letting us know that these banners are going to be played through in real time and rendered out, so you’re going to get a zip file once it’s complete. There’s a couple of options here that we can set up: the first one is related to GIFs only; I’m not going to be covering GIFs in this video, but I do have another video showing examples of that if you do want to see that on the YouTube channel, so I’m going to leave that option off for now because it won’t impact what we’re doing today. The next option is just output quality; this little slider will change the quality and the file size of your export, if you set it to a lower number a lower setting it’s going to mean that the quality is lower, but it’s also going to mean that the file size is lower, and conversely if you set it up higher it’s going to mean that the quality of the video is better, but again the file size is just going to be a bit larger. I’m just going to leave it around 90 which is the default, and just set it to that and then the final option is just around the preview page; basically when you export from Bannerify you always get a little preview page which is just an “index.html” file containing all of the exported banners, and it’s just a really easy way to upload that to a server or send that to a team member or a client and they can approve your banners based on this little overview of all the exports. This setting basically just turns on dark mode for that export, so if you have a set of banners that are going to look better with a dark background or a dark theme you can enable that otherwise it’s going to look like basically what it looks like in the Figma file, the background color is the same as whatever it is in in Figma right now which is this sort of light gray. I’m just going to leave that setting turned off in this instance, but you can experiment with that if you’d like to.

Okay, now that we’ve set up our settings the way that we want, all we need to do is click on this button called “Export to WebM”, so I’m going to click on that now, and what this is doing is it’s actually going through and playing each banner. It’s playing all of the animations for every banner; I’ve got 11 banners in my case and it’s playing through them in order to capture frame-by-frame the animations and the playback for all of them, and once it finishes capturing the frames for each banner it’s actually then using those frames to create a video file for each one. When it finishes up in a moment it’s going to render these out into video files and it’s going to package them up into a single zip file that you’re going to get as a download in just a moment, and then we can open that up and have a look at what’s actually exported for us. It’s fairly quick, it just depends on how many banners you do have and how long the timeline for each of those banners is, and that’s a rough indication of how long this export process will take. Now it’s zipping up our WebM files as we can see down here, and very shortly it’s just going to pop up and tell us it’s done which it has just done now; and you’ll get a little download prompt which will let you rename the file if you want to, I’m just going to leave it with the default, which is just today’s date the export format and just letting us know it’s come from Bannerify. I’m going to click on “Save” and send that to my desktop, and that’s the whole process. It’s let us know that the banners are ready and we can unzip those banners and basically use them however we want.

If I go down to my desktop now, you can see that I’ve got this zip file that has just saved out for me; all I need to do is double click on that and you’ll get a little folder. If you open up the folder you can see here it’s got all of our layers, or all of our banners, that we that we set up and export from Figma to videos. If I open up the “index.html” file; that just opens up the preview page in Chrome; that’s essentially playing all of our banners in the browser in this little neat grid, and these are all videos. You can see here if I actually enable the controls, these are these are videos that I can actually control the playback for, and it’s worth noting that this preview page I mentioned is fluid and responsive; if you do change the screen size or if somebody’s viewing it on a different screen size, it will automatically adjust the layout of the banners in order to be optimal for that screen size, so that’s really neat. We can see all of our banners basically exported as we wanted, and if you do want to look at them individually you can simply just drag any of those into the browser and that will actually load up the video itself that you can just have a look at; and obviously you can playback that video however you like, there’s a little control bar here that pops up because I’m just viewing the video itself now. The videos files we exported from Figma are looking really smooth; this is a 30 frames per second video, so you should notice it’s very smooth, very seamless and it has exported it just as you would expect.

We can have a look at any of those it’ll it’ll play through all of those. Depending on your implementation of it when you upload this to your website or when you upload this to your advertising network/platform, if you’re using it on a website you’ll be able to loop that playback just by adding some inline playback settings. If you use an HTML video tag and you put the “autoplay” attribute or if you put the the “loop” attributes in there; you can you can look up what those are like. I actually do have them in the preview file, so if you open up that “index.html” file in a code editor or a text editor you can actually see the HTML video tags in there, and you can just copy paste those, and it’ll be really simple. I can actually show you what that looks like now; if we drag that index file into the code editor, I’m just using VSCode at the moment; you can see here that it’s injected all the video tags for us and I’ve got the “autoplay” and “loop” properties set on that; that actually just causes the video to loop over and over on an infinite timeline for as long as we need it to and that’s why it’s looping on that preview page which we just looked at a moment ago. It’s really up to you what you do with the video, it’s totally your implementation of it, there’s no loop settings on the video themselves, so you can basically do whatever you want with it.

You’ll notice that these files are in WebM; WebM is a video format for the web, but if you do need this video in a different format, you could use another tool like an exporter tool or a converter tool that does convert video formats into different formats. If you need this as an MP4, or if you need this as a different different file type for some reason, there are third-party tools that you’ll be able to drag these files into and convert those into other formats, but these are WebM files and they’ll work on the web. If you do need it just for your website or if you do need it just for advertising banners, then WebM should be fine, but if you want to use it for something that’s not on the web or something that just needs a different file type, you’ll be able to find a converter to convert these WebM files, just Google “WebM to” whatever format that you need, and I’m sure something will pop right up.

Okay, that’s the entire tutorial; as I mentioned, it’s really simple, it’s just a one-click process from Bannerify to export these video files from Figma, and again, assuming that you’ve already got those animations set up, you can just keep exporting these as much as you want. If you need to do some animation changes and you want to export it again, or if you need to make some design updates or positioning updates in the banner, you can just simply rerun the Figma plugin, click that “Export to GIF/Video” button again, and the process that we just watched will get executed again. You can just keep doing that as many times as you want without needing any video software or exporting those frames manually, and then somehow exporting into a video, Bannerify will do all of that for you.

If you’ve been looking for a way to export banners for your website or banners for your advertising platforms from Figma to video, or to WebM in this case, then Bannerify now supports this along with lots of other HTML export format options, and also now it supports exporting banners from Figma to GIFs; which as I mentioned is in another tutorial, and we also have a bunch of other tutorials on every other export setting that it supports: HTML, GSAP, HTML Canvas, DoubleClick, Adwords; all of these different platforms and more; you’ll be able to find each of those tutorials on our YouTube channel if you’d like to view those as well.

That’s all I have for you today; I hope that you’ve enjoyed this Figma tutorial and I hope you’ve got something out of it, if you want to take this back to your team or to your agency and give it a trym you can install the Bannerify Figma plugin and run it the way that we just looked at, and hopefully you have some success with it. Thank you as always for watching, and we’ll be back soon with more Figma tutorials just like this one very soon.