How to generate custom animations using AI prompts in Figma (and export to HTML or video) using Bannerify

Video Transcript

Today I’m going to be showing you a quick Figma tutorial on how you can generate custom key frame animations for the Bannerify Figma plugin using your favorite AI tools like ChatGPT or Claude. To get started, all we need to do is go to our Figma file, and if you go down to the actions icon down at the bottom here and search for Bannerify.

Under the Plugins tab, if you just click on the Bannerify item, you can run that Figma plugin by either clicking on this Run button down here, or I’d recommend clicking on the Save icon next to that. That will let you run the Figma plugin from your saved Figma plugins list. I’ve already gone ahead and clicked on that Save icon.

I’m just going to go to my Figma canvas, right click anywhere, go down to Plugins, and then go down to Saved Plugins, and click on the Bannerify item. That’s going to run the Figma plugin that we just saved a second ago. If you’re new to the Figma plugin, the way that it works is it basically takes any frames that are on your Figma page and it treats those as potential banners, and then it takes each of the content layers from those banners and loads them into the Figma plugin, which we can then animate.

I’ve just got these two frames for today just to keep things really simple. I’m just going to go ahead and click on Load All Banners, and that’s going to load in the content layers from those two Figma frames. You can see it’s loaded up all of the layers into this animation timeline here.

You can see I’ve already applied a few different animations onto these layers. You can basically do that just by going through the animation settings down here and picking one of those. That will automatically apply the animation, and then you can adjust things like timings and things like that.

But for today, we might not want to use one of these preset animations. The Figma plugin does come with a ton of popular preset animations that you can just add with one click, but you might want to create something a little bit more custom, and I’m going to show you how to do that really easily by just prompting one of your favorite AI tools with the type of animation you want. Then we’re going to automatically import that into the Figma plugin, and we can use those animations for our layers.

To get started, all we need to do is click on the Custom Animations button in the Figma plugin here, and it’s going to open up this key frame generator here. You can actually go ahead and manually create key frame animations. You can go through and add key frames, select what kind of animations you want to apply to each of the key frames, and that will automatically create those there.

To save some time, and if you don’t want to go through those manually, we’ve got this new tool here where you can just click on this Ask AI link here, and that’s going to open up this page in your web browser. It’s just https://bannerify.hypermatic.com, and this is a totally free tool that you can use to help you create custom HTML or CSS animations that can be compatible with the Bannerify Figma plugin.

To give you an example, there are a couple of different ways we can get started. The first one we can do is take one of these existing animation presets and use that as a base for one of the prompts. For example, we could click on this one here. If we like this drop-in animation, we can click on this button that says Use as AI Prompt, and that’s going to prepopulate the animation description, which we can then take and generate into a custom animation.

If you want, you can use this as a preset and then customize this text to change it to be whatever you want. For today, I’m just going to leave this prompt as is. Then what you want to do is click on either the Open Prompt in ChatGPT button or the Open Prompt in Claude button, depending on which AI LLM service you prefer. Or you can just copy the entire prompt to the clipboard and paste it into your own LLM if you prefer.

Today I’m just going to go with ChatGPT. I’m going to click on the Open Prompt in ChatGPT button, and that’s going to prepopulate the prompt in GPT and automatically execute that.

You can see here it’s basically giving a predetermined prompt, which is giving some examples to ChatGPT for the kinds of output that we want to have, and that’s going to make sure it’s compatible with the Bannerify Figma plugin. You can see at the end here it’s added our prompt that we just added to this text area here. Again, you can describe that from scratch to whatever you want.

You can see here it’s given us this JSON response back, along with some instructions on how to add that in. I’m going to go through those right now. The first thing you want to do is copy the JSON code above. You can do that just by clicking on the Copy Code button here in ChatGPT. It’s just copied it to our clipboard.

What we want to do now, that we’re already in Figma and we’ve opened up Bannerify as it said, we’ve opened up the Custom Animations panel, which we’ve already done. Now all we need to do is paste in the JSON that we just copied into the field that says Paste generated JSON code here.

If we look in the Figma plugin, we can see that input here underneath the Ask AI link, and it says Paste generated JSON code here. I’m just going to go ahead and do that. I’m going to paste that in. You can see that it’s instantly just dropped in the heavy drop-in animation, and it’s automatically gone through and populated all of the key frames for that animation. We can see a preview of the animation down here.

Because it’s loaded it in for us, we can actually tweak that now if we wanted to. We can adjust some of these properties. If we wanted to make it a less crazy 300 pixel drop-in, we could tweak that to be something more like 200 and just make it a little bit less intense. You can see here it’s a little bit less intense. Or we can make it more intense and have it really come in from really high.

In this case, I’m just going to leave it as the 300-ish kind of level. Once you’re happy with that, you can click on Update Saved Animation. I’ve just updated that animation.

Now that we’ve got that animation saved, I can go to one of my layers. In this case, maybe I want to do it for this image here. I could go ahead and click on the Entry Animation, and you can see now we’ve got a section called Custom Animations. If I click on heavy drop-in, you can see a preview of that here when we hover over it.

I like that animation, so I’m going to click on the heavy drop-in animation. Now if we play that back in our timeline, you’ll see that we’ve got this heavy drop-in animation being included. Of course, you can adjust the timings of that. If you want it to be shorter, you can just decrease the speed. We can drop that in much quicker, or we can drag it out a little bit more and have that a little bit more eased in.

That’s basically how we can do it. You’ve got unlimited options here. You can really go nuts and just describe whatever kind of animation you’re thinking about. We could do something like rotate in 360 degrees and scale up and fade in and make it pop, and we can just have that as the prompt. Then we can click on Open Prompt in ChatGPT. Again, that’s going to open up a new prompt.

I’m just going to stay logged out in this case. You can see it’s again pre-populated the prompt and it’s added our prompt at the bottom here to make sure that it’s going to give the right output. You can see it’s pretty quick. It’s gone ahead and generated that for us.

Once again, we’re just going to take that output. This one’s called spin pop-in. It’s given it its own name. We’re going to go ahead and click on the Copy Code button in ChatGPT. We’re going to go back to Bannerify. We’re going to go to the Custom Animations panel again. Once again, we’re going to go to the Paste generated JSON code here and paste that straight in.

You can see we’ve now got a new animation called spin pop-in imported, and it’s gone ahead and animated that animation for us. All of the key frames have been generated for us. We’ve got the animation basically exactly as we described.

If we review what we actually prompted, we asked for an animation that rotates in 360 degrees, scaling up and fading in, and we wanted to make it pop. It’s kind of vague at the end there, but I think it’s gone ahead and basically done that effect. It’s done a little pop at the end. It’s scaling it in 360 degrees with a fade, and you’ve got that little pop at the end. I think that’s a pretty accurate representation of what we asked it to generate.

You can see again it’s gone ahead and generated all of the key frames here. We’re starting at negative 360 degrees rotation, and we end up with 0 degrees rotation. That’s exactly what we asked for. You can see it’s fading in from zero to 100 percent. In the middle here, we’ve just got a little bit of a bump where it’s scaling the scale property to get that little pop at the end. It’s looking really good. I’m not even going to update this one. I’m just going to close out of that and not even click on Update Saved Animation because we didn’t change anything. Of course, you can go through and change anything you want.

I’m just going to go back to my timeline, and in this case I’m going to apply it to the CTA. Maybe I want the CTA to be a little bit more eye-catching instead of just fading in. I’m going to click on the CTA button here, and this time I’m going to use the spin pop-in option. If we play that one, you can see here it’s now applying that to the button as well. You can see that applying, and again we can adjust that. If we wanted it to come in a bit later, we can easily do that, and that’s going to give us the animation that we’ve got there. We can apply these to all of the layers.

If we wanted to apply it to all of the CTA layers, we can just go ahead and click on Similar Layers. This will select any layers with the same name. In this case, we’ve got two different banner layers with CTA. I’m going to click on CTA there, and I’m going to choose that option. We’ve got the custom spin pop-in animation, and I’m going to set that to just start at half a second into the timeline and set it to a speed of one second. Then click on Apply Animations to Selected Layers.

You can see that’s gone ahead and applied that to both of our CTA layers. Now we’ve got it in this one as well. You can see that’s popping in as we’d expect. Same thing for the character. If we want to apply that other custom animation, we can just go ahead and do the heavy drop-in that we added. We can start that at the very beginning, bump that speed down a little bit, and apply the animation. Again, you can see here it’s just applied that to both layers. Now if we go ahead and play the animation again, you can see we’ve got the drop-in and the pop-in. Those are the two custom animations there.

Once you’re happy with your animation, if you want to export that out, you can do that by either clicking on the Export to GIF or Video button here. You can go ahead and select the format you want. If you need it in an MP4, you can click on the Export MP4 button. That’s going to automatically export your animations out to an MP4 video file for both banners, or as many banners as you’ve got loaded up in your timeline.

Once that finishes rendering, you’ll be able to click on this Download your zip file button here. If you go ahead and save that to your desktop or your computer, you can open that up and that’s going to automatically include a preview page. If we open up that preview page in the browser here, we’ll be able to see both of those videos at once. You can obviously go into the source material as well. We’ve got the raw MP4 files as well. That will give you the video files that you can upload or do anything you like with.

Alternatively, if you need HTML banners, you can click on the Export to HTML button in the Figma plugin. Again, you can select what kind of format or platform you need. If you’re using something like Google Ads, you can select that as the option. Then you just want to go ahead and click on the Export Banners button down here.

Once again, that’s going to generate all of the code, all of the images, and animations. Then we just go ahead and click the Download your zip file button and save that. If we unzip that file, we’ll get this folder here. You can see we’ve got another preview file here. I’m just going to drag that into my browser.

You can see both of those HTML banners are loading up nicely as well. As with the other ones, you can also go into the individual banners if you need the code and the image files, which are all located in here. Those are all included. All the code is ready to go. If you open that up and check that out, you’ll see all the source code in there.

You’ve also got the zips folder here, which you can upload to your platform like Google Ads or any other platform that you’ve exported it for, along with the backup images as well. You can upload those as backups too for the platforms that require those JPEG backups if the animation doesn’t load for whatever reason. That’s basically it. I’m just going to close these off now and go back to the Figma file.

That’s basically it. I just wanted to run through how you can use this new option or new feature to import custom animation key frames that you don’t have to manually tweak. You can just open up this link in your browser, go here and describe your animation, click on the Open Prompt in ChatGPT or Open Prompt in Claude, or copy the prompt to your clipboard and use it with your own AI model of choice. That’s going to give you the JSON that you can just instantly paste into this text field here and load up one of those custom animations, which you can then tweak a bit further if you want to.

I hope that’s helpful. If you’ve been wondering how to create longer or more complex animations without having to manually tweak each key frame, this is a really easy way to get started, and I think it’s going to be really helpful for people who want to take their animations to the next level. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.