Advanced Prototyping with Scrolling Overflow

If you're building complex Prototypes, you may need to use Overflow Behavior.

Overflow Behavior controls how users interact with content beyond the device's dimensions. This helps to make your Prototypes look and feel more authentic.

What is Overflow Behavior

Overflow Behavior applies to content that extends beyond a Frame's bounds.

You can only apply Overflow Behavior to Frames or Groups. We will then apply this behavior to any objects or layers nested within that Frame or Group.

This allows you to scroll down a lengthy page of content, as well as more advanced user interactions:

  • Scroll left-to-right to switch between elements in a Slider
  • Navigate between images, articles or posts in libraries and galleries
  • Pan/scroll around to view an interactive map

In our Prototype, we can scroll left to right to view other categories. We can also scroll down the full length of the page. When we open the event tab we can interact with the map by scrolling in any direction.

Note: You won't need to apply Overflow to Frames that extend beyond the device's dimensions. By default, we allow users to scroll through the full length (or width) of the Frame.

We support three (3) Overflow Behaviors:

  • Vertical Scrolling
  • Horizontal Scrolling
  • Vertical and Horizontal Scrolling

Vertical Scrolling

Allows a user to swipe or scroll Up and Down within the Frame. This allows the user to interact with the Prototype, like they would an actual website or app.

You can use this behavior for scrolling down a long website, or page of content within an app.

Horizontal Scrolling

Allows a user to swipe (or scroll) Left and Right within a particular Frame.

Use this behavior when you want users to be able to browse elements horizontally in the Frame. This allows you to maintain your vertical position while exploring extra content.

This is great when simulating a Product Slider, File Browser, Photo Gallery or Library.

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 behavior when you want to support scrolling to view more content in any direction.

Our interactive Google Maps image allows the user to view more of the map as they move around the Frame.

Apply an Overflow Behavior

To apply Overflow Behavior your Object must:

  • Be a Frame or Group
  • Have content that extend beyond the Frame or Group's bounds
  1. Select a Frame or Group in the canvas.
  2. Open the Prototype tab and find the Overflow Behavior section.
  3. Select the desired behavior using the field provided. You can choose from:
    • None
    • Horizontal Scrolling
    • Vertical Scrolling
    • Horizontal & Vertical Scrolling
  4. View your Prototypes in Presentation View to check out the results!

Note: You can only apply one Overflow Behavior to each Frame. You can apply different Overflow Behaviors to different Frames in a design.

Adjust the Bounds of a Frame

If all your content fits within the Frame, you won't be able to apply Overflow Behavior.

We'll display an error message when you try to apply Overflow behavior to a Frame.

For us to apply the Overflow Behavior, you'll need to adjust the bounds of the Frame.

  1. You can be in either Design or Prototype mode to adjust the Frame's bounds.
  2. Select the Frame you want to update.
  3. Adjust the Frame to the desired height or width.

    Note: Constraints will affect how an object will behaves when you resize the Frame. To ignore Constraints, hold down the Ctrl (Windows) or Command (Mac) key, while resizing.

  4. When you switch back to Prototype mode the warning will no longer appear.

Tip! Want to hide the content that extends beyond the Frame? Check out the Clip Content section below.

Need to update the bounds of a Component?

You can also apply Overflow Behavior to Components. Like regular Frames, some of the Component's content needs to extend beyond its bounds.

To do so, you will need to edit the Master Component.

  1. Select the Instance in the canvas.
  2. Click Go to Master Component in the Properties Panel. We will take you to the Master Component, whether it's in this File or another.
  3. Head to the Prototype tab and update the Overflow Behavior.
  4. Switch to Design mode in the Properties Panel
  5. In the canvas, resize the Frame so that it fits within the Prototype Device's screen. Make sure there is some content that extends beyond the Frame.

Our Video Tutorial below has a great step-by-step example of how to resize a Component's Frame.

Clip Overflow Content

When you have content that appears outside of the Frame's bounds, you can choose if you want to Clip Content.

Clip Content will hide the parts of any objects or layers that extend beyond the Frame. This will only affect what you can see in the canvas, not the underlying content.

This is especially helpful for Frames using Horizontal or Horizontal and Vertical Overflow.

  1. Select the Frame you want to clip.
  2. In the Design panel, check the box next to Clip Content. You can find this at the bottom of the Alignment and Positioning section. 
  3. We will hide any content that extends beyond the bounds of the Frame.

Use Overflow 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.

You can apply Constraints to any Object, Group or Component. This allows you to fix an object in place, while other elements respond to Overflow Behavior.

Image Caption: you may wish to fix a mobile device's status bar, and navigation menu, to the top and bottom of the screen.

You will need to be in Design mode to make changes to an object's Constraints.

  1. Select the Object, Group or Component in the Canvas.
  2. Locate the Constraints settings in the Properties Panel.
  3. Select the relevant Constraints for that element. e.g. A status bar will use Top Constraints and a nav menu Bottom.

    Note: There are some Constraints that won't be available for fixed objects.We will grey these out in the Constraints settings. Check out our Using Constraints article for more information.

  4. Check the box next to Fix position when scrolling

  5. We will move any fixed elements above your other layers in the Layers Panel. You can find them in a section for FIXED objects. It's not possible to move other object above fixed layers.
  6. Repeat the process for any other fixed objects.
  7. We will fix those objects within the device, while allowing the rest of your Prototype to scroll.

Device Frames and Scrolling [►]

Learn more about using Horizontal and Vertical Scrolling in your Prototypes.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.