How to add custom HTML, CSS and Javascript to Figma banner exports using Bannerify

Video Transcript

Today I'm going to be showing you how to add custom HTML CSS and Javascript to your HTML banner exports from Figma using the Bannerify Figma plugin.

To get started, all we need to do is go to the "Resources" icon at the top of your Figma file, and if you click on that and search for the word "Bannerify", then under the "Plugins" tab you'll see Bannerify pop-up. If you just go ahead and click on that result, you'll be able to run the Figma plugin by either clicking on this "Run" button here, or I would suggest clicking on this little "More options" icon and clicking "Save Figma plugin", and that's going to save it to your Figma plugins list for easy access later.

I've already gone ahead and done that, so I'm going to go back to my canvas, I'm just going to right-click anywhere, I'm going to go down to "Plugins" then I'm going to go down to "Saved Plugins" and then click on the "Bannerify" item, and that's just going to run the Figma plugin we just saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically looks at your Figma page and it treats any Figma frame as a banner. If you've got a bunch of frames added, you can use those as your banners to load up. I'm just going to load up a few now, and it will automatically take the contents of each of those frames and load them up into a timeline in the Figma plugin that you can then animate and create banners with. For today, I'm just going to be assuming that you've already got that sorted; if you want a Figma tutorial about that, you can get more detail from our YouTube channel, there's a Figma tutorial video for designing the banners and animating them, so I'll leave that out of this Figma tutorial for today and just assume that you've already got your banners ready to export.

Today, we're just going to be focusing on exporting HTML banners, we're not going to be looking at the GIF or video option, we're just going to be exporting to HTML. For example, if we click on this "Export to HTML" button, you can see here that we've got our standard export settings; this is basically a bunch of export settings that you can use to customize how you want the banners to be exported to HTML. There's a bunch of different platforms you can export it to; Google Ads and different platforms like that, or just plain HTML and CSS. You can also add a bunch of other toggles and configurations up here as well, and also customizing the preview page, but for today we're going to be looking at a new feature which is this toggle down here.

If you click on the "Inject Custom Code" toggle and turn that on; I've just turned on that option down here, and what this does is it basically gives you a whole new panel that you can use to add custom content or custom code into the banners that you're going to be exporting from the Figma plugin. For example, if we go through the list of options here, we can add custom HTML to the body tag; we'd use that if we want to add custom content inside of each banner. We can also add custom HTML to the head tag; if you need to inject some special meta tags or some special script tags into the head tag of your HTML, you can add that into here. If you need to add any custom CSS styles to style the elements that you've added in your HTML content, you can add them in here. Finally, if you want to add some functionality some interactivity using Javascript, you can write Javascript in here and that will also automatically get added in.

I'm going to go through an example of how this can be useful for you; of course, this is infinitely applicable to anything you really want to do, but for today I'm just going to be using a few of these different options to create something that looks like this. I've got another HTML file that I've already created, and it's just got this little toggle button at the bottom which basically shows and hides some text. It's a really simple little toggle, I've got the code for it over here which we'll go through in a second; this was actually mostly written by ChatGPT, so if you want to use something like ChatGTP to create some of this functionality it can be very helpful for helping with that, and then you can kind of just tweak it to what you need, or if you have a developer, or if you're a developer, you would obviously be okay with writing this on your own as well.

To get started, what we're going to do is start porting some of this functionality over. The first thing we'll do is we'll add the custom HTML to the body tag, which is going to be our content that's going to get added to all of our banners. For example, we can see in the file that we've got here, the HTML file, if we go to our body tag, we can see that the content we're going to need is this button and this div. We're going to grab both of those elements and we're just going to copy those to the clipboard, jump back into the Figma plugin, and just paste those in. We can see here that we've just pasted in the button and we've pasted in the div; you can format those whoever you want, I'm just going to leave them pretty simple in this case, and of course you can customize this text as well; you can edit that directly in this little editor here.

We've copied our HTML in, and the next thing we're going to do is copy in some CSS styles. I'm going to go to my CSS styles option and just change that, and if we jump back to our HTML file, what we're going to do is we're going to pull out these CSS styles that we've got added to the style tag in our page here, and we're going to bring those over to the Figma plugin and paste those in the same way. We've just pasted in that CSS, and finally we need some Javascript; we're going to go to the Javascript code option and we're going to grab any Javascript that we need. In this case, I've just got a function that we're going to copy; we're going to get the "toggle diff" function, copy that out of the file, paste that into this Javascript code box, and there we go you can see that we've got our Javascript in there as well. It's got some indentation; you can obviously customize that if you wanted to, but I'm just going to leave that for now, as I'm not going to be too worried about how it's formatted, I'm just going to render that out however it comes out.

That's it; we've got our Javascript, we've got our CSS, and we've got our HTML content that's now going to be included into our banner exports. To show you what that looks like if we now click on the "Export Banners" button down here. I'm going to click on "Export Banners", and that's going to generate all of the HTML CSS and Javascript, along with any images for our banners, as it normally does. If we now download the zip file, I'm just going to save that to my desktop I'm just going to unzip that and open up the folder. We can see here that we've got a little preview page; we can open up that preview page in the browser, if we just drop that into here, we can see here that we've now got some custom HTML. We've got our little arrow button, obviously it's not 100 styled as well as it could be, but if we click on that now we can see that the little text field that we included is popping up; if we expand that out, it shows, and if we collapse it, it goes away. This is selectable text you can highlight, and these are all toggleable per banner. As I said, the design is obviously not great, this is just a very simple example of one thing you could do; you would obviously customize the button to look much better and position the elements to obviously not be overlapping with the toggle, but of course this is just one example of what you could do.

You could also just add static text; you wouldn't have to make it toggleable if you didn't want to, this is just an example to show you how the Javascript could work, but if you needed to add some legal disclaimer text as rich text, for example, you could design these banners in a way where there's some space down the bottom or it has like a nice background fade off at the bottom, and then you could add this custom HTML and CSS for all of the rich text directly into the custom HTML field in the Figma plugin, as we just saw.

That can be really handy, and as I mentioned this is basically as customizable as you want it to be. You could pretty much do anything you want; it's a free form HTML, CSS and Javascript field, so you could load in different file types, you could load in videos, you could load in anything really, and position it and style it however you want based on the functionality that you need. That's just a really basic example of one thing you could do using this new feature, but as I mentioned the possibilities are fairly endless; you can work with a developer, or as I said, potentially work with ChatGTP to create some functionality that you're looking for and then add it into your Bannerify custom code injection setting that's just been added.

Of course, if you did not want to have this code included, you can simply just toggle that off again, and if we re-explored those banners as we'll do now, just to show you what this looks like. If we now re-save that zip file and open that up; I'm just going to go back to my desktop unzip this new file, and if we load up this HTML file, you can see that the custom code's been totally removed, so there's no custom code in that one because we went in here and we turned off the "Inject Custom Code" option. If you turn that back on, all of your code that was included in the last export, whatever that was, will automatically be saved and you can just retrieve that here and use it again; you can just turn that on and off, basically to use it when you need it, and turn it off if you don't need it, but always come back to edit it if you did need to make any changes and reuse it later.

The only one I didn't go into is the custom HTML to head tag; as I mentioned, this is a fairly generic option. All this does is it basically adds custom HTML before the closing head tag; to give you an example of that, if we were to go into one of these banners and load that up in our editor, basically the head tag ends here. We can see down here we've got the closing head tag, so we'll just add that to a new line to see what that looks like, and basically anything inside of this head tag here is usually related to stuff like title tags, we've got meta tags that are automatically adding the viewport, automatically adding the ad size meta property which is required for various bannerad platforms, and we've got our CSS style tag in there as well.

What that setting does is it basically injects, just as we saw with the other options, this HTML head tag setting will basically take whatever you put into this box here; for example, if we were to add, we wouldn't do another title tag, but you could addsomething like a title tag or a custom meta tag. For example, you can add that in there, script tags, sometimes different banner platforms will want you to add different script tags; you can add script tags in there. Anything like that; whatever you put in here will essentially just be rendered just before this closing head tag here, and that's where that's going to go. It's not going to appear as content, it's purely just for linking assets or adding meta tags and things like that, anything that normally goes into the head tag of an HTML document, you can add in there.

Okay, I hope that's been a helpful starter of how you can potentially use this new custom code injection feature; this is going to make it really easy to add extra functionality, and add extra totally custom HTML, CSS and Javascript content into every banner that you export from the Figma plugin, if you require it. As I said, it's a optional feature, it's off by default; but if you're more of a power user or advanced user and you want to play around with adding custom code into your banner exports from Bannerify, this is going to be a really nice way of going about it. We'll leave it there for today; thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.