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. 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.
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. You can see here we've already got some animations set, you can you can change those of course to be whatever you want.
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 the Figmatic 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. 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. 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. Once you've done that, you can jump back over to your Figma file.
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". 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".
To do that, we need to install a Figma plugin called Bannerify.
Today, I'm going be showing you how to export banners that you've animated in Figma to the HTML Canvas format.