Video Tutorial: Add scrollable text disclaimers to HTML Figma banners

This video tutorial is a complete step-by-step guide showing you how to add scrollable text disclaimers (with auto-scroll) to HTML Figma banners using the Bannerify plugin.

If you need long legal text, safety copy, or PI content to stay readable in a compact area, Bannerify can export a truncated text layer as native scrollable HTML text.

If you want a dismissible overlay instead of inline scrolling text, see Add Popup Overlay.

Step 1. Create a truncated text layer in Figma

Create a text layer with a fixed text box size, and make sure it is set to Truncate (instead of auto-growing).

The visible text box size becomes the scroll container in HTML exports, while the full text content is preserved inside it.

Step 2. Enable scrollable HTML text in Bannerify

Open the layer settings for that text layer, then enable:

• Enable scrollable HTML text

This feature is only available for truncated text layers.

Step 3. Choose scroll behavior

When enabled, choose one of these modes:

• Manual User Scrollable: user scrolls manually for the full timeline.
• Auto Scroll on Layer Enter: starts auto-scrolling when the layer enters.
• Auto Scroll on Banner End: starts auto-scrolling when the banner timeline finishes.

Banner loop behavior

• If playback count is finite, Auto Scroll on Banner End triggers only on the final playthrough.
• If the banner is set to infinite looping, Auto Scroll on Banner End is skipped.

Step 4. Review export notes

• Scrollable truncated text is exported in HTML outputs.
• Native browser/device scrollbar styling is used.
• If that layer has an image format override applied, scrollable HTML text is disabled for that layer.

Customizing scrollbar styles

If you want to customize the scrollbar styling for scrollable truncated text layers or popup overlay text, enable Inject Custom Code in your HTML export settings, then paste this into the Custom CSS field.

:root {
  --bannerify-scrollbar-color: #ff6600;
  --bannerify-scrollbar-track-color: rgba(0, 0, 0, 0.12);
  --bannerify-scrollbar-width: 8px;
  --bannerify-scrollbar-height: 8px;
  --bannerify-scrollbar-radius: 8px;
}

/* Scrollable truncated text + popup overlay text */
[data-bnfy-scroll="1"],
dialog[id^="o_"] [class$="_text"] {
  scrollbar-color: var(--bannerify-scrollbar-color)
    var(--bannerify-scrollbar-track-color);
  scrollbar-width: thin;
}

/* Chrome, Edge, Safari */
[data-bnfy-scroll="1"]::-webkit-scrollbar,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar {
  width: var(--bannerify-scrollbar-width);
  height: var(--bannerify-scrollbar-height);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-thumb,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-thumb {
  background-color: var(--bannerify-scrollbar-color);
  border-radius: var(--bannerify-scrollbar-radius);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-track,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-track {
  background-color: var(--bannerify-scrollbar-track-color);
}

You can change the values at the top to update the scrollbar color, track color, width, height, and corner radius. Some browsers and mobile devices may still render scrollbars using their native system style, but the CSS will be applied wherever the client allows custom scrollbar styling.

Scrollable HTML text is designed for truncated text layers only. If your layer is not truncated, it should be exported using normal text/image behavior.