···

    Prototype scroll and overflow behavior

    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.

    Scroll behavior controls how scrolling works in prototypes. Scroll behavior consists of scroll overflow and scroll position.

    • Scroll overflow defines how users can interact with content that extends beyond a frame’s dimensions.
    • Scroll position defines how layers on frame behave when users scroll past them.

    Use scroll behavior to build prototypes that replicate interactive user experiences. 

    • Scroll up or down on a long page of content
    • Scroll left-to-right to view different elements in a slider
    • Pan or scroll around in any direction, like in an interactive map
    • Fix objects like navigation bars and menus in the same position on the page while scrolling
    • Create “sticky objects” that stay in place at the top of the frame once you scroll past them

    When we create prototypes, we want our interactions to feel as much like the real thing as possible. For some interactions, we need to create an illusion that our designs are truly dynamic by memorizing and sharing scroll position between frames.

    State management allows you to maintain the same scroll location when you move between two screens. If you don’t want to share scroll position, you can reset the state on an interaction to a frame, or you can rename the objects so they don’t match.

    Learn more about state management and resetting scroll position →

    Scroll overflow

    Overflow behaviors

    You can only apply overflow behavior to frames. This applies to frames that are directly on the canvas (top-level frames), as well as frames nested within other frames or layers.

    To apply overflow behavior, the frame must have content that extends beyond its bounds. If you change the bounds of the frame so that all the content fits inside it, regular scrolling will apply.

    Figma supports 4 different overflow behaviors: No scrolling, Vertical, Horizontal, and Both directions.

    No scrolling prevents users from scrolling up and down within a frame. Content that extends beyond the bounds of the frame will not be viewable.

    Vertical scrolling allows users to swipe or scroll up and down within a frame. Use this behavior to mimic scrolling down a long website, or page of content within an app.

    A user scrolls vertically up and down a prototype.

    Horizontal scrolling allows users to swipe or scroll left and right within a frame, while maintaining their vertical position. Use this to create sliders for content, like products, galleries, and libraries.

    A user scrolls horizontally left and right on a prototype

    Horizontal and vertical scrolling lets users navigate in any direction within a frame: left, right, up, or down. Use this behavior to support scrolling in any direction, like viewing a map or enlarged image.

    Animated image showing panning around an image of a map in a prototype

    Apply overflow behavior

    To apply overflow behavior to a frame, there must be child objects that extend beyond its bounds. You can only apply one overflow behavior to each frame.

    These instructions also apply to components. Select the Instance in the canvas, click Go to main Component in the right sidebar, then adjust the bounds of the original Component.

    1. Select the frame in the canvas.
    2. Open the Prototype panel in the right sidebar.
    3. In the Scroll behavior section, select the Overflow dropdown. Choose from:
      • No scrolling
      • Horizontal 
      • Vertical 
      • Both directions
    4. Click the present icon to view the prototype in Presentation view and see the results.

    A frame is selected, and from the right sidebar Prototype tab, Vertical overflow behavior is selected.

    Adjust the bounds of a frame

    If no content extends beyond the frame, Figma will show an error message when you try to apply overflow behavior. To apply overflow behavior, you'll need to adjust the frame's bounds.

    1. Select the frame you want to update.
    2. Open the Design panel in the right sidebar.
    3. Hover over the frame's bounds in the canvas until the cursor appears.
    4. Drag the bounding box to resize the frame.
    5. If you want to hide content that extends beyond the frame, check the box next to Clip content.

    A frame is resized.

    Constraints define how an object behaves when you resize them. To temporarily ignore Constraints, hold down the modifier key as you resize the frame:
    • Mac: ⌘ Command
    • Windows: Ctrl

    Scroll position

    You can apply scroll position behavior to any layer within a frame. Each object on a frame can have its own defined scroll position.

    Figma supports three kinds of scroll positions: Scroll with parent, Fixed, and Sticky.

    Positions

    Objects that scroll with parent move up and down the frame as you scroll. Use this behavior to mimic the behavior of scrolling up and down longer pages of content.

    Scrolling through a prototype with objects that all scroll with the parent frame.

    Fixed objects don’t move, even as you scroll up and down. This lets you to lock an object's position and makes sure it stays in the same location. Use fixed layers to fix a status bar to the top of the device, or fix a menu to the bottom of a frame.

    You cannot assign a fixed scroll position to any objects on a frame with auto layout.

    Scrolling through a prototype, with one object fixed to the top of the frame and one object fixed to the bottom of the frame.

    When you make a fixed object, Figma will move those layers above the other layers in your design and label them as Fixed in your layers panel. It's not possible to position scrolling objects above fixed layers.

    The layers panel shows layers labeled as Fixed.

    Sticky objects start as scrolling within the parent frame, but become fixed once the top edge of the object reaches the top of the frame. (If you scroll up again, the object will unstick and move down the parent frame.)

    Tip! Explore the sticky scrolling playground file in the Figma Community → 

    You can use sticky scroll position to design navigation menus or colliding headers.

    Sticky objects only apply to vertical scrolling. In order to apply a sticky scroll position to an object, the parent frame of the object must have its overflow behavior set to vertical. You can’t stick an object to the bottom, left, or right side of a frame.

    Scrolling through a prototype with several sticky objects.

    Note: Check the layers panel to see how sticky objects will stack in your prototype. Layers below sticky objects will scroll behind those sticky objects; while layers above sticky objects will scroll in front of them.

    Apply scroll position to a layer

    Scroll positions are applied to individual layers within a frame. You can only apply one scroll position to each object.

    1. Select the object, group or component in the canvas.
    2. Open the Prototype panel in the right sidebar.
    3. In the Scroll behavior section, select the Position dropdown. Choose from:
      • Scroll with parent
      • Fixed
      • Sticky
    4. Click the present icon to view the prototype in Presentation view and see the results.

    Related Videos