Preserve Scroll Position: Seamless Figma Prototypes

WHY IT EXISTS Prototypes feel unrealistic when content snaps back to the top every time you navigate. Preserve scroll position was created to simulate statefulness, making user flows that involve scrolling feel continuous and natural, just like in a real application.

THE MENTAL MODEL Think of it as state management for your scroll containers. Figma remembers the scroll position of a layer when you navigate away. When you navigate to a new frame that contains a matching scrollable layer, Figma applies the saved position to that new layer, creating a seamless experience.

HOW IT WORKS This behavior is on by default and combines two concepts. First, state memorization preserves the scroll position of a layer within a single frame. If you navigate away and come back, you'll be in the same spot. Second, state sharing lets this scroll position be shared by different layers across different frames, as long as they match. For layers to match, they must have identical names and structure. For top-level frames, identical names or prefixes are sufficient.

WHEN TO USE IT This is the default for all prototypes. It's most noticeable and critical when prototyping flows with long lists (like an email inbox), horizontally scrollable maps, or product carousels. Any time a user navigates away from and back to a scrollable view, this feature ensures continuity.

WHEN NOT TO USE IT Use the "Reset scroll position" option on a prototype interaction when you explicitly want the content to snap back to the top. This is useful for actions that should logically reset the view, like applying a new filter that re-sorts a list or navigating to a completely new section of an app where the old scroll position is irrelevant.

ONE CANONICAL EXAMPLE A user scrolls halfway down a long product feed in an e-commerce app prototype. They click a product to view its detail page. After viewing the details, they click the "Back" button. With preserve scroll position, they land back on the product feed exactly where they left off, not at the top of the list, making the prototype feel much more polished and realistic.