Configuring Horizontal and Vertical Scrolling in Figma

Prototyping interactive scrolling experiences is essential for communicating user flows and demonstrating how users will navigate through your designs. Figma's prototype mode offers robust scrolling capabilities that let you create realistic, interactive prototypes that stakeholders can test and validate.

Whether you are designing a long-form landing page with vertical scrolling, a product carousel with horizontal movement, or a complex dashboard with fixed navigation elements, understanding how to configure scrolling behavior in Figma is a fundamental skill for any UI/UX designer working on web development projects.

For designers looking to create cohesive design systems, learning scroll behavior pairs well with mastering auto layout in Figma, as both contribute to creating consistent, professional prototypes.

Understanding Scrolling Fundamentals in Figma

Scrolling in Figma prototypes mimics real-world user behavior, allowing stakeholders to interact with your designs as they would with finished products. When you configure scrolling properly, prototypes communicate your design intent far more effectively than static mockups, enabling early discovery of navigation issues and improving overall user experience validation.

Three Foundational Concepts

Figma's scrolling system is built on three core concepts that work together to create interactive scroll experiences:

1. Frame Preparation - Ensuring content extends beyond frame boundaries
2. Overflow Behavior - Defining how users can navigate that content
3. Scroll Positions - Controlling how individual objects behave during scrolling

Why Scroll Behavior Matters for Prototyping

User expectations play a critical role in prototype testing. When stakeholders encounter scrolling behavior that matches their everyday experiences with websites and applications, they engage more naturally with the design and provide more actionable feedback. Conversely, non-standard scrolling patterns can distract from the core design decisions you're validating.

Demonstrating proper scrolling behavior during stakeholder presentations helps decision-makers visualize the complete user journey. Rather than describing how content will flow, you show it directly, reducing ambiguity and accelerating design approval cycles. Teams that incorporate scrolling prototypes often report fewer revision requests during later development stages because everyone aligned on the experience early.

Scroll behavior also directly impacts how you evaluate information architecture and content hierarchy. When users scroll through your prototype, their attention patterns reveal which content grabs interest and where they might lose engagement. This insight shapes decisions about content prioritization and visual organization that static mockups cannot provide.

Preparing Frames for Scrolling

Before you can enable scrolling in any Figma prototype, you must first prepare your frames to accommodate scroll behavior. This fundamental step is where many designers encounter their first challenges, but understanding the relationship between frame dimensions and content placement is essential for creating effective scrolling prototypes.

Extending Content Beyond Frame Dimensions

Frames must contain content that exceeds the visible frame area to enable scrolling functionality. Think of your frame as a viewport window - the visible area represents what users see without scrolling, while content extending beyond these boundaries represents what becomes accessible through scrolling interaction.

To prepare a frame for scrolling:

1. Select the frame you want to update
2. Open the Design panel in the right sidebar
3. Hover over the frame's edge until the resize cursor appears
4. Drag the bounding box to create a frame larger than its visible content area
5. Ensure all child objects remain properly nested within the parent frame

When using auto layout, frame resizing works differently. You can adjust frame height by adding padding or increasing the spacing between elements. The key is ensuring the actual content height exceeds the frame's height setting. For manual layout frames, simply dragging the bottom edge downward creates scrollable space.

Verifying proper object nesting: Check the Layers panel to confirm each element appears indented under the frame name with a slight right offset. Objects accidentally placed at the same level as the frame (showing the same left alignment) will not scroll with the frame content. If you discover objects outside their parent frame, drag them in the Layers panel to restore proper nesting.

Using constraints effectively: When resizing frames, consider applying constraints to child elements. Constraints determine how objects respond when their parent frame changes size. For scrollable frames, top constraints often work well for header elements, while scale constraints help maintain proportional relationships for content blocks.

Managing Clip Content for Overflow Visibility

The Clip content setting controls whether visual elements extending beyond frame boundaries are hidden or displayed. By default, Figma clips content that overflows the frame boundaries, creating a clean viewport appearance for your prototype. However, during the design process, you may want to disable clipping to preview how scrollable content will appear.

To toggle clip content:

1. Select the frame you want to update
2. Open the Design tab in the right properties panel
3. In the Layout section, locate the Clip content checkbox
4. Check or uncheck based on your preview needs

When clip content is enabled, any content extending beyond the frame's dimensions remains part of the prototype but remains hidden from view until users scroll. When disabled, you can see all content in the design view, regardless of frame boundaries.

Best practices for clip content management: During initial layout and content creation, disable clip content to see exactly where all your elements sit relative to frame boundaries. This prevents accidentally positioning elements too far outside the visible area. Before prototype testing, re-enable clip content to confirm the viewport appearance matches your intended design. When sharing prototypes with stakeholders, clip content enabled ensures they see exactly what you've designed within the visible frame area.

The clip content setting also affects how you work with fixed and sticky elements. With clipping disabled, you might notice fixed elements appear to float outside their expected position. Always verify your clip settings match your current workflow phase to avoid confusion.

Configuring Scroll Overflow Behavior

Once your frames contain content extending beyond their boundaries, you can configure how users will navigate that content through overflow settings. Scroll overflow defines the allowed scroll directions and is applied through Figma's Prototype tab, making it accessible to anyone with edit access to the file.

Accessing Overflow Settings

1. Select a frame in your design
2. Open the Prototype tab in the right properties panel
3. Locate the Scroll behavior section
4. Open the Overflow dropdown to choose your scroll type

The four overflow options serve different purposes:

Detailed guidance on overflow selection: Choose vertical scrolling for the majority of web and mobile prototypes since it mirrors natural browsing behavior. Vertical scrolling suits article layouts, product detail pages, social feeds, and any content that stacks sequentially. Select horizontal scrolling for gallery-style interfaces where content naturally flows left-to-right, such as movie showtimes, music album artwork, or seasonal product features.

Use bidirectional scrolling sparingly and only when the interface genuinely requires free-form navigation. Maps, large architectural plans, and detailed technical diagrams benefit from both-direction scrolling, but most consumer interfaces work better with constrained scroll behavior that guides users along predictable paths.

Vertical Scrolling

Vertical scrolling allows users to swipe or scroll up and down through content while maintaining their horizontal position. This is the most common scrolling pattern on the web and in mobile applications, mimicking how users naturally browse long-form content.

Ideal use cases for vertical scrolling:

• Long-form landing pages and articles
• Mobile news feeds and social streams
• Document viewers and content pages
• E-commerce product listings
• Blog post layouts

When you configure vertical scrolling, users can move through content along the Y-axis while their horizontal position (X-axis) remains constant. This creates familiar browsing behavior that aligns with user expectations from everyday web and app usage.

Tips for effective vertical scroll layouts: Avoid creating excessive scroll length with minimal content, as stakeholders may feel the prototype wastes their time scrolling through empty space. Aim to include enough content to demonstrate scroll behavior meaningfully--typically several screen heights worth of material. Consider breaking very long pages into section anchors with clear visual breaks, as this structure helps stakeholders understand content organization.

When designing for mobile prototypes, remember that vertical scroll is the dominant pattern. Users expect to swipe upward to discover additional content, and they scroll past content they find less interesting. Your prototype should reflect these natural behaviors by presenting content in a descending hierarchy of interest.

Horizontal Scrolling

Horizontal scrolling enables users to swipe or scroll left and right while maintaining their vertical position. This scrolling direction is less common than vertical scrolling but essential for specific UI patterns where content naturally organizes in a left-to-right or right-to-left flow.

Ideal use cases for horizontal scrolling:

• Image and photo galleries
• Product carousels and featured item displays
• Horizontal navigation menus
• Timeline views and chronological content
• Code snippet viewers
• Music or playlist interfaces

Horizontal scrolling maintains the user's vertical position within the frame, allowing them to explore horizontal content without losing their place along the Y-axis. This creates an experience similar to sliding a physical carousel or flipping through a horizontal photo strip.

When to choose alternatives to horizontal scrolling: While horizontal scrolling works well for certain content types, consider whether alternative patterns might serve users better in your specific context. Pagination with next/previous buttons provides clearer navigation for content that users might need to reference repeatedly, as they can easily return to specific pages. Arrow buttons or scroll indicators make horizontal content discoverable for users who don't naturally attempt horizontal swipes, particularly on desktop devices where horizontal scrolling requires shift-scroll or trackpad gestures.

Evaluate your audience and their device habits. Mobile users often swipe horizontally without thinking, making carousels effective. Desktop users may not discover horizontal content without explicit visual cues. When in doubt, test both approaches with real users to determine which supports their goals more effectively.

Both Directions Scrolling

Configuring both horizontal and vertical scrolling allows users to navigate in any direction within a frame. This bidirectional scrolling capability is essential for specific interface types where users need to explore content freely across both axes.

Ideal use cases for bidirectional scrolling:

• Interactive map interfaces
• Large image viewers and zoomable graphics
• Complex data dashboards with multiple data points
• Floor plan or seating chart views
• Detailed technical diagrams

While bidirectional scrolling is less common than single-direction scrolling, it enables unique interaction patterns that would be difficult to achieve with other scrolling configurations. Users can pan around large content areas just as they would on a physical map or when examining a detailed photograph.

Accessibility considerations for bidirectional scrolling: Multi-directional scrolling can disorient users who rely on consistent navigation patterns. Some users may struggle to determine their position within large scrollable areas, particularly if there are no visual landmarks or reference points. Consider adding fixed reference elements like scale indicators, coordinate displays, or sticky position labels to help users maintain orientation.

When prototyping bidirectional interfaces, test with users who have varying levels of technology experience. Provide optional on-screen controls (pan arrows, zoom buttons) alongside touch/scroll interaction so users can choose their preferred navigation method. For production implementations, ensure keyboard navigation support allows users to explore bidirectional content without requiring scroll gestures.

Applying Scroll Position to Objects

Beyond configuring how the frame itself scrolls, Figma allows you to control how individual objects within scrollable frames behave during scrolling interactions. Scroll position settings give you precise control over whether elements move with scroll, stay fixed in place, or stick to frame boundaries.

Accessing Scroll Position Settings

1. Select an object, group, or component within a scrollable frame
2. Open the Prototype tab in the right properties panel
3. Locate the Scroll behavior section
4. Open the Position dropdown to choose your scroll behavior

You can only apply one scroll position to each layer, and the object must be within a frame that has scroll overflow enabled.

Visual hierarchy and prototype readability: Scroll position settings significantly impact how users perceive your prototype's information hierarchy. Fixed elements draw immediate attention because they remain constantly visible, making them ideal for primary navigation or critical calls-to-action. Sticky elements create visual anchors that help users understand content organization as they scroll through sections. Elements that scroll normally fade naturally into the background content flow.

When designing complex prototypes, consider the combined effect of multiple scroll positions. A frame with fixed headers, sticky section labels, and scrolling content creates a rich visual hierarchy that stakeholders can navigate intuitively. However, mixing too many scroll behaviors in a single view can create visual confusion. Test your prototypes with fresh eyes to ensure the scroll position choices enhance rather than complicate the user experience.

Scroll with Parent

Objects set to scroll with parent move naturally through the frame as users scroll, maintaining their position relative to the content. This is the default scroll behavior for most elements and mimics how standard content behaves on web pages and in applications.

Use cases for scroll with parent:

• Primary content blocks and sections
• Article text and images
• Product cards and listings
• Footer content and navigation elements
• Any content intended to scroll out of view during use

When objects scroll with their parent frame, they travel through the visible viewport area as the user scrolls, eventually moving out of view when they pass beyond the frame boundaries. This behavior creates familiar, predictable scrolling experiences that align with user expectations.

Design patterns where scroll-with-parent excels: Long-form article layouts benefit from having all content scroll uniformly, allowing readers to progress through the narrative without fixed elements interrupting their focus. E-commerce product grids where users browse multiple items before making selections work well with scroll-with-parent behavior since the entire selection experience flows naturally. Feature comparison tables, customer testimonials, team member profiles, and any content sections that tell a sequential story all benefit from standard scrolling behavior.

The scroll-with-parent option essentially says "this content moves through the viewport as part of the user's journey." Reserve this position for elements that contribute to the scrolling narrative rather than elements that provide navigation or context.

Fixed Position

Fixed objects remain stationary regardless of scroll position, staying visible at their specified location within the frame even as other content moves past them. This scroll position is essential for creating persistent interface elements that users can always access.

Use cases for fixed position:

• Navigation bars and headers
• Status bars and indicator panels
• Call-to-action buttons that remain visible
• Search bars and filter controls
• User profile and account indicators

When you set an object to fixed, Figma automatically moves it above other layers in the frame and labels it as Fixed in the Layers panel. This reordering cannot be changed manually, and scrolling content cannot appear above fixed layers.

User experience benefits of fixed elements: Fixed navigation dramatically improves prototype usability by ensuring users can always access primary actions regardless of how far they've scrolled. This mirrors standard web patterns that users rely on unconsciously--when they want to find the main menu or return home, they look to the top of the viewport. Fixed search bars let users immediately pivot their exploration without scrolling back to the top. Fixed action buttons (like "Add to Cart" in e-commerce prototypes) maintain conversion opportunities throughout the browsing experience.

Placement best practices: Position fixed elements at logical anchor points--top for global navigation and search, bottom for primary actions on mobile, corners for contextual tools. Avoid fixed elements that overlap scrolling content in ways that obstruct important information. Ensure fixed elements have sufficient visual weight to remain noticeable but don't dominate the viewport to the point where scrolling content feels secondary.

Sticky Scrolling

Sticky scroll position creates a dynamic behavior where objects scroll normally at first but become fixed once their top edge reaches the top of their parent frame. As users scroll back up, the objects detach from the frame boundary and resume normal scrolling behavior. This creates sophisticated interaction patterns commonly seen in modern web interfaces.

Use cases for sticky scrolling:

• Section headers that remain visible within their section
• Category labels in filtered content views
• Table headers that stay visible during long lists
• Sticky sidebars that attach at frame top
• Navigation elements that engage at specific scroll points

When implementing sticky scrolling, remember that if the sticky object is nested within another layer in the frame, it will stay within that direct parent's bounds. When the parent layer scrolls out of view, the sticky object continues scrolling with it rather than sticking to the main frame boundary.

Step-by-step guidance for effective sticky headers: Position your sticky element where you want it to first appear in the content flow, typically above the section it will label. Apply sticky scroll position from the Prototype tab, ensuring the parent frame has vertical scrolling enabled. Test by scrolling downward--the element should scroll normally until its top edge reaches the top of the parent frame, then remain fixed. Scroll back up to confirm the element detaches and resumes normal movement.

Browser compatibility and implementation considerations: Sticky scroll behavior in CSS (position: sticky) enjoys broad support across modern browsers, making it a reliable choice for production implementations. When translating Figma sticky prototypes to code, remember that sticky elements require a positioning parent (typically the scroll container itself) and a defined top/bottom value to determine where engagement occurs. The Figma prototype behavior mirrors CSS sticky positioning closely, making handoff straightforward for developers familiar with this property. For teams implementing AI-powered automation solutions, understanding how to translate design prototypes to production code ensures accurate handoff and faster development cycles.

Troubleshooting Common Scrolling Issues

Even experienced designers encounter challenges when configuring scrolling behavior in Figma. Understanding common issues and their solutions will help you create reliable, functional prototypes more efficiently.

Scroll Not Working Error

The most common error message states: "For scrolling to work on this frame, the content needs to be bigger than the frame." This indicates that your content does not extend beyond the frame boundaries.

To resolve this error:

1. Verify the frame dimensions in the Design panel--compare the height value to your content's actual extent
2. Check that content elements actually extend beyond the visible frame area by temporarily disabling clip content
3. Ensure objects are properly nested in the Layers panel (they should appear indented under the frame)
4. Resize the frame to be smaller than its content, or add more content to fill additional space

Layer Stacking Issues with Fixed Elements

Fixed elements automatically move to the top of the layer stack, which can affect how scrolling content appears relative to fixed elements. Scrolling content cannot appear above fixed layers, which may create unexpected visual results.

To manage layer stacking:

1. Check the Layers panel to see the fixed element placement--Figma labels these with "Fixed" badges
2. Adjust the order of scrolling layers in the Layers panel to control which appears above others
3. For auto layout frames with scrolling content appearing above fixed elements, change the canvas stacking setting in the Design panel
4. Consider whether the visual result matches your intent--if not, restructure your layer hierarchy

Auto Layout Constraints

Working with auto layout frames introduces specific constraints on scroll behavior that require careful handling.

Specific solutions for auto layout scenarios:

• Fixed position unavailable: Select the object, open the Design panel, and change positioning from Auto to Absolute. Fixed scroll position then becomes available in the Prototype tab.

• Sticky position not engaging: Confirm the parent frame has vertical scrolling enabled. Sticky positioning requires vertical overflow on the parent container.

• Canvas stacking issues: In auto layout frames, the Canvas Stacking setting controls how layers stack when using fixed or sticky positioning. Access this in the Layout section of the Design panel.

• Complex behaviors not working: For sophisticated scroll behaviors, consider converting auto layout frames to manual layout. While auto layout provides responsive benefits, manual layout offers maximum control over scroll positioning.

Advanced Scrolling Techniques

Mastering basic scrolling configuration opens the door to sophisticated prototype interactions. These advanced techniques combine scrolling behaviors to create complex, realistic user experiences.

Creating Sticky Navigation Headers

Sticky navigation headers combine fixed and sticky behaviors to create persistent navigation that engages at specific scroll points:

1. Create the header structure: Design your navigation bar with all necessary links and actions within its own frame
2. Position in parent frame: Place the navigation frame at the very top of your scrollable content area
3. Apply sticky position: Select the navigation frame and choose Sticky from the Position dropdown in the Prototype tab
4. Set engagement point: Ensure the parent frame's top edge aligns with where you want the sticky behavior to activate
5. Test thoroughly: Scroll down to verify the navigation becomes fixed at the right moment--not immediately, but after initial content

Example implementation: For a blog design with category sections, create sticky category labels that engage when users scroll past the hero section but before the content begins. This creates a professional navigation experience where labels appear exactly when users need them.

Building Horizontal-Vertical Hybrid Layouts

Complex interfaces often require combining scroll types within nested frame structures to achieve sophisticated layouts:

1. Create vertical parent frame: Set up a frame with vertical scrolling to serve as the main page container
2. Design horizontal content sections: Within the vertical frame, create child frames for sections that need horizontal scrolling (galleries, carousels, timelines)
3. Apply horizontal overflow to children: Select each child section and set overflow to Horizontal
4. Test independence: Verify each horizontal section scrolls separately without affecting the parent frame's vertical scroll
5. Refine visual hierarchy: Use spacing, backgrounds, and borders to clearly distinguish horizontal scroll sections

Dashboard example: A project management dashboard might use vertical scrolling for overall page structure while nested task cards and timeline views scroll horizontally within their respective panels. Each scroll type operates independently, allowing users to navigate both page sections and individual content areas.

Preserving Scroll Position Between Frames

When your prototype contains multiple pages or screens, you can choose to preserve or reset scroll position between frames:

1. Set up navigation connections: Create interactions between frames using the Prototype tab
2. Configure state management: When connecting frames, locate the State section in the interaction settings
3. Enable scroll position preservation: Toggle the option to maintain the user's scroll location when transitioning
4. Test navigation flow: Navigate away and return to verify position is maintained correctly

This capability significantly improves prototype usability for multi-page flows like article reading, product browsing, or form completion. Users don't lose their place when returning to a previous screen, creating a more polished and realistic demonstration experience.

For professional web development services that translate these prototype interactions into production-ready code, understanding the relationship between Figma scrolling and CSS properties ensures accurate implementation.

Best Practices for Scroll Configuration

Creating effective scrolling prototypes requires attention to both technical configuration and user experience considerations. These best practices will help you build prototypes that communicate your design intent clearly.

Design Realistic Scroll Experiences

• Match scroll length to actual content requirements rather than creating excessive empty scroll space
• Include enough content to demonstrate scroll behavior meaningfully without overwhelming stakeholders
• Consider device-specific scroll patterns and expectations (mobile vs desktop)
• Test scroll interactions on actual devices when possible

Ensure Consistent Scroll Behavior

• Apply consistent scroll types for similar components across your prototype
• Use shared styles and components for uniform scrolling elements
• Document scroll position decisions for team clarity
• Review all scrollable frames before prototype testing sessions

Prepare for Development Handoff

• Note scroll behavior in design specifications for developers, including scroll direction, fixed elements, and sticky positioning requirements
• Communicate fixed element positioning requirements clearly, including z-index considerations and expected stacking order
• Document sticky scroll implementation details such as engagement points and any conditional behaviors
• Provide examples of expected scroll behavior in user stories or acceptance criteria

Development translation notes: When handing off scrolling prototypes to developers, explain that Figma's scroll position options map directly to CSS properties. Scroll with parent corresponds to standard document flow. Fixed position maps to CSS position: fixed with top/left/right/bottom values. Sticky position maps to position: sticky with a defined top value for engagement. Both-direction scrolling typically translates to a container with overflow: auto or overflow: scroll.

Clear documentation of scroll behaviors during handoff prevents development teams from having to reverse-engineer your intentions, reducing miscommunication and implementation errors. Teams working with UI/UX design services benefit from clear prototypes that developers can easily translate into production code.

Sources

1. Figma Help Center: Prototype scroll and overflow behavior - Official Figma documentation for scroll and overflow behavior in prototypes

2. LogRocket: Configuring horizontal and vertical scrolling in Figma - Comprehensive tutorial on Figma scrolling configuration