How to add Lottie animations to Figma banner exports using Bannerify

Video Transcript

Today I’m going to be showing you how to add Lottie file animations into your Figma banner designs and then export those out to HTML, GIF and video banners, directly from Figma.

To get started, we’re just going to install a Figma plugin called Bannerify. If you search in the Figma Community for “Bannerify”, and under the “Plugins” tab you’ll see Bannerify pop up. All you need to do is click on the “Install” button on the right-hand side and then you’ll be ready to go.

I’m just going to jump back into my Figma file, and I’ve gone a bit meta today and I’ve designed a really simple “Lottie Files” banner; we’re going to be adding Lottie file animations into this banner and we’re going to be advertising the Lottie files brand or service in our banner design as well. This is really simple, I’ve just got two frames set up each with four different layers, I’ve got a logo layer, text layer, a placeholder layer, and a button layer. All we need to do is right-click anywhere, go down to “Plugins”, and click on “Bannerify” and that’s going to load up the Figma plugin that we just installed a moment ago. Once it loads up, you just select which frames you want to load in; I’ve only got two parent level frames, those are the ones that are coming up, and I’m just going to go ahead and load both of those in. I’m going to click on “Load Selected Banners” and that’s just going to load up all the layers that we can see on the left hand side here.

If you go through the animation you can see that I’ve already got a few really simple fade in animations set on those four layers, and they’re just slightly staggered, and they’ve got a speed of one second each. You can see them coming in pretty smoothly just like that; we can play through that and you can see how that works. If you’re new to the Bannerify Figma plugin, there’s a separate YouTube tutorial on how to animate and design your banners, but today I’m really just going to be focusing on adding the new Lottie file integration into your banners as well; with that said, let’s get started.

To add a Lottie file animation to any of your Figma layers all you need to do is basically add a placeholder layer where you want a lot of animation to go; in my case I’ve just added these two rectangle layers, that’s why they’re gray and boring, and I’ve just labeled each as “Lottie Animation Placeholder” so I know what they are. Then all we need to do is just go to the settings icon; you can see there’s a settings cog icon on that layer, so I’m going to click on the “Lottie Animation Placeholder” layer settings icon. I’m going to click on that, and you can see down here at the bottom we’ve got a little embed logo or import logo and a text area; this text area is where we’re going to paste our Lottie file animation link; this is going to be a link to a Lottie JSON file. This can either be on your own server or your own location, but more commonly you’re probably going to be uploading it to the Lottie Files website, or getting a pre-existing animation from there.

To do that we just need to go to lottiefiles.com, and if you just make a free account, you can do that really quickly, that will allow you to browse their animations. If we just go to “Discover” and go to “Free Animations” and you can search by different categories and things like that, or just search for a specific animation. This is just the list of featured animations that you’ll see; we’ve got all these available to us, and to insert one of these into Bannerify in Figma, we just click on the animation that we want to add, and then you’ll see there’s a little box down here called “Lottie Animation URL”; we want to grab that by clicking on this little copy icon. That’s going to copy the URL, and then I’m going to jump back into Figma and in our text box here, I’m now just going to paste that URL that we copied from the Lottie Files website. I’m going to paste that in, you can see there it’s got a JSON file at the end, you definitely want to make sure it’s got that, and then I’m going to set it to loop. By default it just will loop the animation, you can turn that off if you want, but I’m just going to loop it for now.

I’m just going to click back into my timeline, and you can see here we’ve now got a Lottie animation in our layers. If we play that, we’ll play that from the start, and you can see there it’s playing the Lottie file animation the same way that we had seen it on the website from Lottie Files as well. That’s what that looks like, as I said, you can scroll through that and see what the animation is going to look like, but you can notice as well it’s also applying the Bannerify animation to that layer. For example, if we were to change the “fade in” animation to a “scale in” animation, and we changed that and then we scaled that down, you can see here that it’s not only playing the Lottie animation as an embed, but it’s also applying our Bannerify transitions. We can transition in and transition out different Lottie files, and that’ll apply the animation to the actual layer as well; that’s scaling it in. We can also apply an exit animation, if we want to scale it out we can do that too; we can just drag that up there and this will scale it out as well. If we now play that, it’s going to go away.

We can also add more Lottie animations as well; if we wanted to have multiple steps in this banner all we need to do is just create a new placeholder frame. For example, I’m just going to add another one I’ll pop that into our original banner, the one that we’re just working on. I’m just going to drop that in there; we can call this one “Lottie Animation Placeholder 2” and I’m just going to drop that into my banner there and then we can just now grab another random Lottie animation to show off. We can do a silly one; we’ve got this bodybuilding dancer, so we’ll grab that, copy the URL again, and I’m just going to refresh my layers just by clicking on this little “refresh” button in the timeline. Under my “Lottie Animation Placeholder 2” layer I’m going to click on the settings icon for that, and I’m just going to paste that Lottie file JSON in there and load that up, and I’m just going to make this come in after our other animations already gone out. If I just position that over here, and we’ll scale that in, we may as well do the same animation; we’ll scale that one in, and if we play that now, we’ll play it through you can see the first slide animation scales in and out and they are the second one’s in there as well. That’s looking really good, I think that would make for a very nice animation advertising the Lottie files service, using Lottie file animations, I think that’s cool.

That’s basically what it looks like, and then if we want to go ahead and export that, we just do it the same way that you always do in the Bannerify Figma plugin, and that’s by going to the “Export to HTML” button. I’m not going to export the second one because I haven’t really done much work on that, that’s just a smaller version that I had set up, but I’m just going to export this one for now. I’m going to click on “Export to HTML”, I’m going to infinitely loop all the banners, and I’m just going to save it as “HTML/CSS”, you can obviously save it to other platforms; you’ve got “DoubleClick Studio”, “Google Ads” and all that good stuff if you’re using a certain platform, but today I’m just going to be doing HTML/CSS, very standard. I’m just going to click that “Export Banner” button and that’s just exported our banner to HTML. I’m going to click “Download the .zip file”, I’m just going to save that to my desktop, and if I go ahead and unzip that. I’m just going to double click on the zip file, double click on the exported folder, and then if I grab this index file and drop it into my browser, this is the HTML export. This is basically the production ready code that you want to add to your website or up upload to a different platform like a Google Ads if you exported it for that, but that’s what it looks like. It’s really nice, really smooth as you’d expect, and that’s what that looks like there.

The other thing we can do is also export it out to other formats, too. If we wanted to export it from Figma to a GIF, WebM or MP4 video file we can do that as well. We just click on the “Export to GIF/Video” button, then we can click on the format that we want, and again this will export it out to that format, too. We’re exporting the banner with our Lottie animations out from Figma to a video now, and I’m just going to do the same thing, I’m going to click on “Download your .zip file”, save it to the desktop, I’m going to unzip that file, and then if we open that back up; I’m just going to click on the HTML file, and there we go. we’ve got our video. You can see if I show the controls, that’s just a video playing now; we can go through that as you expect, and these can be really handy if you’re creating ads for social media. If you’re creating Facebook ads or Instagram ads, these video exports can be really handy as well. The Lottie files are supported in that; the only thing to note is that in the video exports at the moment, some of the different masking effects that some of the more advanced Lottie files use have some problems in the video side of things, so hopefully that gets resolved in a future version of the Lottie player, but at the moment sometimes you will get some issues if it’s a really complex masking situation or things like that can sometimes be a bit strange in the video exports; just something to keep in mind for now, but the HTML exports will always look really nice just like this.

That’s basically it, the other thing you can do if you want to apply a lot of Lottie animations to multiple layers; if you’ve got multiple Lottie animations that you want to add to different banners, you can do that in one go just by clicking on the layers that you want to apply the Lottie animation to. If we click on “Lottie Animation Placeholder 2” and the other “Lottie Animation Placeholder 2” layer, if you want to apply the same Lottie animation to those two in one go, all you need to do is go down to the “Media Embed” section down here, paste in a Lottie file URL. I’m just going to grab the one that we had up here and I’m going to apply that by pasting it down here, and you can select again if you want it to loop or not; I’m just going to leave it to loop, and then I’m just going to click on the “Apply Embed” button and that’s basically going to apply that Lottie animation into the layers that you’ve selected. For example, this one here doesn’t actually have one yet on the Lottie animation placeholder layer, so I can grab the other one from there that I had before; I’m going to copy that one and paste that onto the layer, and then I can basically copy and paste the animations as well.

If I want to copy and paste my animation from the first Lottie file down to here I can do that just by clicking “copy” and “paste” and same thing for this layer, too. I’m going to copy that one and I’m going to paste it on the “Lottie Animation Placeholder” layer, too. Now if I play that back, you can see that we’ve got our animations the same from the first banner with the exact same timings, and that’s just taken away a whole bunch of effort to duplicate those animations. Again, you can just go through if you’ve got a bunch of banners and you want to do this really quickly, you can actually just go up to here to the “Quick Select Layer” selection, click on the layer name that you want; as long as the layer names are named the same you can quickly do it from here, just click on the layer that you want, and it will select that layer across all of your banners, and then you can again apply that Lottie animation or animations in bulk or batches in one go.

That’s basically it, as I said, it’s very simple, you just jump into your settings panel, paste in the Lottie animation URL, as long as it’s a valid Lottie animation. Again, you can upload these yourself if you create your own animation with After Effects for example, you can just go to the lottiefiles.com preview URL, which gets linked to from the banner Bannerify Figma plugin, and if you’ve got a local Lottie file that you already want to use, you can just browse for that upload it to here and then you’ll get the URL that you can copy directly into the Bannerify Figma plugin and use your own Lottie animations as well.

That’ll do it for today; I hope you’ve enjoyed this Figma tutorial, if you’ve been wondering how to add Lottie animations into Figma or into your Figma banners and then export those out to production ready HTML or production ready MP4 videos and GIFs, this is probably the quickest way to do it, using the Bannerify Figma plugin. I hope that you have a good time with it if you want to do a bit of an experimentation with your team or with your own banner sets, now you’ve got this added flexibility for more complex animations, hopefully it’s going to unlock a lot of creativity for you and your team going forward. As always, thank you for watching, and we’ll be back soon with more Figma tutorials just like this one very soon.