How to export Figma to HTML Canvas using Bannerify

Video Transcript

Today, I’m going be showing you how to export banners that you’ve animated in Figma to the HTML Canvas format.

To do that, we need to install a Figma plugin called Bannerify. If you haven’t already done so; you can go to the top left corner of the Figma toolbar and click on the Figma icon, and then if you go to “Search” or “Community”, whichever one you prefer and go to the search bar and type in the word “Bannerify”; if you go to the “plugins” tab you’ll see a Figma plugin called “Bannerify HTML Exporter”. If you haven’t installed it, you want to go over to the right and click on the “install” button; I’ve already got it installed, that’s why mine has the little check, but if your says “install”, you can click on that and that’ll change it to say “installed”.

Once you’ve done that, you can jump back over to your Figma file. I’m currently using the example that is available through the Bannerify description; if you go to the Bannerify plugin and click on it to see the descriptionm there is a link in the description under “additional notes” which will give you access to the file that we’re going to be using in this Figma tutorial; if you do need to use that just jump into the description and and paste that link into your browser and you’ll have access to to duplicate this file that we’re using in the Figma tutorial.

To start up Bannerify, just right click anywhere in the project, go down to “plugins”, and then go to “Bannerify HTML Exporter” and click on that; and this will load up the Figma plugin that we’ve just installed. Because we’re using a design that already exists, this particular design has already been configured to have some animations preset, if you’re doing this on your own banners, you’ll have to just select all these animations yourself; we’ve got another Figma tutorial, a very in-depth tutorial about how to actually configure animations and all the neat things you can do to make it really easy; you can check out our YouTube channel that you’re looking at this video on for that extended Figma tutorial; but in this case I’m going to assume that you’ve already setup your animations or you’re using this example file.

You can see here we’ve already got some animations set, you can you can change those of course to be whatever you want. We’ve got a bunch of banners in here they’ve all got the same animation settings and what we want to do is export this to HTML Canvas. Where we can do that is by clicking on the “Export Banners to HTML” button up in the top right, and this reveals the export settings panel; there’s a number of options that we can configure in here, we won’t go through all of them today because they’re not all relevant to what we’re trying to do, but the one that we do want to have a look at is down here underneath “Code output settings”, and then under “Export format/platform”, it’s currently set to “Vanilla HTML/CSS”; that will export HTML from Figma with CSS animations, that’s typically the the most common format that you’ll export, but there are going to be some circumstances where you need to export to HTML Canvas.

I’ve just clicked on the drop-down and instead of selecting “Vanilla HTML/CSS”, which is the default, we’re just going to go down to “Vanilla HTML/JS”, “JS” which is “JavaScript”, and then in brackets it says “HTML Canvas”, and then canvas has got the little HTML tag around it. If we click that, what this is going to do is instead of generating HTML and CSS, it’s going to convert or export all of your banners to HTML and JavaScript, and instead of using image tags, it’s just going to use a single canvas tag.

Let’s just have a look at what that looks like by exporting it; if we click on “Export Banners” at the bottom, this little button; I’m clicking on that, this is generating HTML for me and then it will start going through all the images and and saving those; and we’re done; it’s extremely quick. You’ll get a little save dialog prompt up here; by default, the file name will just be matching with your document title; in this case it’s “Bannerify Sado Banners Demo”, and then use get a little suffix with the date and the platform that we’re exporting to (HTML Canvas) up here. Of course, you can change that, but for now I’m just going to click “Save”.

That’s saved to our desktop, so all you have to do is double click on the zip file, and that will give us a look at all of the code and images is just exported for us. You can see here it’s a “one for one” with all the banners in our project. It’s just got all the dimensions as the prefix and then the name of the frames that comes after that, and what we can do to have a look at them all at the same time is just double click on this “index.html” file and open that up in Chrome. That’s opened it up in Chrome for us, and if I just click on the play button again in the top right, you can see that they’re all basically in sync and and all animating in.

To get an idea of what code that’s generating, I’m just going to open up my code editor and I’ll just drag in the medium rectangle and open that up. This is the code that Bannerify has generated for us, this is the banner that I’m looking at here in the in the left hand side and then I’ve got my code on the right. You can see that we’ve got an HTML Canvas tag; it’s just a single “canvas” tag with the dimensions that you’d expect from our banner; it’s got a JavaScript file that’s being included; a CSS file is being included; a couple of bits of metadata up here; the GSAP animation library; and then we’ve got our images folder; this is all of the images that our banner is comprised of, and the SVG’s for the text layers.

Then in the JavaScript file this, is basically our timeline; we’ve got our timeline for all of the animations that are happening here, and and instead of using CSS it’s using JavaScript to dictate those timelines. This is all being generated automatically, you don’t have to know code or write any code, Bannerify will generate all of this for you, and you get that animation that you can see here on the left hand side.

That’s essentially how you go about exporting banners from Figma to HTML Canvas and JavaScript based animations. It really is just just a one-click process of selecting the format in the in the export settings and clicking “export”, and you’ll basically be able to go straight from Figma to HTML without having t to worry about coding up anything, the Bannerify Figma plugin will just handle it all for you.

That’s basically it; if you need anything else, you can check out one of our other Figma tutorials that cover other formats that can be exported, but if you’re looking for a way to convert your Figma designs into HTML, or “HTML Canvas” specifically, then this is the best way to go about it. We’re always trying to improve this Figma plugin; if you have any questions or suggestions, we always love to hear anything that you might want or find valuable in Bannerify, so please let me know. Until next time, thank you as always for watching.