How to create multi-scene animated banners in Figma using Bannerify

Video Transcript

Today I am going to be showing you a quick tutorial on how to turn your Figma frames into animated banners with multiple scenes using the Bannerify Figma plugin.

To get started, all we need to do is go to our Figma file, go down to the little actions icon down here at the bottom, and search for Bannerify. Under the Plugins tab, click on the Bannerify item. You can run the Figma plugin by either clicking on the Run button down here, or I would recommend clicking on the Save icon next to that. That will save it to your plugins list for easy access later.

I have already clicked on that Save icon, so I am just going to go to my Figma file, right click anywhere, and go down to Plugins. Then I am going to go down to Saved plugins and click on the Bannerify item. That is going to run the Figma plugin we saved a second ago.

By default, the Figma plugin allows you to take any Figma frames on your current Figma page and load those into the plugin as individual banners. To show you what that normally looks like, I am going to click on the Load all banners button. You can see we have three different banners here that we can preview and animate in our timeline. I have already got a few animations applied to these, but I just wanted to show you how that normally looks, where you have three different frames getting treated as three different banners.

In this case, we actually want to take all three of these frames and turn them into one single banner. We are going to do that by creating a new section layer and then reloading these frames into the plugin.

What I am going to do first is take these existing three frames, assuming that I want all of these at the same dimensions and want them all as part of the same banner. I am going to highlight those three frames, right click on them, and then click on the Wrap in new section item here. In the Figma menu, click on Wrap in new section. That is going to create a brand new section layer in Figma. You can see that inside of that new section, we have our three individual frames.

You will notice that these have not done anything yet in the Figma plugin because we need to go back to the banner loading screen. We can do that by clicking on this little refresh icon at the top here where it says Refresh all banners. I am going to click on that, which will bring us back to the banner loading screen.

Again, you can see by default it is allowing us to load in those three frames separately. What we are going to do instead is enable this toggle here called Use Figma sections as multi scene banners. That changes the mode of the Figma plugin to look for section layers instead of frame layers on your page. It treats each of those sections, with multiple frames in them at the same size, as a single banner.

We have just got one section at the moment, so I am going to click on that one and click on Load checked banners with that toggle enabled. You can see this time we have Section 1 being loaded in, which is what we have named our Figma file here. In each of these layers, they are getting split up into scenes. We can see Scene 1, Scene 2, and Scene 3. It is taking each of these frame layers and treating them as different scenes, which we can now animate separately.

If I play this back right now, you can see all of these are getting played at the same time because I have not updated the timeline yet. What I am going to do is extend the timeline to be a bit longer. In this case, I am going to triple it, going from 5 seconds out to 15 seconds, and hit Update timeline length. That extends the timeline length by three.

Then I can quickly minimize these scene layers and start to adjust the timeline offsets to better align with this longer timeline. You will notice now when I preview it, we have Scene 1, Scene 2, and Scene 3 all playing in the same banner. If we play that through, it animates each of those individually, toggling in and out between the three elements. That is what that looks like.

If we want to export this, we can easily do that by clicking on the Export HTML button. Click on that, choose your platform options, and I am going to keep it simple with the HTML option for now. Export the banner, then click on Download your zip file. Save that to your desktop or anywhere you like. If you unzip that file and open the folder, you will be able to open that file in your web browser.

I am going to drag and drop the preview file here, and you can see that it has exported the HTML banner with those three scenes playing in order. That is looking really good.

Likewise, we can also do this for GIFs or videos. I can export this to an MP4, for example, and that will automatically output this entire banner again with the three scenes compounded into one banner. We do not have them as separate frames. This allows us to create one long banner with multiple scenes in it.

Once that is done, click on Download your zip file again and save it to your computer. If you unzip that file, you can load up the preview page in your browser. I am going to drag that in, and you can see we now have the video version. If you open up the Videos folder, you will also see the MP4 file there, which allows you to play that back as an MP4 video as well.

You can also do this for multiple banners. For example, if you have multiple sizes, you can duplicate that banner. I could take Section 1 and duplicate it a couple of times. If these have different dimensions, we could change those here. You could shift the dimensions to whatever you need. Maybe you have some longer banners, create a version where the banner frames are a little bit longer, and shift these elements down. That could be a different kind of creative.

This is not a great attempt visually, but it is just to show you what it looks like. If I refresh all my banners again, you will see I now have three different sections I can load in. If I click on Load all banners, that loads three different banners. You can see I now have a longer banner here with those three scenes. I am going to collapse all of these for ease of scrolling. You can see the others here, and Section 1 down here again, as expected.

You can also jump to these by clicking on any of these layers over here, which will automatically jump you to them.

One small thing to be mindful of is that all of the banner frames must be exactly the same size. For example, in this particular one, it is only loading in two scenes. The reason for that is the frames have different dimensions. You can see one is set to 269 width, another is 268, and another is 269 by 250. You want to make sure those are always the same size if you want them treated as the same banner.

In this case, if I set them all to 268 and refresh this banner, then reload it, you can see all three scenes are loading in as expected.

Finally, you can export multiple banners with multiple scenes. I am going to load in all banners again and export those to HTML. Click on Export to HTML and export three banners. This will generate the code and images for all three banners. Click on Download your zip file, save it to your desktop, open the zip file, and when we open the HTML file, we should see three different banners.

You can see we now have three completely different banners loaded in, all with different sizes. We have copies of all of those banners here, Section 1, Section 2, and Section 3, all loading as expected.

That is a nice way of stringing together scenes and exporting them into multiple banners with multiple dimensions. I will leave it there for today. Hopefully this has been helpful. If you have been wanting to create more complex or larger banners with multiple creatives in them without having to manage everything inside a single frame in Figma, this should make that process a lot more streamlined.

Thank you, as always, for watching, and we will be back with more Figma tutorials like this very soon.