Scroll behavior (vertical, horizontal) in Figma - Step-by-Step Guide

Introduction

Scroll behavior lets you control how users move through content that is larger than the visible area. You can set vertical or horizontal scrolling to make navigation smooth and clear in your designs.

When your dashboard has a long list of items that don’t fit on one screen vertically

When you want users to swipe left or right to see more charts or data panels

When you design a report page that is wider than the screen and needs horizontal scrolling

When you want to keep some parts fixed while allowing scrolling in other areas

When you want to simulate real app or website scrolling behavior in your prototype

Steps

Step 1: Select the frame you want to add scrolling to

- Layers panel or canvas

The frame is highlighted and its properties appear in the right sidebar

Step 2: Click on the frame to open its properties in the right sidebar

- Design panel on the right

You see the frame size and layout options

Step 3: Scroll down to the 'Overflow behavior' section

- Right sidebar under the frame properties

You see options for horizontal and vertical scrolling

Step 4: Select 'Vertical scrolling' to allow up and down movement

- 'Overflow behavior' dropdown

The frame content can now scroll vertically in the prototype

Step 5: Alternatively, select 'Horizontal scrolling' to allow left and right movement

- 'Overflow behavior' dropdown

The frame content can now scroll horizontally in the prototype

Step 6: Choose 'Vertical and horizontal scrolling' to enable both directions

- 'Overflow behavior' dropdown

The frame content can scroll in both directions during preview

Step 7: Preview your prototype by clicking the Play button

- Top-right corner toolbar

You can test the scrolling behavior you set on the frame

Before vs After

Before

Frame shows all content with no scrollbars; content outside frame edges is visible

After

Frame hides overflow content and allows scrolling vertically, horizontally, or both as set

Settings Reference

Overflow behavior

📍 Right sidebar under frame properties

Controls how users can scroll content inside the frame

Default: No scrolling

Clip content

📍 Right sidebar under frame properties

Hides content outside the frame boundaries to enable scrolling effect

Default: Checked

Common Mistakes

Not enabling 'Clip content' when setting scroll behavior

Content outside the frame edges remains visible, so scrolling effect does not work

Always check 'Clip content' to hide overflow and enable proper scrolling

Choosing wrong scroll direction for content layout

Users cannot scroll in the expected direction, causing confusion

Match scroll direction to how content is arranged (vertical list = vertical scroll, wide panels = horizontal scroll)

Summary

Scroll behavior controls how users move through content larger than the frame.

Set vertical, horizontal, or both scrolling in the frame's overflow behavior settings.

Remember to enable 'Clip content' to hide overflow and activate scrolling properly.