Video Tutorial: Add scrollable text disclaimers to Figma banner exports

This video tutorial is a complete step-by-step guide showing you how to add scrollable text disclaimers (with auto-scroll) to Figma banner exports 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, and render auto-scrolling text into GIF/video outputs.

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).

In HTML exports, the visible text box size becomes the scroll container while the full text content is preserved inside it. In GIF/video exports, the same text box clips the rendered auto-scroll motion.

Step 2. Enable scrollable text in Bannerify

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

• Enable scrollable 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.

In GIF/video exports, both auto-scroll modes use the same scroll speed as HTML exports. If the scroll needs more time than the original banner timeline, the exported file is extended so the text can finish scrolling at that speed.

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

• In HTML outputs, manual mode remains user-scrollable and auto modes use native scrolling.
• In GIF/video outputs, auto-scroll modes are rendered into the exported frames; manual mode remains static because exported files are not interactive.
• Native browser/device scrollbar styling is used.
• If that layer has an image format override applied, scrollable 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 text is designed for truncated text layers only. If your layer is not truncated, it should be exported using normal text/image behavior.