Video transcript
8-minute video ·
Today, I’m going to be showing you how to export animated banners from Figma directly to HTML and JavaScript, specifically the GreenSock or GSAP animation timeline format.
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.
If you haven’t done this before there’s actually another Figma tutorial on this same YouTube channel which goes for about 40-45 minutes, it’s very in-depth, and it covers exactly how to go about adding animations and designing banners and really easily creating animations within Bannerify; I’d recommend that if you haven’t looked at that one already or are just just getting started with the Bannerify Figma plugin; but in this case we’re more focused on exporting some banners that we’ve already animated to the GreenSock or GSAP format; basically going outside of this file here in Figma to HTML and GreenSock (GSAP) or JavaScript.
We’re already happy with all of our animations, as I said, we’ve already designed the file, we just want to export it for production now. To do that, we just click on the “Export Banners to HTML” button in the top right of the Bannerify Figma plugin, and click on that, and this will open up the export settings from Bannerify. There’s a number of different settings in here which we won’t go through today, because all we’re really focused on is getting Figma to HTML GSAP (or GreenSock) format, the area we’re focused on is “Code output settings” down here. You’ll see we’ve got a little label that says “Export format/platform”, we’ve currently got it set to HTML Canvas, it defaults to HTML and CSS, but in our case we’re going to go ahead and click on this one. If you’ve already clicked on the drop down, this will show you all the options and then underneath the “standard” group we want to go to “Vanilla HTML/JS”, “JS” meaning “JavaScript”, and then in brackets the option we want is “GreenSock (GSAP)”; that’s the GreenSock animation library that will get exported in JavaScript; let’s click on that option.
Now we’ve got “Vanilla HTML/JavaScript GreenSock (GSAP)” selected, all we have to do is click on the “Export banners” button in the bottom right. I’m just going to click on that, and this will this will generate all the HTML and JavaScript for us, export all of the images; it’s already done, it only takes a few seconds, and then we’ll get the file save dialog up here. By default that file name will match whatever your Figma project name is, but you can change that if you’d like, I’m just going to leave it like that for now and click on “Save” and then I’m going to go to my desktop. If you double click on the zip file that it generated, that will unzip the folder and we’ll be able to get a list of all the different banners that we’ve just exported, all of the code, all of the files are there.
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 we want to have a look at the code, we can do that by opening up a code editor; in this case I’ll just use Visual Studio. Let’s just use the medium rectangle example; I’ll drag that in we can see we’ve got our HTML, and the HTML is generating all of the images; we’ve got all the image tags that we’d expect, and they’re pointing to the images inside of our “images” folder, which are getting automatically exported from Figma, including all the SVGs for text layers, just to keep them really crisp. In our index file, we’ve also got the GSAP animation library included automatically, and then we’ve got the JavaScript file down here; if we open up the JavaScript file you can see in here that it’s has automatically generated the entire GSAP or GreenSock timeline in JavaScript. This will get kicked off when all of the images have loaded; it will automatically detect that, and then play through all the the GSAP timelines automatically, and that’s how we get our animation over here in the in the browser.
You don’t need to know any code to be able to do this, Bannerify will automatically export all of your animations and all of your images into HTML and JavaScript; it’s currently GreenSock (GSAP) format, but as you saw before there’s a number of other formats that are available, but in this case we just wanted to have a look at the the GreenSock or GSAP format.
That’s essentially it; that’s all you need to know to be able to export banners from Figma to HTML and JavaScript/GreenSock (GSAP). If you need to, have a look at other formats, you can either play around with them yourself or you can find more Figma tutorials on this YouTube channel and and get stuck into those.
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.
Pro Bundle