Before you start
Who can use this feature
Users on any team or plan can use scrolling overflow in their prototypes.
Anyone with can edit access to a file can create and edit prototypes.
In creating prototypes, we want to our interactions to feel as much like the real thing as possible. For some interactions, we need to provide an illusion that our designs are truly dynamic.
The preserve scroll position setting lets you keep the same scroll location when you transition between screens. This applies to vertical scroll depth, as well as horizontal location.
- Figma automatically preserves your scroll position for Smart Animate.
- Preserve scroll position is optional for Instant or Dissolve animations.
- Preserve scroll position in not available for Slide, Push, or Move animations.
In our example below, we want to show the full size of our content when a user clicks on the preview. We have two screens in our prototype:
Screen 2shows the our newsfeed design with a preview of the element.
Screen 3shows how the same page will look with the full size element.
If we leave Preserve scroll position unchecked, the user can scroll down our prototype and click on our interactive element.
Figma will take them to the next page in our prototype (
Screen 3), but they will be taken to the very top of the frame.
This makes it obvious to the user that we have moved to a different screen. The user now has to scroll down to view the full size element, breaking the illusion we've constructed or confusing them.
If we check Preserve scroll position, the prototype remembers the user's scroll depth on the current frame.
When the interacts with the prototype, Figma takes them to the same scroll depth on the next frame. From the user's perspective, our content looks to expand on the same page.
In our example below, we want users to be able to see a different visual state, when they click on an option in the gallery.
Screen 1shows our newsfeed that lets users scroll left-to-right through a gallery of images.
Screen 2shows us what happens when you select an option from the gallery. We add a border around the image and a plus icon in the center.
If we don't check Preserve scroll position, the user can scroll down and across to view . If they click on an object, Figma will load Screen 2 at the top of the frame. The user will then have to scroll down and across to see that they have selected the last object.
If we check Preserve scroll position, Figma remembers the user's position and takes them to the last object in its selected state.