Scroll behavior (vertical, horizontal) in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UX designer working with the BI team

📋 Request: Your manager wants you to create a dashboard prototype in Figma that demonstrates both vertical and horizontal scroll behaviors for large data tables and charts.

📊 Data: You have sample sales data by region and month, with multiple columns and rows that exceed typical screen size.

🎯 Deliverable: A Figma prototype showing a dashboard with vertical scrolling for rows and horizontal scrolling for columns, allowing easy navigation through the data.

Sample Data

Region	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
North	1200	1300	1250	1400	1350	1500	1600	1550	1650	1700	1750	1800
South	1100	1150	1200	1250	1300	1350	1400	1450	1500	1550	1600	1650
East	1000	1050	1100	1150	1200	1250	1300	1350	1400	1450	1500	1550
West	900	950	1000	1050	1100	1150	1200	1250	1300	1350	1400	1450
Central	800	850	900	950	1000	1050	1100	1150	1200	1250	1300	1350
North-East	700	750	800	850	900	950	1000	1050	1100	1150	1200	1250
South-West	600	650	700	750	800	850	900	950	1000	1050	1100	1150
North-West	500	550	600	650	700	750	800	850	900	950	1000	1050

1

Step 1: Create a new Figma frame sized for a typical desktop screen (e.g., 1440x900 px).

In Figma, use the Frame tool and set width=1440 px, height=900 px.

Expected Result

A blank frame of 1440x900 px appears, representing the dashboard canvas.

2

Step 2: Add a table component inside the frame with the sample data rows and columns.

Use rectangles and text layers to create a grid with 8 rows and 13 columns (1 for Region + 12 months). Fill cells with sample data.

Expected Result

A visible table with all regions as rows and months as columns is displayed inside the frame.

3

Step 3: Set the table container to have a fixed height that shows only 5 rows at a time to enable vertical scrolling.

Select the table container frame, set height to show 5 rows, enable 'Clip content' and add vertical scrolling behavior in Figma's prototype settings.

Expected Result

Only 5 rows are visible vertically, with a vertical scrollbar allowing scrolling through all 8 rows.

4

Step 4: Set the table container width to show only 7 columns at a time to enable horizontal scrolling.

Set the container width to fit 7 columns, enable 'Clip content' and add horizontal scrolling behavior in prototype settings.

Expected Result

Only 7 columns are visible horizontally, with a horizontal scrollbar allowing scrolling through all 13 columns.

5

Step 5: Link vertical and horizontal scroll behaviors so users can scroll in both directions independently.

In Figma prototype settings, enable both vertical and horizontal scrolling on the table container frame.

Expected Result

Users can scroll vertically to see all regions and horizontally to see all months.

6

Step 6: Add labels and titles above the table for clarity.

Add text layers with 'Sales by Region and Month' as title and 'Scroll vertically and horizontally to explore data' as instruction.

Expected Result

Clear title and instructions appear above the table.

7

Step 7: Test the prototype by entering presentation mode and using scroll gestures or scrollbar to navigate the table.

Click the Present button in Figma and try scrolling vertically and horizontally inside the table container.

Expected Result

The table scrolls smoothly vertically and horizontally, showing all data.

Final Result

┌───────────────────────────────────────────────┐
│           Sales by Region and Month            │
│ Scroll vertically and horizontally to explore  │
│───────────────────────────────────────────────│
│ Region   │ Jan │ Feb │ Mar │ Apr │ May │ Jun │ ...│
│──────────┼─────┼─────┼─────┼─────┼─────┼─────┼────┤
│ North    │1200 │1300 │1250 │1400 │1350 │1500 │ ...│
│ South    │1100 │1150 │1200 │1250 │1300 │1350 │ ...│
│ East     │1000 │1050 │1100 │1150 │1200 │1250 │ ...│
│ West     │ 900 │ 950 │1000 │1050 │1100 │1150 │ ...│
│ Central  │ 800 │ 850 │ 900 │ 950 │1000 │1050 │ ...│
│ ...      │ ... │ ... │ ... │ ... │ ... │ ... │ ...│
│───────────────────────────────────────────────│
│ Scrollbars visible for vertical and horizontal │
└───────────────────────────────────────────────┘

✓The dashboard prototype allows users to scroll vertically to see all regions beyond the visible 5 rows.

✓Users can scroll horizontally to view all 12 months beyond the visible 7 columns.

✓This scroll behavior improves usability for large tables in BI dashboards.

Bonus Challenge

Add sticky headers for the top row (months) and first column (regions) so they remain visible while scrolling.

Show Hint

In Figma, duplicate the header row and first column outside the scrollable area and align them to stay fixed during scrolling.

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