Advanced Prototyping with Scrolling Overflow
If you're building more complex or higher fidelity Prototypes, then you will likely need to use Scrolling Overflow.
This allows you to simulate more advanced user interactions; like navigating carousels, photo galleries and libraries, or interactive maps. As well as simply allowing a user to scroll down a lengthy page of content.
In this article, we'll take you through using Scrolling Overflow in your Prototypes.
- What is Scrolling Overflow?
- Applying an Overflow Behavior:
- Adjusting a Frame's Bounds.
- Working with Fixed Objects.
1 | What is Scrolling Overflow?
Scrolling Overflow allows you to determine how you would like a user to be able to view content that extends beyond the device's screen.
Scrolling Overflow only applies to content that extends beyond a Frame's bounds.
This allows you to mimic common interactions you'd encounter on digital interfaces, making your prototypes look and feel even more authentic.
Here's a couple of ways you can use Scrolling Overflow:
- Scroll down a lengthy page of content.
- Scroll left-to-right to switch between elements in a Slider.
- Pan/scroll around to view an interactive map.
Note: If the Frame itself extends beyond the dimensions of the Device, then users will be able to scroll within the device to view the rest of the Frame. You won't need to apply a Scrolling Overflow Behavior to support this.
2 | Applying an Overflow Behavior
Scrolling Overflow can only be applied to Frames or Groups. This will then affect any nested objects or layers, within that Frame/Group.
When you have a suitable Frame or Group selected (i.e. a Frame with content that extends beyond the bounds of the Frame), you can select the desired Overflow Behavior in the Prototyping tab:
- Horizontal Scrolling
- Vertical Scrolling
- Horizontal and Vertical Scrolling
Tip! You can only apply one Overflow Behavior to each Frame. However, you can apply different Overflow Behaviors to multiple Frames or Groups within a design.
Allows a user to swipe (or scroll) Left and Right within a particular Frame.
Use this Overflow Behavior for scenarios where you would like a user to be able to browse between multiple elements within the Frame. This is particularly handy when you want the user to maintain their current vertical position on the page, but explore additional content by scrolling left and right.
This is great when simulating a Product Slider, File Browser, Photo Gallery or Library.
Allows a user to swipe (or scroll) Up and Down within the Frame.
Use this Overflow Behavior when you want to simulate someone scrolling down a long website, or page of content within an app.
This allows the user to intuitively interact with the Prototype, like they would normally would with an actual website or app.
Horizontal and Vertical Scrolling
Allows a user to swipe (or scroll) both Left or Right, and Up or Down within a particular Frame.
Use this Overflow Behavior when you want to replicate a user scrolling in any direction to view more of the content within a Frame.
A perfect example of this is an interactive Google Maps image, which allows the user to view more of the map while scrolling.
When you have content that appears outside of the Frame's bounds, you can choose whether or not you want to Clip Content.
Once you have selected the Frame, you can enable this from the Design tab in the Properties Panel.
The Clip Content setting can be found at the bottom of the Alignment and Positioning section:
If this is checked, then you will only see the portion of the content that is within the Frame's bounds.
This won't affect the underlying content, just what you can see when you look at the design in the canvas - essentially, this works just like a Mask!
Learn more about how Masks work in our Using Masks article.
This is especially helpful for Frames with Horizontal or Horizontal and Vertical Overflow applied. But less useful for Frames with only Vertical Overflow applied.
3 | Adjusting a Frame's Bounds
When selecting an Overflow Behavior, you may get a warning message that your content isn't bigger than, or extending out of, the frame's bounds:
For the Overflow Behavior to apply, you'll need to amend the bounds of the selected Frame. You can be in either Design or Prototype mode to adjust the Frame's bounds.
- Select the Frame you want to update.
- Adjust the Frame to the desired height or width.
Note: Constraints will affect how an object will behave when the Frame is resized. To ignore any existing Constraints, hold down the Ctrl (Windows) or Command (Mac) key, while resizing. Learn more in our Using Constraints article.
- To Clip Content (see above), switch to Design mode.
- Check the box next to Clip Content in the Properties Panel.
When you switch back to Prototype mode the warning will no longer appear.
Need to update the bounds of a Component?
As Components are essentially Frames, it is possible to apply Overflow Behavior to Components.
Like regular Frames, you will need to ensure that some of the Component's content extends beyond its bounds.
To do so, you will need to edit the Master Component.
- Select the Instance.
- Click Go to Master Component to find the original component in the file:
- Head to the Prototype tab and set the Overflow Behaviour.
- Resize the Frame so that it fits within the Prototype Device's screen, while leaving some of the content outside.
The Figma Tutorial below has a great step-by-step example of how to resize a Component's Frame.
4 | Working with Fixed Objects
To build even more functional and realistic prototypes, you may wish to keep some elements in the design in a fixed position.
For example: you may wish to fix a mobile device's status bar, and navigation menu, to the top and bottom of the screen.
By applying Constraints to an Object, Group or Component, you can ensure it stays put, while other elements of your Prototype respond to Scrolling Overflow Behavior.
Check out our Using Constraints article for more information on working with Constraints.
You will need to be in Design mode to make changes to an object's Constraints.
- Select the Object, Group or Component in the Canvas.
- Locate the Constraints settings in the Properties Panel.
- Select the relevant Constraints for that element.
For a status bar, this would be fixed to the Top. Whereas a navigation menu may be constrained to the Bottom.
Note: There are some Constraints that won't be available for fixed objects; these will appear as greyed out in the Constraints settings.
- Check the box next to Fix position when scrolling.
- Repeat the process for any other relevant elements.
Those objects will then remain in place, while other elements of your design are scrollable.
Any fixed elements will automatically be moved above your other layers in the Layers Panel, to a section specifically for Fixed Objects.
Fixed objects will appear over the top of your design and can't be ordered below other layers.
Check out the video below for a detailed example of how you can use both Horizontal and Vertical Scrolling in your Prototypes.