0
0
Figmabi_tool~20 mins

Scroll behavior (vertical, horizontal) in Figma - Practice Problems & Coding Challenges

Choose your learning style9 modes available
Challenge - 5 Problems
🎖️
Scroll Mastery Badge
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate
1:30remaining
Understanding Vertical Scroll Behavior

In a dashboard design, you want users to scroll only up and down to see more data. Which scroll behavior setting in Figma achieves this?

ADisable scrolling completely
BSet overflow scrolling to horizontal only
CSet overflow scrolling to both vertical and horizontal
DSet overflow scrolling to vertical only
Attempts:
2 left
💡 Hint

Think about which direction allows vertical movement but restricts sideways movement.

🧠 Conceptual
intermediate
1:30remaining
Choosing Horizontal Scroll for Data Tables

You have a wide data table that doesn't fit the screen width. You want users to scroll sideways to see all columns. Which scroll behavior should you enable in Figma?

AHorizontal scroll only
BVertical scroll only
CBoth vertical and horizontal scroll
DNo scroll, use page break
Attempts:
2 left
💡 Hint

Consider which scroll direction lets users move left and right.

visualization
advanced
2:00remaining
Visualizing Mixed Scroll Behavior

You want to create a dashboard prototype in Figma where the main content scrolls vertically, but a side panel scrolls horizontally. How should you set the scroll behaviors for these two frames?

ABoth frames: vertical scroll only
BMain content: vertical scroll; Side panel: horizontal scroll
CMain content: horizontal scroll; Side panel: vertical scroll
DBoth frames: horizontal scroll only
Attempts:
2 left
💡 Hint

Think about typical dashboard layouts and how users navigate content.

🔧 Formula Fix
advanced
2:00remaining
Fixing Unexpected Scroll Behavior

You designed a dashboard frame in Figma with vertical scroll enabled, but users report they can scroll sideways too. What is the most likely cause?

AThe frame width is smaller than the content width, causing horizontal overflow
BVertical scroll setting automatically enables horizontal scroll
CThe frame height is larger than the content height
DScroll behavior settings are ignored in Figma
Attempts:
2 left
💡 Hint

Check the size of the frame compared to its content.

🎯 Scenario
expert
3:00remaining
Designing Responsive Scroll Behavior for BI Dashboard

You are designing a BI dashboard in Figma that must work on desktop and mobile. On desktop, the dashboard should scroll vertically only. On mobile, the dashboard should allow both vertical and horizontal scroll because of limited screen width. How do you set scroll behaviors to meet these requirements?

ASet the frame to both vertical and horizontal scroll for all devices
BSet the frame to vertical scroll only and rely on pinch zoom on mobile
CCreate two frames: one with vertical scroll for desktop, one with both scrolls for mobile, and switch visibility based on device
DDisable scrolling and use pagination instead
Attempts:
2 left
💡 Hint

Think about how to handle different device needs in one design file.