You can see here that it's loaded up some banners that we've already got in our project here, and because we're using the project that's already been set up, we've already got some animations attributed to each of the layers on each frame.

Once you've installed it, you can jump back into your project in my case I'm using the sample file that can be found in the additional notes section down here if you go to the Bannerify plugin details area, and go to 'additional notes', there's a link here that you can use if you put this into your web browser it will open up the Figma file that I'm going to be using in the Figma tutorial and you can duplicate that file to your own Figma account, and you can use that to follow along.īack in our project, what we want to do is right click anywhere on the page go down to 'plugins' and then click on 'Bannerify HTML Exporter', and that's going to fire up the Figma plugin that we just installed. If you haven't already installed it, you can click on the 'install' button mine is already installed and that's why it's got this little checkmark, but if yours just says 'install', you'll be able to click on 'install' and that will change it to look like mine. If you haven't already got it installed, we can go to the top toolbar and click on the Figma icon, and if you go to the 'community' area and use the search bar to type in 'bannerify', and then click on the 'plugins' tab, you'll see this result an 'Bannerify HTML Exporter' pop right up. The way we're going to do this is by installing a Figma plugin called Bannerify.

Today, I'm going to be showing you how to export animated HTML banners from Figma to Google Ads.

Google web designer insert link