Preserve scroll position in prototypes
Before you start
Who can use this feature
Available on any team or plan.
Anyone with can edit access to a file can create prototypes.
In prototypes, you can navigate through frames to demonstrate a user journey across multiple pages or screens.
Preserving scroll position lets you maintain the same scroll position when you transition between frames. This applies to both vertical and horizontal scroll locations.
Note: Preserving scroll position is a type of prototype state management. State management allows us to maintain object properties and states when navigating in and across frames when playing prototypes—and can apply to scroll position, interactive components, and videos.
Learn more about prototype state management →
Changes to preserve scroll position
On May 24, 2023, Figma updated its prototype state management controls. This update changed how preserve scroll position is applied on interactions.
To preserve scrolling between top-level frames, the top-level frame names have to be identical or have a matching prefix.
| Turn off preserve scroll position | Turn on preserve scroll position | |
| New state management | Use non-matching layer names or check reset scroll position |
Use matching layer names (Top-level frame names can be identical or have a matching prefix) |
| Old state management | Toggle off the preserve scroll position setting | Toggle on the preserve scroll position setting |
Any new interaction automatically follows new state management rules. To update an old interaction to the new state management controls, click the Update button on the Interaction details modal.
Learn more about updating to new state management controls →
Prepare layers for new state management
In new interactions, scroll position is preserved between matching objects or frames.
Before you update old interactions to new state management, make sure your frames and objects match so that scroll position is preserved as expected.
Match nested objects
Nested objects are objects placed within another layer or frame. To match nested objects across frames, both of the following criteria must be met:
- Objects have identical names
- Objects have the same set of parents across top-level frames
Match top-level frames
Top-level frames are frames placed directly on the canvas. To match top-level frames, only one of the following criteria needs to be met:
- Frames have identical names
- Frame names have a common prefix, followed by a forward slash. For example, frames
Checkout / EmptyandCheckout / Completematch.
Rename layers in bulk
If you already have a unique name for each layer, but would like match them so scroll position is automatically shared, you can add a prefix to the existing name (e.g., Prefix / Name).
- Select the layers you want to rename by doing one of the following:
- Select an initial object on either the canvas or layers panel, then hold down Shift while clicking additional objects.
- Drag your cursor across any objects you want to select. This creates a blue box around the selected objects.
- Open up the rename layers panel:
- Mac: Command R
- Windows: Control R
- In the Rename to field, enter the prefix you'd like to add to the layer name. Include a forward slash after the prefix name.
- Click the Current Name button to add the current layer name after the forward slash.
- Click Rename to apply the changes.
Learn more about renaming layers →