Skip to content

Adding clickable rich text popup overlay links to your banners

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

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.