Before you Start
Who can use this feature
Users on Any Figma Plan can use scrolling overflow
Users with Edit access to a File can create and edit prototypes
Overflow Behavior controls how users interact with content that extends beyond a device's dimensions.
This allows you to replicate scrolling down a lengthy page of content. As well as more advanced user interactions, like:
- Scroll left-to-right to switch between elements in a Slider
- Navigate between images, articles or posts in libraries and galleries
- Pan/scroll around to view an interactive map
You can only apply Overflow Behavior to Frames. This allows you to scroll on any objects or layers nested within that Frame.
We support three different Overflow Behaviors.
Vertical Scrolling allows a user to swipe or scroll up and down within the Frame. This allows the user to interact with the Prototype, like they would an actual website or app.
You can use this behavior for scrolling down a long website, or page of content within an app.
Note: You won't always need to apply Overflow to Frames that extend beyond the device's dimensions. By default, anyone can scroll the full length (or width) of a Frame.
You'll only need to apply scrolling overflow if a Frame has content that extends beyond its bounds.
Horizontal Scrolling allows a user to swipe (or scroll) left or right within a Frame.
This allows you to maintain your vertical position while exploring extra content. Use this for simulating a Product Slider, File Browser, Photo Gallery or Library.
Horizontal and Vertical Scrolling
Allows a user to swipe (or scroll) both left or right, and up or down within a particular Frame.
Use this behavior when you want to support scrolling to view more content in any direction.
Our interactive Google Maps image allows the user to view more of the map as they move around the Frame.
Apply an Overflow Behavior
There are two requirements to apply overflow behavior
- You can only apply Overflow behavior to Frames
- The child objects in the Frame must extend beyond the Frame's bounds.
Tip! If your objects don't extend beyond the Frame's bounds, you can Adjust a Frame's bounds.
- Select a Frame in the canvas.
- Open the Prototype tab and find the Overflow Behavior section.
- Select the desired behavior using the field provided. You can choose from:
- Horizontal Scrolling
- Vertical Scrolling
- Horizontal & Vertical Scrolling
- View your Prototypes in Presentation View to check out the results!
Note: You can only apply one Overflow Behavior to each Frame. You can apply different Overflow Behaviors to different Frames in a design.
Adjust the Bounds of a Frame
If all your child objects fit within the Frame when you apply scrolling overflow, Figma will show you an error message. You'll need to adjust the Frame's bounds before continuing.
- Open the Design tab in the Properties Panel.
- Select the Frame you want to update.
- Adjust the Frame to the desired dimensions:
- Use the Width and Height fields in the Properties panel
- Click to select the Frame and hover over the Frame's bounds until the resize cursor appears. Drag the bounding box to resize.
Learn more about resizing Frames in our Frames in Figma article
To hide any content that extends beyond the Frame, check the box next to Clip Content.
When you switch back to the Prototype tab, the warning will be gone.
Need to update the bounds of a Component?
You can also apply Overflow behavior to Components. Like regular Frames, some of the Component's content will need to extend beyond its bounds.
To find and edit a Master Component:
- Select the Instance in the canvas.
- In the Properties Panel, click the Go to Master Component link.
- Figma will open the Master Component at its origin.
Our Constraints Video Tutorial shows the step-by-step process of resizing a Component.
Use Overflow with Fixed Objects
There may be some elements of your design that you want to stay in the same position.
Constraints allow you to define how objects in a static design respond as you resize them. Within the Constraints section of the Properties panel, you can also define an object's position in a prototype.
The Fix position while scrolling setting allows you to fix an object's position so that it stays in the same location in the viewport, as users scroll and interact with the prototype.
Note: There are some Constraints that won't be available for fixed objects. We will grey these out in the Constraints setting. Learn more about Constraints in our Apply Constraints to define how layers resize article.
You will need to be in the Design tab to make changes to an object's Constraints.
Select the object, group or Component in the Canvas.
Locate the Constraints settings in the Properties Panel.
Select the relevant Constraints for that element. For example: a status bar may use Top Constraints and a mobile navigation menu may use Bottom.
Check the box to Fix position when scrolling.
Figma will move these objects above your other layers so that they are in the FIXED section of the Layers Panel.
Note: It's not possible to position scrolling objects above fixed layers, unless the scrolling layer is also Fixed.