Video Tutorial: Add rich text popup overlays to HTML Figma banners

This video tutorial is a complete step-by-step guide showing you how to add rich text popup overlays to HTML Figma banners using the Bannerify plugin.

If you need to have a popup overlay with scrollable (and dismissible) rich text included in your banner, which can be opened by clicking on a certain layer in your banner timeline, you can do this by selecting those desired trigger layers in each of your banners, then choosing any animation options under the Generate Popup Overlay Disclaimers section in the bulk actions window at the bottom of the plugin (which appears when multiple layers are checked in your timeline).

Once your happy with the popup animation settings, clicking the Create Popup Links button will automatically create a "Popup" component (containing a text layer and a close button) on your Figma page and automatically linking each of your selected layers as a trigger to point to that new Popup component via the native Figma Prototype link feature.

You're welcome to modify the content of the text layer, adjust the font size and change the solid color fills of the popup background, close icon and the text layer.

When you export your HTML banners, the plugin will automatically look for those Figma Prototype links and the Popup component that they're pointing to, and generate the clickable triggers and popup overlay code in your final exported banner set.

Please note, this component is designed to be extremely simple, with just the single text layer (for disclaimer text) and the close button. Feel free to customize the text content, font styles and colors, but any other customizations or additional layers added may break the exported HTML as a result.