How to export Figma to HTML Canvas 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
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 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 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 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 the Figmatic YouTube channel that you're looking at this video on for that extended 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.
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.
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.
Founder of Figmatic