Scrollable Frames
Create scrollable content areas within frames. Set horizontal, vertical, or both directions.
Prototyping
No shortcutIntermediate9 min readQuick Reference
Scrollable Frames
FigmaKeyboard Shortcut
N/A
Toolbar Location
Figma toolbar
Best Used For
- ▸Refer to the tutorial content for specific use cases
- ▸Practice with sample projects to build experience
- ▸Combine with other tools for advanced workflows
Intermediate⏱ 30–60 minutes to master
Key Settings
Enable:Preview:Fixed:
Scrollable Frames let you create areas within your design that can be scrolled independently. This is essential for long lists, chat interfaces, and content feeds.
Where to Find It
Select a frame and find the Overflow Behavior dropdown in the Prototype panel, or in the Design panel under Clip Content.
How to Use
- Enable: Select a frame with overflowing content, set Overflow to Horizontal and/or Vertical scrolling.
- Preview: In prototype mode, users can scroll the content within the frame.
- Fixed: Pin elements like headers using the 'Fix position when scrolling' option in the Prototype panel.
Pro Tips
- Enable 'Clip content' for a clean edge where the scrollable area ends.
- Use nested scrollable frames for complex layouts like a scrollable list inside a scrollable page.