How to export Figma to HTML/GreenSock (GSAP) using Bannerify
Follow along with this step by step Figma tutorial video
Figma plugin used in this video
Animate and export production ready banners from Figma to HTML for different platforms in seconds.Try Bannerify
See all features and licenses
To do this, we need to install a Figma plugin called "Bannerify". If you haven't done; already, you can do that by clicking on the top left icon in the header with the little Figma symbol, and going to either search or community and go into the search box there and typing in the keyword Bannerify and then clicking on the plugins tab and you'll see this little bear icon with the plugin title "Bannerify HTML Exporter"; if you've not installed it yet, you'll see a little install button on the right hand side over here. I've already got it installed and that's why I've got that little checkbox; if you haven't got that and it just says install you can just click on install and it'll instantly change it to say installed and then you're ready to go; once you've done that, we can click back into our project which I just had open.
If you don't have a set of banners yet and just want to follow along; if you go into the the plugin description by clicking on the plugin; underneath the "additional notes" section, under the first point, there is a link here which will take you to the file that we're actually working with at the moment. You'll be able to open that up in Figmam, duplicate it to your own Figma account, and you'll be able to follow along with the exact same example that I'm showing you in this video.
I'll switch into that now, and it'll look something like this. To run the Figma plugin, we just right click anywhere on the page go to "Plugins", then click on "Bannerify HTML Exporter" and that's just going to fire up the Figma plugin that we just installed. This is going to give us a representation of all the banners that we have in our Figma file; because we're using a pre-designed file you'll see a list of all of them in here, and they've already got preset animations on them.
The easiest way to preview them all is just by clicking on this "index.HTML" file; that will open up the browser and let you view all of the banners at once. You can make that a bit wider if you need to, and we can we can replay that just by clicking on the button in the top right. You can see here that all of our animations have been perfectly replicated from what we expected from the Bannerify Figma plugin; they're they're super smooth, super seamless and we don't have it set to loop, that's why it's going back to the start.
If you need any other formats that aren't currently supported please just let us know and we can add them in to Bannerify,; you don't have to worry about hacking them together yourself; we can we can easily just add them in for you. We always love to hear feedback and feature requests for Bannerify,; if you do have any please let us know and we'd be happy to to add them in. I hope you've learned something here, and we will be back with more Figma tutorials very soon. Until then, thank you for watching as always.
Founder of Figmatic