Scroll behavior (vertical, horizontal) in Figma - Deep Dive

Overview - Scroll behavior (vertical, horizontal)

What is it?

Scroll behavior in Figma controls how users move through content that is larger than the visible area. Vertical scrolling lets users move up and down, while horizontal scrolling lets users move left and right. This helps designers create interactive prototypes that feel natural and easy to navigate.

Why it matters

Without scroll behavior, users would be stuck seeing only a small part of the content, making it hard to explore or understand the full design. Proper scroll settings improve user experience by allowing smooth navigation through long pages or wide layouts, which is essential for testing and presenting designs realistically.

Where it fits

Before learning scroll behavior, you should understand basic Figma frames and prototyping. After mastering scroll behavior, you can explore advanced interactions and animations to create richer user experiences.

Mental Model

Core Idea

Scroll behavior defines how users move through content that extends beyond the visible frame, either vertically or horizontally, to explore all parts of a design.

Think of it like...

It's like reading a long book: vertical scrolling is flipping pages up and down, while horizontal scrolling is like turning pages sideways in a photo album.

┌───────────────┐
│ Visible Frame │
│ ┌─────────┐   │
│ │ Content │   │
│ │         │   │
│ │─────────│   │
│ │         │   │
│ └─────────┘   │
└───────────────┘
Scroll direction: ↑↓ or ←→

Build-Up - 7 Steps

1

Foundation

Understanding Frames and Content Size

Concept: Frames are containers that hold content; scroll behavior depends on content size relative to the frame.

In Figma, a frame is like a window showing part of your design. If the content inside is bigger than the frame, you can scroll to see hidden parts. For example, a frame 300px tall with content 600px tall means vertical scrolling is possible.

Result

You see only part of the content inside the frame, with the option to scroll if enabled.

Knowing that scroll depends on content size helps you decide when and where scrolling is needed.

2

Foundation

Setting Scroll Behavior in Prototypes

Concept: Scroll behavior is set in prototype settings to control how users navigate content during interaction.

In Figma prototype mode, select a frame and choose scroll options: vertical, horizontal, both, or none. This setting tells Figma how to let users move through the content when previewing or sharing prototypes.

Result

Users can scroll in the chosen direction(s) when interacting with the prototype.

Understanding prototype scroll settings is key to making interactive designs feel real and usable.

3

Intermediate

Vertical Scroll: When and How to Use

🤔Before reading on: do you think vertical scroll is only for long pages or can it be used in other layouts? Commit to your answer.

Concept: Vertical scroll is best for content that extends downward, like articles or lists, but can also be combined with other interactions.

Use vertical scroll for designs like news feeds, forms, or dashboards where content flows top to bottom. Enable vertical scroll in prototype settings and ensure content height exceeds frame height.

Result

Users scroll up and down smoothly to see all content.

Knowing vertical scroll fits natural reading patterns improves user comfort and design clarity.

4

Intermediate

Horizontal Scroll: Use Cases and Setup

🤔Before reading on: do you think horizontal scroll is common for text-heavy content or more for images and cards? Commit to your answer.

Concept: Horizontal scroll is ideal for wide content like image galleries or card carousels, allowing side-to-side navigation.

Set horizontal scroll when your content width is larger than the frame width, such as a row of product cards. Enable horizontal scroll in prototype settings to allow side scrolling.

Result

Users can swipe or drag left and right to explore content.

Recognizing horizontal scroll suits visual browsing helps create engaging, intuitive interfaces.

5

Intermediate

Combining Vertical and Horizontal Scroll

🤔Before reading on: do you think combining both scroll directions is always good or can it confuse users? Commit to your answer.

Concept: Figma allows both vertical and horizontal scroll, but it should be used carefully to avoid confusing navigation.

Enable both scroll directions for complex layouts like tables or maps. Test prototype to ensure users can easily scroll without losing orientation.

Result

Users can move freely in both directions, but design clarity is crucial.

Understanding when to combine scroll directions prevents user frustration and keeps navigation intuitive.

6

Advanced

Scroll Behavior Impact on User Experience

🤔Before reading on: do you think scroll behavior affects only navigation or also user perception of the design? Commit to your answer.

Concept: Scroll behavior influences how users perceive and interact with content, affecting usability and satisfaction.

Smooth, predictable scrolling makes prototypes feel polished and real. Poor scroll settings can cause confusion or missed content. Designers must balance scroll with layout and interaction cues.

Result

Better scroll behavior leads to more effective user testing and feedback.

Knowing scroll behavior shapes user experience helps designers create prototypes that truly simulate real apps or websites.

7

Expert

Advanced Scroll Tricks and Limitations

🤔Before reading on: do you think Figma supports infinite scroll or sticky scroll areas natively? Commit to your answer.

Concept: Figma has limitations like no native infinite scroll or sticky headers, but designers use workarounds and plugins to simulate advanced scroll effects.

Experts create multiple frames or overlays to mimic sticky elements or infinite lists. Understanding these limits guides realistic prototype expectations and creative solutions.

Result

Prototypes can approximate complex scroll behaviors despite tool limits.

Knowing Figma's scroll limits and workarounds empowers designers to push prototypes beyond basic interactions.

Under the Hood

Figma treats frames as viewports showing a portion of larger content. Scroll behavior settings tell the prototype player which axis to enable scrolling on. When users drag or swipe, Figma moves the content inside the frame along the allowed axis, revealing hidden parts. This is done by clipping content outside the frame and translating the visible area.

Why designed this way?

Figma's scroll behavior mimics real device scrolling to create realistic prototypes without complex coding. Limiting scroll to vertical, horizontal, or both simplifies performance and user expectations. More complex scroll features were left out to keep the tool accessible and fast.

┌───────────────┐
│ Frame (viewport)│
│ ┌───────────┐ │
│ │ Content   │ │
│ │───────────│ │
│ │           │ │
│ └───────────┘ │
│ Scroll axis:  │
│ ↑↓ or ←→     │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does enabling vertical scroll automatically enable horizontal scroll too? Commit to yes or no.

Common Belief: If I enable vertical scroll, horizontal scroll will also work if needed.

Reality: Scroll directions are independent; enabling vertical scroll does not enable horizontal scroll automatically.

Why it matters: Assuming both scrolls work can cause hidden content to be inaccessible, hurting prototype usability.

Quick: Can Figma prototypes have infinite scroll natively? Commit to yes or no.

Common Belief: Figma supports infinite scroll like real apps do.

Reality: Figma does not support infinite scroll natively; it requires manual frame duplication or plugins.

Why it matters: Expecting infinite scroll can lead to design choices that don't work in prototypes, confusing users and testers.

Quick: Does scroll behavior affect only prototype preview, not design files? Commit to yes or no.

Common Belief: Scroll settings change how the design looks in the editor.

Reality: Scroll behavior only affects prototype preview and shared prototypes, not the static design canvas.

Why it matters: Confusing design view with prototype view can cause frustration when scrolling doesn't work as expected in the editor.

Quick: Is combining vertical and horizontal scroll always a good idea? Commit to yes or no.

Common Belief: More scroll directions mean better navigation and user control.

Reality: Combining both scroll directions can confuse users if not designed carefully.

Why it matters: Poor scroll design can frustrate users, making prototypes harder to use and test.

Expert Zone

1

Scroll behavior interacts with device input methods; touch devices handle scrolling differently than mouse devices, affecting prototype feel.

2

Content padding and frame constraints influence scroll boundaries and user perception of scroll limits.

3

Scroll snapping is not natively supported in Figma but can be simulated with careful frame design and interactions.

When NOT to use

Avoid using both vertical and horizontal scroll in simple layouts; instead, redesign content to fit one scroll direction. For infinite or sticky scroll effects, use specialized prototyping tools or code-based platforms like Framer or Webflow.

Production Patterns

Professionals use vertical scroll for long-form content prototypes and horizontal scroll for galleries or card carousels. They combine scroll with overlays and fixed elements by layering frames. Advanced users simulate sticky headers by duplicating frames and syncing scroll positions.

Connections

User Experience Design

Scroll behavior is a key interaction pattern in UX design.

Understanding scroll behavior helps UX designers create intuitive navigation flows that match user expectations.

Web Development

Scroll behavior in Figma prototypes mimics CSS overflow and scroll properties in web development.

Knowing how scroll works in code helps designers create prototypes that translate well to real websites.

Cognitive Psychology

Scroll behavior relates to how humans process visual information and spatial memory.

Understanding cognitive load and attention guides designers to use scroll wisely, avoiding overwhelming users.

Common Pitfalls

#1 Enabling vertical scroll but content width exceeds frame width without horizontal scroll.

Wrong approach:

Prototype scroll set to vertical only, content wider than frame causing horizontal clipping.

Correct approach:

Set prototype scroll to 'vertical and horizontal' or redesign content to fit width.

Root cause:

Misunderstanding that scroll directions are independent and both must be enabled if content overflows both axes.

#2 Expecting scroll behavior to work in design mode instead of prototype mode.

Wrong approach:

Trying to scroll content inside frame in Figma editor without previewing prototype.

Correct approach:

Use prototype preview or share prototype link to test scroll behavior.

Root cause:

Confusing design canvas with interactive prototype environment.

#3 Combining vertical and horizontal scroll in complex layouts without clear visual cues.

Wrong approach:

Enabling both scrolls on a dense table without fixed headers or indicators.

Correct approach:

Use fixed headers or redesign layout to minimize scroll confusion.

Root cause:

Ignoring user orientation and navigation clarity when allowing multi-directional scroll.

Key Takeaways

Scroll behavior controls how users navigate content larger than the visible frame in Figma prototypes.

Vertical scroll suits long, top-to-bottom content; horizontal scroll fits wide, side-to-side layouts.

Scroll directions are independent and must be set explicitly to match content overflow.

Scroll behavior affects user experience deeply and should be designed with clarity and device input in mind.

Figma has scroll limitations; advanced effects require creative workarounds or other tools.