Figma Prototype Scrolling: Simulating Overflow

WHY IT EXISTS: Static screens don't capture the feel of a real app. Users need to scroll, pan, and interact with content that doesn't fit on one screen. Prototype scrolling lets designers simulate this dynamic behavior directly in Figma, creating more realistic and testable mockups without writing any code.

THE MENTAL MODEL: Imagine your frame is a phone screen (a viewport) and the content inside it is a long webpage. The screen can only show a portion of the page at once. Scrolling is the action of moving the webpage up and down behind the fixed screen. To make this work, the webpage (your content) must be taller than the screen (your frame).

HOW IT WORKS: Setting up scrolling involves three steps. First, ensure your content is larger than its parent frame. For a vertical scroll, make the content taller; for a horizontal scroll, make it wider. Second, select the frame and, in the Prototype panel, set the 'Overflow' behavior to vertical, horizontal, or both. It's also good practice to enable 'Clip content' in the Design panel so you only see the content that fits within the frame's bounds. Third, define the scroll position for individual objects within the frame. Objects can scroll with their parent, remain fixed in one position (like a bottom tab bar), or become 'sticky' (like a header that locks to the top as you scroll past it).

WHEN TO USE IT: Use prototype scrolling to simulate common UI patterns. This includes vertically scrolling pages, horizontal sliders or carousels, and pannable areas like interactive maps. It's also the mechanism for creating fixed headers, footers, and floating action buttons that stay in place while the rest of the content moves.

WHEN NOT TO USE IT: Don't use scrolling for simple screen-to-screen transitions that don't involve overflow content, like clicking a button to open a modal. For those, a standard 'Navigate to' prototype action is more appropriate. Scrolling is specifically for moving content within a single frame's viewport.

ONE CANONICAL EXAMPLE: To make a mobile screen design scrollable, place all your UI elements inside a parent frame sized to the device (e.g., 375x812 for an iPhone). Then, extend the content downwards so it's taller than the frame, for example, 375x2000. Select the parent frame, go to the Prototype panel, and set Overflow to 'Vertical scrolling.' Now, when you view the prototype, you can scroll through the entire length of your content.