How to export animated banners from Figma Motion 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 automatically use your Figma motion timeline animations and import those into the Bannerify Figma plugin, which will allow you to export those animated banners out to HTML, GIF, or videos. To get started, all we need to do is go to our Figma file. If you click on the actions icon down here and just go to the Figma plugins tab, if you search for Bannerify, under the Figma plugins tab, you can either run the Figma plugin by clicking on this run button here, or I’d recommend clicking on the save icon over here, which will save it to your Figma plugins list for easy access later. I’ve already clicked on the save button down here, so I’m just going to run the Figma plugin by going to my canvas. I’m just going to right-click anywhere and go down to plugins, then go down to saved plugins, and click on the Bannerify item. That’s just going to run the Figma plugin that we saved a second ago.

If you’re new to the Figma plugin, the way that it works is it basically looks for any frames on your Figma page and allows you to load those in as banners. Then it allows you to animate any content layers in a banner timeline. For today’s tutorial, I’ve just got a really simple single banner. We’re just going to load up this one banner by clicking on the load all banners button in the Figma plugin. That’s going to load up all of the content layers inside of our frame and allow us to animate those in our banner timeline. If you’ve used the Figma plugin before or if you’re new to it, the way that it normally works is you can basically just go through and start applying animations directly from the Figma plugin itself. For example, we can apply an animation to this layer here. We can move that around. We can extend or contract the length of that animation, and you can basically just build out completely custom animations in the Figma plugin. That’s how the Figma plugin works and that’s still the most common way of using it.

Now that Figma has also released their native Figma motion feature, which allows you to animate your layers directly in Figma as well, I’ll show you how to get into that. By default, the file is just going to be open on this little design tab down here, which is just the Figma design mode. To enter the Figma motion mode, you just click on this little motion icon down here. That will switch your Figma file into this Figma motion mode. Then you can essentially click on any of your layers inside of your frames, and it will allow you to animate those layers by individual properties natively inside of Figma. If we click the play button here, you can see that on the canvas, it’s actually going through and reflecting those animations that have been applied in the Figma motion timeline, which of course is separate from the Figma plugin timeline.

What we’re going to do is essentially import these animations from Figma Motion directly into Bannerify and mirror those directly. If you have already used the Figma motion feature to create your animated layers in your frame, we can basically just reuse those in Bannerify rather than manually recreating them all from scratch. It’s a really quick process to do that. There are two different ways you can go about it. If you want to just import everything in one go, you can click on this apply to all layers button up here, which will show up when it detects any Figma motion animations on your layers. You also have the option of manually going through these and just picking which layers you want to grab the Figma motion animations from. For example, you can see here there’s a Figma motion group. If we click on this Figma motion option, that is automatically going to import that animation directly from our motion timeline. You can see here the CTA layer, which is also down here, has been imported directly from Figma motion. The animation on the canvas is this kind of fade-up animation that’s automatically getting imported over here into the Figma plugin because we selected that option.

That’s really cool, and that also means we can adjust the timings. If we want to reuse the animation and make it a bit longer or move it to the end or move it to the start, you’ve got full control over that here because we’ve got this mirror Figma motion timing setting turned off. I’m going to show you how to use that a little bit more. Let’s say you don’t want to do it individually, which is also totally fine, and you actually just want to do a wholesale import. What you can do, as I mentioned, is just go ahead and click on the apply to all layers button up here or apply to all banners. In this case, it’s six layers. That will copy all of the animations from the Figma motion timeline into our Bannerify timeline. I’m going to do that right now. I’m just going to click on the apply to all banners button up here. You can see with one click it has basically imported all of those animations and set them all as the animation on all of those layers.

Now, if we play this, you can see here that those animations are being included in the timeline automatically. That’s looking really good. You notice that this little toggle up here has automatically been enabled. Because we clicked on that apply all banners button earlier, it’s assumed that we also want to carry across the timings. That’s the reason why the timings over here are disabled in the Figma motion options. You can see because all those are selected. For example, if I change this to another preset instead, that would reactivate the timeline, and we can move that one around. But because we’re using the Figma motion animation, that’s going to blank that out. The reason for that is because we’ve got this mirror Figma motion timings toggle selected. If I turn that on or off, it’s allowing us to move those timeline positions around. When I have it on, it’s just taking those timings directly from your Figma motion down here, so it’s going to mirror those automatically.

Again, this is totally up to you depending on your use case. You might want that on, you might not want that on, but you’ve got the option to toggle that on and customize it or just leave it on and mirror what’s already in Figma Motion. That’s going to allow you to just replicate that. Once you’re happy with the Figma Motion animations in the Figma plugin, now the question is which format do you want to export it to? You’ve got a few different options here. We’ll first go with the HTML option. Let’s say you want to export this to HTML code. You can just click on the export to HTML button in the top of the Figma plugin window here. You’ve got a whole bunch of different options. I’m just going to leave these as default for now, but you can also select certain ad platforms as well. For example, if you needed to upload it to a certain platform like Google Ads, you can select that platform format here, and that will automatically include the correct code for that platform. Again, it’s totally up to you what platform you want to be using the HTML with. You can even leave it as the default plain HTML if you like. It’s completely up to you. In this case, I’m going to use the Google Ads option. I’m just going to go ahead and click on the export banner button down here. You can see that’s just finished exporting. Once it says that it’s ready, you can just go ahead and click on the download your zip file button, and you can save that to your computer. I’m just going to save it to my desktop.

Once that saves, all you need to do is unzip that file. If you unzip the zip file that it saves and open up that folder, you’ll see something that looks like this. Inside the banners folder, we’ve got our HTML and all of our image assets. You can preview that really easily just by opening up the index.html file in the root of that folder. I’m just going to drop that into my browser. You can see here that it’s automatically playing back that HTML. This is a pure HTML code-based animation. It’s not a video; this is code. You can use this for things like Google Ads or other ad platforms as well.

The other option you’ve got is you can also export it to GIF or video. To do that, you can just click on the export to GIF/video button in the Figma plugin. Again, you can select the output format up here. If you need MP4, which is the default, you can just select that, or you can select GIF or webm or a variety of other formats as well. In this case, I’m just going to use MP4 as an example and click on that. Again, you can customize some of these options here. I’m just going to leave them as defaults, and then I’m going to click on the export MP4 button down here. That’s going to automatically render this as an MP4 video that we can download. That was pretty quick because it’s a fairly short banner and we’ve only got one of them. Now it’s saying that our banners are ready. Again, all we need to do is click on the download your zip file button and just save that directly to your computer. One more time, I’m just going to unzip that folder that we just saved. Open that up, and you can see in the videos folder, there will be an MP4. If we open that up as a preview, we can see that is an MP4 video that we can scrub through. You can preview this really easily if you’ve got multiple banners just by dropping that preview file into your browser or hosting it somewhere. Again, we’ve got our MP4 video preview there.

Finally, the exact same approach. Just go to export to GIF/video again. If we want a GIF, we just change that output format to animated GIF. Again, you’ve got a bunch of different options here like looping and things like that. But again, I’m just going to leave that as default and click on export GIF. This is going to render out that banner, but this time as an animated GIF. One last time, I’m just going to click on the download your zip file button, save that to my desktop. I’ll unzip that file. Once that opens up, we can see we’ve now got a GIFs folder with a GIF file there. That’s going to just loop infinitely. That’s got the infinite loop setting enabled in the Figma plugin, which is why I’ve got that infinite loop in the preview. Again, we’ve got an index.html file if we want to open that up in the browser and share that with our client or share that for approvals and things like that, which is really handy if you’ve got multiple banners. In this case, we’ve just kept it simple with one, but if you’ve got a whole banner set, all of those will apply onto all of these preview pages as well.

That’s basically a rough overview of how you can now use the official Figma motion timeline and integrate that with the Bannerify Figma plugin, which is really useful if you need to export the banners into those various formats like HTML, video, or GIF, or have a bit more control over the different animations and things like that as well. The Figma plugin has a whole bunch of different features that you can use. You can combine these Figma motion features with a lot of other features in the Figma plugin, such as adding more custom animations and also adding exit animations and hover animations. This is just a nice bridge to get your Figma motion animations that you might have set up on your layers directly into Bannerify, and then you can kind of use it as you like and take it from there. I hope that’s helpful if you are a Figma Motion user and also want to use the Bannerify Figma plugin with Figma Motion. This is a brand new feature. It’s worth noting that the Figma Motion API is still in beta, so there are a few things that might not be supported just yet, but over time, once those become available, the Figma plugin will reflect those enhancements as well. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.