Overflow scrolling in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ visualization

intermediate

Identify the correct overflow scrolling setting for a dashboard panel

You have a dashboard panel in Figma that contains a long list of KPIs. You want users to scroll vertically inside this panel without affecting the whole page. Which overflow scrolling setting should you use?

A Set the panel's overflow to 'Visible' so all content shows without scrolling.

B Set the panel's overflow to 'Scroll' to enable vertical scrolling inside the panel.

C Set the panel's overflow to 'Hidden' to prevent any scrolling inside the panel.

D Set the panel's overflow to 'No scroll' to disable scrolling but clip content.

💡 Hint

Think about how to allow scrolling inside a fixed area without moving the whole page.

Setting overflow to 'Scroll' enables a scrollbar inside the panel, allowing users to scroll through content that exceeds the panel's visible area.

🧠 Conceptual

intermediate

Understanding overflow scrolling impact on user experience

Why is it important to use overflow scrolling correctly in BI dashboards designed in Figma?

A It allows users to navigate large data areas smoothly without losing context of the dashboard layout.

B It automatically summarizes data to fit the screen.

C It disables scrolling so users focus only on visible data.

D It prevents users from seeing all data at once, which is always better.

💡 Hint

Think about how users interact with large data sets on limited screen space.

Proper overflow scrolling lets users scroll through large content areas inside fixed panels, keeping the overall dashboard layout stable and easy to understand.

🔧 Formula Fix

advanced

Fix the scrolling issue in a Figma dashboard panel

A dashboard panel in Figma is set to overflow 'Visible', but the content is cut off and users cannot scroll to see all KPIs. What is the most likely cause?

A The panel's overflow should be set to 'Scroll' or 'Auto' to enable scrolling inside the fixed height panel.

B The panel's height is fixed and overflow is set to 'Visible', so content outside the panel is hidden by the frame.

C The panel's width is too small, causing horizontal scrolling instead of vertical.

D The panel has no content inside, so scrolling is disabled.

💡 Hint

Consider how overflow settings affect content visibility inside fixed-size containers.

Setting overflow to 'Scroll' or 'Auto' allows the panel to show scrollbars when content exceeds the visible area, enabling users to scroll and see all content.

❓ data_modeling

advanced

Designing a scrollable KPI list with fixed header in Figma

You want to design a KPI list in Figma where the header row stays fixed at the top while the KPI rows below scroll vertically. Which approach correctly achieves this?

A Set the entire KPI list frame overflow to 'Visible' and rely on page scrolling.

B Place the header and KPI rows inside the same frame with overflow set to 'Scroll'.

C Place the header in a separate frame above a scrollable frame containing KPI rows with overflow set to 'Scroll'.

D Group header and KPI rows and set overflow to 'Hidden' to prevent scrolling.

💡 Hint

Think about how to keep one part fixed while another part scrolls independently.

Separating the header into its own frame above a scrollable KPI rows frame allows the header to stay visible while users scroll through the KPIs.

🎯 Scenario

expert

Optimizing overflow scrolling for accessibility in BI dashboards

You are designing a BI dashboard in Figma with multiple scrollable panels. What is the best practice to ensure keyboard users can navigate all scrollable areas easily?

A Disable keyboard focus on scrollable panels to prevent confusion.

B Make all panels scrollable simultaneously to reduce tab stops.

C Use only mouse scrolling and hide scrollbars to keep the design clean.

D Ensure each scrollable panel is reachable via keyboard tabbing and supports arrow key scrolling inside the panel.

💡 Hint

Consider how keyboard users interact with scrollable content.

Making scrollable panels keyboard focusable and supporting arrow key scrolling ensures accessibility for users who rely on keyboard navigation.