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.

Practice

1. What does overflow scrolling in Figma help you do in a dashboard design?

easy

A. Show more content inside a fixed-size frame by enabling scrolling

B. Automatically resize frames to fit all content without scrolling

C. Hide content that does not fit inside the frame permanently

D. Change the color of the scroll bar in the frame

Solution

1. Step 1: Understand overflow scrolling purpose

   Overflow scrolling allows content inside a fixed frame to be scrollable instead of hidden or resized.

2. Step 2: Apply to dashboard design

   This helps show more data or visuals in limited space without cluttering the screen.

3. Final Answer:

   Show more content inside a fixed-size frame by enabling scrolling -> Option A

4. Quick Check:

   Overflow scrolling = Show more content with scroll [OK]

Hint: Overflow scrolling means scroll inside fixed frames [OK]

Common Mistakes:

• Thinking overflow scrolling resizes frames automatically
• Assuming overflow hides content permanently
• Confusing overflow scrolling with style changes

2. Which of the following is the correct way to enable vertical overflow scrolling in a Figma frame?

easy

A. Set frame width fixed and choose 'Horizontal scrolling' in the Properties panel

B. Set frame height fixed and choose 'Vertical scrolling' in the Properties panel

C. Set frame to 'Auto Layout' and disable scrolling

D. Resize frame to fit all content without scrolling

Solution

1. Step 1: Identify vertical scrolling setup

   Vertical scrolling requires fixed height so content can scroll up/down inside the frame.

2. Step 2: Choose correct scroll direction

   In Properties panel, selecting 'Vertical scrolling' enables scroll inside fixed height frame.

3. Final Answer:

   Set frame height fixed and choose 'Vertical scrolling' in the Properties panel -> Option B

4. Quick Check:

   Vertical scroll = fixed height + vertical scroll setting [OK]

Hint: Fixed height + vertical scroll = vertical overflow scrolling [OK]

Common Mistakes:

• Choosing horizontal scrolling for vertical scroll needs
• Not fixing frame height before enabling scroll
• Confusing auto layout with scrolling settings

3. Given a frame with fixed width 300px and height 200px containing a list of 10 items each 50px tall, what happens if you set overflow scrolling to vertical?

medium

A. The frame shows only 4 items and allows vertical scrolling to see the rest

B. The frame cuts off items beyond 200px height with no scroll

C. The frame shows all 10 items without scrolling

D. The frame automatically expands height to fit all items

Solution

1. Step 1: Calculate visible items in fixed height

   Frame height is 200px; each item is 50px tall, so 200/50 = 4 items visible at once.

2. Step 2: Effect of vertical overflow scrolling

   With vertical scrolling enabled, user can scroll to see remaining 6 items beyond visible 4.

3. Final Answer:

   The frame shows only 4 items and allows vertical scrolling to see the rest -> Option A

4. Quick Check:

   Fixed height + vertical scroll = partial view + scroll [OK]

Hint: Visible items = frame height ÷ item height with scroll [OK]

Common Mistakes:

• Assuming all items show without scroll
• Thinking frame auto expands height
• Ignoring scroll setting effect

4. You set a frame with fixed width and height and enable horizontal scrolling, but the content does not scroll. What is the most likely reason?

medium

A. Vertical scrolling is enabled instead of horizontal

B. Frame height is not fixed

C. Content width is less than or equal to frame width

D. Frame is set to auto layout

Solution

1. Step 1: Check content size vs frame size

   For horizontal scrolling to work, content width must exceed frame width to enable scroll.

2. Step 2: Identify why no scroll appears

   If content width is less or equal to frame width, no scroll is needed or shown.

3. Final Answer:

   Content width is less than or equal to frame width -> Option C

4. Quick Check:

   Scroll needs content larger than frame [OK]

Hint: Scroll appears only if content size > frame size [OK]

Common Mistakes:

• Assuming scroll works regardless of content size
• Confusing vertical and horizontal scroll settings
• Ignoring fixed size requirement

5. You want to design a BI dashboard in Figma with multiple charts stacked vertically inside a fixed-height frame. How should you configure overflow scrolling to keep the dashboard clean and easy to navigate?

hard

A. Resize frame height dynamically to fit all charts without scrolling

B. Set fixed frame width and enable horizontal scrolling to scroll charts sideways

C. Use auto layout with no scrolling to show all charts at once

D. Set fixed frame height and enable vertical scrolling so users scroll through charts

Solution

1. Step 1: Understand dashboard layout needs

   Charts stacked vertically require vertical space; fixed height frame limits visible area.

2. Step 2: Choose scrolling to maintain clean design

   Enabling vertical scrolling lets users scroll through charts without cluttering the dashboard.

3. Step 3: Avoid horizontal scrolling or auto layout for vertical stacks

   Horizontal scroll or auto layout without scroll can cause poor navigation or overflow issues.

4. Final Answer:

   Set fixed frame height and enable vertical scrolling so users scroll through charts -> Option D

5. Quick Check:

   Vertical stack + fixed height + vertical scroll = clean dashboard [OK]

Hint: Vertical stack needs vertical scroll in fixed height frame [OK]

Common Mistakes:

• Using horizontal scroll for vertical stacks
• Not fixing frame height before scrolling
• Trying to show all charts without scroll causing clutter