← Back to Bannerify Video Tutorials

What this video covers

This video shows how to use the Bannerify Figma plugin to add interactive popup overlay disclaimers to HTML banner exports. It covers selecting CTA trigger layers, generating and customizing the overlay component, exporting to HTML, and testing the result in the browser.

Things you'll need

• A Figma file with banner frames already created
• The Bannerify Figma plugin

Steps

1. Open the Figma file, find Bannerify from Resources or Saved Plugins, and run the plugin.
2. Load the checked banner frames into Bannerify so their layers are imported into the plugin timeline.
3. Use Quick Select Layers to select the trigger layers, such as all layers named "CTA Button."
4. In Generate Popup Overlay Disclaimers, choose the transition, speed, easing, and direction, then click "Create Popup Links."
5. Edit the generated popup overlay component in Figma by changing the content, colors, and padding as needed.
6. Export the banners to HTML, download the zip file, unzip it, and open the index.html preview page in a browser.
7. Click the CTA buttons in the exported banners to verify the rich text overlay opens and closes as expected.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Adding clickable rich text popup overlay links to your banners
• Next: Add scrollable text disclaimers to HTML Figma banners
• Open Bannerify in the Figma Community