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.

Practice

1. What does vertical scroll behavior do in a Figma frame?

easy

A. It allows users to move content up and down inside the frame.

B. It allows users to move content left and right inside the frame.

C. It locks the content so it cannot be scrolled.

D. It automatically resizes the frame to fit all content.

Solution

1. Step 1: Understand vertical scroll behavior

   Vertical scrolling means moving content up and down inside a frame.

2. Step 2: Match behavior to options

   It allows users to move content up and down inside the frame. correctly describes vertical scrolling as up and down movement.

3. Final Answer:

   It allows users to move content up and down inside the frame. -> Option A

4. Quick Check:

   Vertical scroll = up/down movement [OK]

Hint: Vertical scroll means up and down movement [OK]

Common Mistakes:

• Confusing vertical with horizontal scrolling
• Thinking vertical scroll locks content
• Assuming vertical scroll resizes frame

2. Which option correctly sets horizontal scroll behavior in Figma's frame properties?

easy

A. Set Overflow behavior to 'Horizontal scrolling'.

B. Set Overflow behavior to 'Resize frame'.

C. Set Overflow behavior to 'No scrolling'.

D. Set Overflow behavior to 'Vertical scrolling'.

Solution

1. Step 1: Locate Overflow behavior setting

   In Figma, scroll behavior is set under Overflow behavior in the right panel for frames.

2. Step 2: Choose correct scroll type for horizontal

   To enable horizontal scroll, select 'Horizontal scrolling' option.

3. Final Answer:

   Set Overflow behavior to 'Horizontal scrolling'. -> Option A

4. Quick Check:

   Horizontal scroll = 'Horizontal scrolling' setting [OK]

Hint: Choose 'Horizontal scrolling' for horizontal scroll [OK]

Common Mistakes:

• Selecting vertical scrolling for horizontal scroll
• Choosing no scrolling by mistake
• Confusing resize frame with scroll behavior

3. Given a Figma frame with Overflow behavior set to 'Vertical scrolling' and content taller than the frame, what happens when you preview the frame?

medium

A. You can scroll left and right to see hidden content.

B. You can scroll up and down to see hidden content.

C. The frame resizes automatically to show all content.

D. No scrolling is possible; content is clipped.

Solution

1. Step 1: Understand vertical scrolling with taller content

   Vertical scrolling allows moving content up and down when content height exceeds frame height.

2. Step 2: Predict preview behavior

   Since content is taller, vertical scroll lets user scroll up/down to see hidden parts.

3. Final Answer:

   You can scroll up and down to see hidden content. -> Option B

4. Quick Check:

   Vertical scroll + taller content = up/down scroll [OK]

Hint: Vertical scroll lets you move up/down if content is taller [OK]

Common Mistakes:

• Thinking horizontal scroll works for tall content
• Assuming frame resizes automatically
• Believing no scroll means content is visible

4. You set a frame's Overflow behavior to 'Horizontal scrolling' but users cannot scroll horizontally in preview. What is the most likely cause?

medium

A. The frame is set to 'Vertical scrolling' instead.

B. The frame's content height is larger than the frame height.

C. The frame's content width is smaller or equal to the frame width.

D. The frame has no fill color.

Solution

1. Step 1: Check content size relative to frame

   Horizontal scrolling works only if content width exceeds frame width.

2. Step 2: Identify cause of no horizontal scroll

   If content width is smaller or equal, no horizontal scroll is needed or possible.

3. Final Answer:

   The frame's content width is smaller or equal to the frame width. -> Option C

4. Quick Check:

   Horizontal scroll needs wider content [OK]

Hint: Check if content width exceeds frame width for horizontal scroll [OK]

Common Mistakes:

• Confusing height with width for horizontal scroll
• Assuming vertical scroll setting causes issue
• Thinking fill color affects scroll behavior

5. You want a Figma frame to allow users to scroll vertically but not horizontally, even if content is wider than the frame. How should you set the scroll behavior and frame properties?

hard

A. Set Overflow behavior to 'No scrolling' and resize frame to fit content.

B. Set Overflow behavior to 'Horizontal scrolling' and increase frame height.

C. Set Overflow behavior to 'Vertical scrolling' and resize frame width to fit content.

D. Set Overflow behavior to 'Vertical scrolling' and ensure frame width clips content horizontally.

Solution

1. Step 1: Choose vertical scroll behavior

   Set Overflow behavior to 'Vertical scrolling' to allow up/down movement only.

2. Step 2: Control horizontal clipping

   Keep frame width fixed so wider content is clipped horizontally, preventing horizontal scroll.

3. Final Answer:

   Set Overflow behavior to 'Vertical scrolling' and ensure frame width clips content horizontally. -> Option D

4. Quick Check:

   Vertical scroll + fixed width = vertical only scroll [OK]

Hint: Use vertical scroll and fixed width to block horizontal scroll [OK]

Common Mistakes:

• Setting horizontal scroll instead of vertical
• Resizing frame width to fit content allowing horizontal scroll
• Choosing no scrolling disables all scroll