How to add masked animations to Figma banners using Bannerify

Video Transcript

Today I’m going to be showing you a quick tutorial on how to add mask animations to your Figma banner timelines using the Bannerify Figma plugin. So, to get started, all we need to do is go to the little “Resources” icon at the top of your Figma file. If you click on that and search for “Bannerify,” and if you click on Bannerify, you can run the Figma plugin by either clicking on this “Run” button here. Or, I’d recommend clicking on this “Save” icon here, and that’ll save it to your Figma plugins list for easy access later. I’ve already done that, so I’m going to go to my canvas. I’m just going to right-click anywhere, go down to “Plugins,” and then click on the “Bannerify” item. That’s just going to run the Figma plugin we saved a second ago.

If you’re new to the Figma plugin, the way that it works is it basically treats every parent frame or artboard on your Figma canvas as a potential banner. So, you can select which banners you want to load into the Figma plugin and click on load checked banners. Then, it’s going to treat every layer inside of that frame as an element in your animation timeline to create and export that banner as an animated HTML banner or a GIF or a video.

I’m not going to go through all of the features in the Figma plugin today. There’s a bunch of other tutorials on the YouTube channel if you want to go into detail. Today, I’m just going to be focusing on some new animation features which allow you to add mask animations that look like this. You can see on the right-hand side here in the little preview that we’ve got some masking effects going on, which are new to the Figma plugin.

I’m going to run through how those work now. So basically, what we can do is we can go to our exit and entry animations, these two here for each layer. And we’ve now got a new category called entrances that are masked. So, we’ve got mask entrances, and we’ve got masked exits. If we scroll down here, you can see we’ve got two different categories for those. I can basically go through and change those depending on what kind of effect I want.

So, if I wanted to do a square effect, if I change that to a square effect for the exit animation, you can see here that it’s basically going square out to the top left. So when I play that through, that’s how it kind of vanishes. We can slow that down, so if we wanted to make that more drawn out, we can do it like that. Or we can change it to a wipe animation. So if we want it to wipe out right, we can do that as well. So if I click play, that’s going to wipe it out from the right. Same thing with the entrance. So, I can add y-pin effects, so I can do more of a wipe in from the top to the bottom. Or I can do wipe in left, and that’ll apply a different position as well.

You can basically go through all of your layers now and apply these wipe animations to get that masking effect. So you can see on my text layers, I’m doing a little bit of a delayed effect here. So, I’ve got these three here, and I’m slightly delaying them, so that’s 0.3, 0.4, 0.6. You can basically spread those out a bit if you want to get a bit more of a delayed effect, and we can see what that looks like here. So those are going to come in kind of one after the other, and we’re also wiping those out at the end. That’s basically how you can add the mask animations to your layers in Bannerify.

To export these out, you can either click on the “Export to HTML” button, which will allow you to export the code to just HTML and JavaScript. Alternatively, you can export it to GreenSock or GSAP. If you’re using a specific ad platform, you can select that as well. So, for example, we could do Google ads. Click on that and click on “Export Banner.” This will generate all of the code, all of the images that we need.

If we download that to our desktop, open up that zip file, you can then open up this preview in the browser. So, if we go to our browser and just drag that in, you can see here that we’ve got our animation exported as we’d expect. So, this is just pure HTML that you’d be able to upload to Google ads. We can also upload this or export this to a video. So, if you want to export it to a video, you can go to this button here, just click on “Export to GIF or video,” click on the video or GIF format you want to export, and this will export it to a video for you. So, these can be useful for social media posts or for your website.

We can do a GIF as well. So, I’ll just export the GIF while we’re opening up the video. And if we open up the video, we can see that dragging that into the browser as well, we’ll play that back. And finally, we’ve got our GIF as well. So, if we save that to our desktop, open that one up, and again, drag that into the browser, we’ll be able to preview that in here. And we can see this one is now a GIF.

That’s basically it. Those are the different formats you can export it to. So, yeah, I just want to keep this really short. This was a really frequently requested feature to have masking animations. So, this has just been added to the Figma plugin now. You can try this out in your own banners and hopefully, it adds some more creativity and flexibility to the types of animation styles you want to use in your Figma banners for HTML or video or GIFs. As always, thank you for watching and we’ll be back soon with more Figma tutorials like this one very soon.