Overflow scrolling in Figma - Real Business Scenario

Scenario Mode

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

📋 Request: Your manager wants a dashboard prototype that handles large data tables with smooth scrolling

📊 Data: You have a sales data table with 12 rows and multiple columns that won't fit in a fixed dashboard area

🎯 Deliverable: Create a dashboard prototype in Figma with a data table that uses overflow scrolling so users can scroll horizontally and vertically to see all data

Sample Data

Region	Month	Product	Sales	Profit	Units Sold	Customer Rating
North	Jan	Widget A	1200	300	150	4.5
South	Jan	Widget B	900	200	120	4.0
East	Jan	Widget C	1100	250	130	4.2
West	Jan	Widget A	1000	220	140	4.1
North	Feb	Widget B	1300	320	160	4.6
South	Feb	Widget C	950	210	125	4.3
East	Feb	Widget A	1150	270	135	4.4
West	Feb	Widget B	1050	230	145	4.2
North	Mar	Widget C	1250	310	155	4.7
South	Mar	Widget A	980	215	128	4.1
East	Mar	Widget B	1120	260	132	4.3
West	Mar	Widget C	1020	225	142	4.0

1

Step 1: Create a new frame in Figma sized 600px wide by 400px tall to hold the dashboard area

Use the Frame tool and set width=600, height=400

Expected Result

A frame appears with the specified size to contain the dashboard

2

Step 2: Insert a table component inside the frame with columns: Region, Month, Product, Sales, Profit, Units Sold, Customer Rating

Use the Text tool to create headers and rows with the sample data inside the frame

Expected Result

A table with 7 columns and 12 rows is visible inside the frame

3

Step 3: Set the frame's overflow behavior to 'Vertical Scrolling' and 'Horizontal Scrolling' to enable scrolling inside the frame

Select the frame, go to the right panel, under 'Overflow Behavior' choose 'Vertical Scrolling' and 'Horizontal Scrolling'

Expected Result

Scrollbars appear on the frame when the table content exceeds the frame size

4

Step 4: Adjust the table width to be wider than the frame width (e.g., 800px) so horizontal scrolling is needed

Resize the table group or frame containing the table to 800px width

Expected Result

Horizontal scrollbar appears allowing side-to-side scrolling

5

Step 5: Adjust the table height to be taller than the frame height (e.g., 600px) so vertical scrolling is needed

Resize the table group or frame containing the table to 600px height

Expected Result

Vertical scrollbar appears allowing up-and-down scrolling

6

Step 6: Test the prototype by entering presentation mode and using mouse or trackpad to scroll horizontally and vertically inside the table area

Click the Present button and interact with the scrollbars or scroll gestures

Expected Result

You can smoothly scroll through all rows and columns of the table inside the fixed dashboard frame

Final Result

Dashboard Frame (600x400)
+------------------------------------------------------------+
| Region | Month | Product | Sales | Profit | Units Sold | ... |
|------------------------------------------------------------|
| North  | Jan   | Widget A| 1200  | 300    | 150        | ... |
| South  | Jan   | Widget B| 900   | 200    | 120        | ... |
| ... (scroll vertically to see all rows)                    |
|------------------------------------------------------------|
| (scroll horizontally to see all columns)                   |
+------------------------------------------------------------+

✓The dashboard frame uses overflow scrolling to handle large tables.

✓Users can scroll vertically to see all 12 rows.

✓Users can scroll horizontally to see all 7 columns.

✓This keeps the dashboard compact and user-friendly.

Bonus Challenge

Add sticky headers to the table so column titles remain visible while scrolling vertically.

Show Hint

In Figma, group the header row separately and fix its position inside the scrolling frame.