How to Create Scroll Prototype in Figma Quickly

To create a scroll prototype in Figma, design a frame with content larger than the frame size, then set the frame's overflow behavior to Vertical Scrolling in the Prototype tab. Finally, connect frames and preview the prototype to see the scroll effect.

Syntax

In Figma, the scroll prototype setup involves these key parts:

• Frame: The container where your content lives.
• Content size: The content inside the frame must be larger than the frame to enable scrolling.
• Overflow behavior: Set in the Prototype tab, choose Vertical Scrolling, Horizontal Scrolling, or Vertical and Horizontal Scrolling.
• Prototype connection: Link frames or set starting frame for preview.

css

Frame {
  width: fixed;
  height: fixed;
  content-height: larger than frame height;
  overflow-behavior: Vertical Scrolling;
}

Output

A frame with scrollable vertical content area in prototype preview.

Example

This example shows how to create a vertical scroll prototype in Figma:

1. Create a frame sized 375x600 pixels.
2. Add content inside the frame that is 375x1200 pixels tall.
3. Select the frame, go to the Prototype tab, and set Overflow Behavior to Vertical Scrolling.
4. Set this frame as the starting frame in the prototype.
5. Click Present to preview and scroll vertically.

text

1. Frame size: 375x600 px
2. Content inside frame: 375x1200 px
3. Prototype tab > Overflow Behavior: Vertical Scrolling
4. Set frame as start frame
5. Present prototype to test scrolling

Output

Prototype preview shows a 375x600 frame with vertical scroll bar allowing scrolling through 1200 px content.

Common Pitfalls

Common mistakes when creating scroll prototypes in Figma include:

• Not making content larger than the frame, so no scroll appears.
• Forgetting to set the Overflow Behavior in the Prototype tab.
• Using Auto Layout incorrectly, which can collapse content size.
• Setting the wrong frame as the start frame in prototype preview.

Always double-check content size and prototype settings.

css

/* Wrong: Content same size as frame, no scrolling */
Frame {
  width: 375px;
  height: 600px;
  content-height: 600px;
  overflow-behavior: Vertical Scrolling;
}

/* Right: Content taller than frame enables scrolling */
Frame {
  width: 375px;
  height: 600px;
  content-height: 1200px;
  overflow-behavior: Vertical Scrolling;
}

Output

Only the second frame setup allows vertical scrolling in prototype preview.

Quick Reference

Step	Action	Details
1	Create Frame	Set fixed width and height for viewport
2	Add Content	Make content larger than frame for scroll
3	Set Overflow	In Prototype tab, choose Vertical/Horizontal Scrolling
4	Set Start Frame	Choose frame as prototype start point
5	Preview	Click Present and test scrolling

Key Takeaways

Make content larger than the frame to enable scrolling.

Set Overflow Behavior to Vertical or Horizontal Scrolling in Prototype tab.

Always set the correct start frame for prototype preview.

Check Auto Layout settings to avoid content collapsing.

Preview prototype to confirm scroll works as expected.