How to add rich text popup overlays to HTML Figma banners using Bannerify

Video Transcript

Today I'm going to be showing you a quick tutorial on how to add interactive popup overlays to your HTML banner exports from Figma using the Bannerify Figma plugin.

To get started, we need to go to our Figma file. Go up to the "Resources" icon here and click on that, then search for "Bannerify." Under the "Plugins" tab, if you click on the Bannerify result, you can run that Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking the "Save" icon to save it to your bookmark plugins for easy access later.

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

If you're new to the Figma plugin, the way that it works is it takes any Figma frames that you've got on your page and allows you to load those into the Figma plugin as banners. For example, I've got all of these predesigned Figma frames already added to my page. I'm just going to click on "Load Checked Banners," and this is going to import all of the content layers, the direct child layers of your banner, into this timeline that you can then animate using the Figma plugin animation settings.

I'm not going to be covering all of the animation features in this tutorial today. I'm just going to assume you've already checked that out and you've got your banners working the way that you want. What we're going to be focusing on today is adding a popup disclaimer to display some scrollable disclaimer text when we export the HTML.

I'm going to show you how to do that now. First of all, just have a layer in your frames that you want to assign that trigger to. For example, I'm going to use this "Book Now" button, we can use that as our trigger for these particular banners. I'm going to go to my "Quick Select Layers" option in the top left of the Figma plugin here and click on that, then find the buttons that are all named "CTA Button." If I click on that, that's going to automatically select all 11 layers across my banners that are named "CTA Button."

You can see here I've got 11 layers selected. We're not going to be applying any bulk animations or applying any other settings in bulk, we're going to go down to the bottom of the Figma plugin window here where it says "Generate Popup Overlay Disclaimers." You can see here we've got a few options. We can set the transition, by default it's just set to "Instant" but we could change that to "Dissolve" or "Fade" or "Move In," for example.

I'm going to click on "Move In," and then you can set the speed of that animation. This is in milliseconds, you can set that to whatever you like and you've got the easing, by default it's just set to "Ease In" but you can change that as well. Finally for this particular one, because we've got the "Move" animation selected, we can also choose which direction the popup overlay is going to be animated in from. For example, I can change that to "Top to Bottom" or "Bottom to Top," "Left to Right," "Right to Left," etc.

Once you've got all of those settings selected the way that you want, you can then go ahead and click on this "Create Popup Links" button. I'm going to click on that now and that's going to do a couple of things. You can see it's created popup links for 11 layers and what that looks like is you can see now we've got this new layer added to our Figma file. This is a Figma component and if I go to the "Prototype" tab in Figma on the right here, you'll notice that it's automatically linked all of the CTA layers that we just selected and it's automatically gone ahead and applied the Figma Prototype settings to those.

If you look at the interactions over here, you'll notice that it's set to "Open Overlay," it's pointing to this component that was just generated by the Figma plugin, it's setting it to "Move In" with the easing settings and timings as we specified in the Figma plugin. That's automatically all been created for us and we don't need to link up any of these manually.

The next thing we can do is customize this content. You'll notice that the content for this component is very simple, it's just one frame with some text and a "Close" button. We don't really have much flexibility to add or remove content or add or remove elements. This is a really basic component that allows you to display some text. For example, you could basically swap all of this out, add your own content. I'm just going to add some new content and then you can customize that to whatever you need to have in your disclaimers or policy or any kind of overlay content that you need to add into your banners.

Of course you can customize the color scheme. For example, if we go to the "Design" tab and click on our component, we can swap the background color. If we wanted to change this to be something else, we could match this up closer to our original banners. We could set a background color that looks more like this, more like a brown overlay, and then we can change the text and "Close" button to also be different as well. In this case, we can make those white and that's going to give us a bit more of a closer match to our banner design.

As mentioned, you can change this content, you can change the padding. If you want to adjust that padding around the edges or adjust the amount of space between the "Close" button you can do that, but everything else is pretty much as is. Once you've got that customized the way that you want, all we need to do now is click on "Export to HTML" and just select the format that you need. If you're exporting it for Google Ads or a different format you can select that option in here. Today I'm just going to leave it as a non-platform specific basic HTML CSS JavaScript export and I'm just going to leave all the other settings as default. Then what I can do is just go ahead and click on "Export 11 Banners" in this case.

That's going to automatically generate the code, export all the images and zip up all of our banners that we can download in a moment. That's just finished exporting all of our banners, you can see that our HTML Banners are ready to download. I'm just going to click on "Download Your Zip File," save that to my desktop, go to my desktop and just unzip that file. Just double click on that and unzip it, and you'll see here that we've got all of our banners exported. This is all the HTML, the image assets automatically exported as you'd expect, and we can also check all those out in one go by opening up this index.html preview page in the root of that unzip file.

I'm just going to drag and drop that into my browser and you'll notice that all of our banners are now loading up on one page. I'm just going to expand that a little bit so we can see them all a little bit easier. Now if we click on these buttons, we got those CTA links in there, you'll notice that we've now got our Rich Text overlay automatically getting included. This is getting added for all of those banners and this is scrollable, it's real text and you can close that, dismiss it as you need to, and that's automatically getting handled for you by the Figma plugin.

This can be really handy if you need to include popup overlays that include disclaimers or privacy text, things like that. There are certain industries where you need to include this stuff and it can be a bit of a pain to manually code them. This is an easy way to automatically create that in Figma, allow you to swap out your own content, customize the design and animation.

That's basically it, you can also redo the animations. If you wanted to change these prototype links to be something else, you can either do that manually by going to the "Prototype" tab in Figma and changing those on the buttons directly, or I'd recommend going back to the "Quick Select" menu as we did before, clicking on the "CTA Button" or whatever layer you've got as your trigger, and then you can basically change that again down here to whatever you like.

For example, I could change this to "Dissolve," I could change the easing to "Ease In and Out," and because the "Move In" isn't selected in this case that's going to be disabled. We can now click on "Create Prototype Links" again and that's going to relink all of the CTA layers to the same component. It's not going to wipe out the component, it's going to detect that you've still got your original popup overlay there, that's not going to get amended or changed. You can see all of our content and design is still in there, but if we now go to the "Prototype" tab and click on one of these layers and then click on the interaction, you'll notice that the effects have been updated. Instead of it being a "Move In," it's now set to "Dissolve" just as we set in the Figma plugin settings a moment ago, and the easing has been changed to "Ease In and Out" as well.

Now if we reexport that to HTML, I'm just going to go through the exact same process, click on "Export Banners," wait for that to finish exporting, and once that finishes again just download the zip file to your computer. Then you can save that anywhere you like, unzip the file again, we're just going to preview the index page again. I'm going to drag and drop that into my browser, open that up, and if I click on this now you'll see that we've got a nice fade overlay instead. Instead of the "Move In," we've now changed it to a fade and it's looking a little bit smoother for this particular design.

You can customize that in the Figma plugin, you can just change that popup overlay setting to do whatever you like, it's totally up to you. You can change it and update it if you don't like it the first time, feel free to mess around with that.

That's basically it, I just wanted to do a really quick tutorial to show you this brand new feature in the Figma plugin. This has been a really popular request, hopefully that helps alleviate some of the pressure on your design and dev team for creating these bespoke overlay components every time, and this is just a really simple automated way to add them to your exports from Figma using the Bannerify Figma plugin.

'll leave it there for today, thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.