How to animate groups and layers independently and export to HTML, MP4 or GIF using Bannerify

Video Transcript

Today I’m going to be showing you a quick tutorial on how we can independently animate a group layer and nested layers automatically using the Bannerify Figma plugin. To get started, all we need to do is go to our Figma file. If you go down to the actions icon down here in the footer and just search for Bannerify, you can find it under the Figma plugins tab. Click on the Bannerify item, and you can run the Figma plugin by either clicking on this run button down here or by clicking on the save icon next to that. That’s going to allow you to run the Figma plugin from your Figma plugins list. I’ve already clicked on the save icon, so I’m just going to go back to my Figma canvas, right-click anywhere, go down to plugins, go down to saved plugins, and then go to the Bannerify item and click on open Bannerify. 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 allows you to load in any top-level Figma frames. For example, this frame on our page here. It also loads in any children or any child layers as animatable layers in your banner timeline. I’m going to show you what that looks like now. I’ve just got this one frame on my Figma page, so I’m going to load that in by clicking on the load checked banners button down here and load that up. You can see here that it’s automatically loading in those three child layers as three animatable timeline layers. I’ve already applied a slide-in left animation to the car group layer, and you can see that’s loading in here.

If you’re new to the Figma plugin, you can easily apply any animations just by opening up this dropdown list here and selecting any animation. You can adjust the timings just by using these sliders and controls over on the right-hand side here, and then you can preview it over on the right-hand side as well. You’ll notice that this car animation looks a little bit off because we’re only animating the car. The wheels themselves aren’t moving, which looks a little strange just animating it in like that. If we want to animate the nested layers as well, we have a couple of nested layers for each wheel over here: the left wheel and the right wheel. If we want to animate those, we can do that through the Figma plugin by clicking on this little open nested layer settings icon here. It’s just the icon in the first row of your frame. Click on that icon, and that’s going to allow you to expand out the layers you want to load into the timeline.

By default, it will just load in the top child level layers, but you can expand it in this animate nested layers panel here just by clicking on this little arrow. Now it’s going to expose all of the child layers inside of this car group and allow us to animate those automatically in the timeline. If I close that off now and go back to the timeline, you can see that it’s loaded in all those child layers as well. We have the left wheel and the right wheel along with all these other vector layers. Those are all being loaded in now as well. Because we want to also animate the wheels and the overall group at the same time, we need to enable one extra option. This is a new option in the Figma plugin. You can see up here at the parent level, we now have this toggle called keep parent animatable. What that means is if we enable this layer, it’s going to make sure that the parent layer is included in the animation timeline as well.

I’m just going to open that up by closing off the tab again. Because we’ve got that enabled, you can see that it’s now also loading in the parent layer as a separate animatable layer. What that means is we can animate the top-level layer and also animate the inner layers at the same time. I’ll show you what that looks like now. For example, if we just do a rotate 360° animation on these layers here, we can set that on these two wheel layers. We have them rotating 360°. If I now replay that, you’ll notice that the wheels are animating as well. It’s animating all of the group layer by animating the parent layer and also allowing us to apply independent animations on any child layers. We can animate those at the same time. Now you can see the group is being animated using the top-level animation here, and we can also see the independent wheel animations here as well.

We could also apply this to other layers. Now that we’ve exposed the other layers, we could do a little bounce animation, for example. If we do this bounce here, it might be a little too crazy, actually. I’m just going to find another one. I think there’s one called vibrate we can use. We might want to select something like this. If we now replay that, you’ll get the vibrating animation on the car as well. That’s basically how you can separately animate any or all of the child layers inside of that parent layer while also applying an overall animation to the parent. Hopefully, that all makes sense. If this is something you’ve been wanting to do, you probably already understand the use case, but I was just trying to break it down in a really easy-to-understand way by using this car example. Of course, you could apply this to many other different types of animations as well. You can imagine any kind of animation where you need a parent-level animation while still having things going on inside of that parent. This is going to be a really easy way to do that.

Again, you just open up that nested animation panel, open up the layers that you want to include, and if you need that parent layer included and animatable, just click on that keep parent animatable group motion option enabled. That’s going to allow you to animate the parent while also animating the individual layers inside. Finally, the last step would just be exporting the animation once you’re happy as well. With any banners that you design in Bannerify, you can export them out to either GIF files, video files, or HTML banners. These can be exported just as plain HTML CSS or for a specific ad platform. For example, you might have a Google Ads export you need. Just select the Google Ads export option and then click on the export banner button down here. That’s going to automatically generate all of the code and the assets. If you save that directly to your computer and open up the zip file, you can preview it just by opening up the preview file in your browser. You can see here we’ve got the HTML version of the banner loading up really nicely.

You can do that for other formats as well. If you want to export it to GIF or video, you can just select the format in this option, click on the export MP4 or export GIF option, and that’s going to do the same thing. In this case, it’s going to give you a video file or a GIF file. Again, you just save that directly to your computer, unzip the folder, and you’ll have the video or the GIF included there, and that’s going to play as you’d expect. That’s basically it. I just wanted to run through this use case with you really quickly. If you’ve found yourself needing a feature for animating a parent layer and also its independent child layers or some of those child layers independent of each other, this is going to be a really easy way to do that. You just go into your nested animations panel as I mentioned, click on the keep parent animatable group motion option, and that’s going to automatically do that for you once you’ve got the parent layer expanded. You can do that for any other nested layers as well. You can keep going as much as you like, but I would try to keep it a little bit under control and not go too many layers deep because you’ll just end up with heaps of nested animations. You can do that; it’s completely up to you. Just be mindful that it will generate more image assets in your final banner as well. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.