To make a Figma prototype scroll, you need to configure the Overflow setting for the specific frame you want to enable scrolling within the Prototype tab.
Creating scrollable areas in your Figma prototype is essential for simulating real-world user interfaces, such as long web pages, vertical feeds, or horizontal carousels. This feature allows you to design content that extends beyond the initial frame boundaries and becomes accessible through scrolling.
Here are the steps to make a frame scrollable in Figma:
- Select the Frame: Click on the frame in your design canvas that contains the content you want to scroll. This could be a screen, a section, or even a smaller frame intended to be a scrollable container.
- Open the Prototype Tab: In the right-hand properties panel, switch from the "Design" tab to the Prototype tab. This tab is dedicated to setting up interactions and prototype behaviors.
- Configure Scroll Behavior: Look for the Scroll behavior section within the Prototype tab.
- Choose Overflow Option: In the Scroll behavior section, locate the Overflow dropdown menu. Click on it and select one of the following options based on your design needs:
- No scrolling: (Default) Content outside the frame boundaries is hidden.
- Horizontal: Allows scrolling sideways to view content extending beyond the left and right edges of the frame. Useful for carousels, galleries, or timelines.
- Vertical: Allows scrolling up and down to view content extending beyond the top and bottom edges of the frame. Ideal for simulating web pages, articles, or social media feeds.
- Both directions: Allows scrolling both horizontally and vertically. Useful for large maps, canvases, or complex dashboards where users might pan in any direction.
Once you've set the Overflow property, view your prototype in presentation mode, and you will be able to interact with the scrollable content within that specific frame.
Understanding Scroll Behavior Options
Choosing the correct scroll behavior depends entirely on the user experience you are trying to simulate.
- Vertical Scrolling Example: A common use case is a mobile app feed. You would place all the feed content (posts, ads, etc.) within a single frame that is taller than the device screen size, then set its Overflow to Vertical.
- Horizontal Scrolling Example: Designing a product gallery section on an e-commerce page is a good example. You might create a horizontal list of product cards within a frame, set the frame's Overflow to Horizontal, allowing users to swipe through the cards.
- Both Directions Scrolling Example: Think of a large map interface. The entire map image or components would be placed within a frame, and setting its Overflow to Both directions enables users to pan around the map.
Here's a quick summary of the options:
| Overflow Option | Description | Common Use Cases |
|---|---|---|
| No scrolling | Content outside frame is hidden. | Fixed headers/footers, non-scrollable sections. |
| Horizontal | Scrolls left/right. | Carousels, galleries, timelines. |
| Vertical | Scrolls up/down. | Web pages, articles, feeds, lists. |
| Both directions | Scrolls left/right and up/down. | Maps, large canvases, free-form layouts. |
By applying the correct Overflow setting to your frames, you can create realistic and interactive prototypes that effectively communicate the intended user flow and design.
