How to add hover animations to HTML banners in Figma using Bannerify

Video Transcript

Today I’m going to be showing you how to add animated hover states to your Figma banner designs, and then export those out to production ready HTML automatically.

To do this, we’re just going to go to the Figma Community and search for the term “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.

Once you’ve installed the Figma plugin, just jump back into your Figma file, and the Figma file should have a bunch of frames in it; and each frame should contain the layers that you want to include as the elements in your timeline. To start up the Figma plugin we just right click anywhere, go down to “Plugins” and then click on “Bannerify”, and that’s just going to open up the Figma plugin that we just installed a minute ago.

When the Figma plugin loads, it will ask you to select which frames in your file you want to load in to be banners. Today I’m just going to be using the “MREC” banner, and you can use as many as you want but I’m just going to use one for today, and then click on the “Load selected banners” button. You can see that’s just loaded up my “MREC” sized banner and it’s included all of the layers from our Figma designs.

If we go through the timeline you can see I’ve already added some animations to it, and I’m not going to be showing you how to do that in this particular Figma tutorial, there’s some other YouTube Figma tutorials on our channel if you want to go through those; today I’m just going to be focusing on how to add another state, which will be the hover state to any of our elements here. To do that, all we need to do is select the Figma layer that we want to add a hover state to; for example, if I want to add a hover animation to my button, my “CTA”, I just click on the “Add Hover” toggle in my Figma layer, and that’s just going to toggle on a brand new animation setting down here. You can see we’ve got our entry animation and our exit animation by default, but checking this “Add Hover” toggle now reveals a new animation selector for hover animations.

By default it won’t have any animation set on it, but we can open up this select box and start browsing some of the hover animations that are included; for example, if you wanted to add a simple “Grow” animation, if we click on “Grow” you can see here that it has revealed the timeline speed. We can change the speed of the hover effect; if I increase that to one second, for example, and then over in my preview I can actually now preview that hover animation in real time. If I hover over the “Apply” button you can see that it’s actually applying that grow animation, and if I reduce the speed, we can speed up that hover animation considerably; that’s now 0.3 seconds, but I can go through all of these and basically see what one is going to suit this creative.

I can do a rotation which will rotate the CTA slightly, I can do a bunch of more fancy ones; we can do bounce-in. I can also set it to loop, if I want it to continue to play while I’m hovering over it, I can check this “Loop” toggle and now if I hover over it, you can see that it’s going to continually play that animation, whereas if I turn the loop off the hover animation only goes in and it doesn’t keep repeating, it’ll just do a half a state and won’t keep looping, but if I turn that on it’ll keep looping. Again, I can change the speed of that one, too; if I want to slow it down just extend the timeline and now it’s a one second play through, so that animation is going to take a second. That’s basically what it looks like to add the hover effects.

Wwe can add this to as many layers as we like; if we wanted to add one to the logo we do the exact same thing, go to the “Logo” layer, click on the “Add Hover” toggle, and that’s just going to reveal the hover animation selector, and again you can select any of these, there’s a whole bunch in here; you can do a skew animation if you want to skew the logo, we can change it to be a wobble, we can wobble the animation and have that just a little one one time play through. Again, we can repeat that by clicking the “Loop” button and just having it continually wobble or we can slow that down, as we said before.

I’m just going to leave it with those two for now, and then to get this out to HTML all we need to do is click on the “Export to HTML” button, go down to our code output settings; we can just select if we want to export it to HTML/CSS, GreenSock (GSAP) animation or most likely an ad platform; if you’re exporting to Google Ads or DoubleClick, you’ll likely want to click on one of these. For today I’m just going to be keeping it simple and exporting to HTML and CSS. You can add your CTA down here; if you do want to include a click tag you can pre-populate that down here, so I can add in the “Hypermatic” domain. I can pop that in there and then all I need to do is click on the “Export Banner” button; i’ll click that now that’s going to generate all of the HTML and CSS for us.

I’m going to click on the “Download your .zip file” button, save that to the desktop, double-click on the zip file that it’s just saved to, unzip that, and then I’m going to open up the folder that it’s unzipped and go to the index.html file. I’m going to drag that into my browser just so we can see what it looks like, and you can see here we’ve got our banner animating in as we expected, and then now because we’ve added our hover effects you can see here when I hover over the CTA, it’s playing a looped animation that we set. I can also hover over the logo as well, so if I hover over the logo section, that will also animate in as we’d expect.

This is the preview page, so if you’ve got a bunch of banners they’ll all show up here. If you need the actual individual banner, it’s just inside of this “banners” folder here, so if we drag that into the browser, there we go; that’s the hover animation set on both those layers. Okay, that’s going to do it for today, as I said this is a really short Figma tutorial just to specifically go through how to add the hover animation states onto any Figma layers into your banner timeline.

The other thing I should have mentioned is you can do this in bulk as well. If you need to apply a hover animation to multiple layers, you can just click on multiple layers in the timeline, and then in the add in the “Add Hover” checkbox down here, just select that and that will reveal the hover animation in the bulk application panel as well. You just click on “Add Hover”, click on the animation you want to apply to multiple layers, so in this case I’m going to use the “Grow” animation and loop it, and then just click on the “Apply animations to selected layers” button, and that will apply the animation that you want to set; and this will also apply the entry, exit and hover animations, so make sure you’ve got them all set up the way that you actually want, and then just click on the “Apply animations to selected layers”; once you do that you’ll see that the animations get applied in the timeline in bulk. Both these layers are now the same and if we hover over these, you can see now this one’s playing the grow animation and this one is also playing the grow animation in the exact same way.

The other way you can do this really quickly is you can just use the copy and paste setting as well; if you click on “Copy” and then you click on “Paste” in another Figma layer, that’s going to copy and paste all of the animation attributes from the layer you copied it from over to the layer that you quickly pasted it to; this is just a really quick way if you just need to do a couple of layers and copy some animation settings that you’ve already created. Here was as well we can see that it’s copy and pasted that hover effect, so now all three of our layers actually have that exact same hover effect on it. That’s what that looks like there; thank you as always for watching, and we’ll be back soon with more Figma tutorials just like this one very soon.