Skip Navigation

Creating scrolling prototypes

Last updated on 05 Mar 2024
2 min read

Scrolling Prototypes enable you to create realistic prototypes that more closely resemble a finished product. For example, you can create app prototypes that mimic scrolling lists.

Creating scrolling Artboards

Watch lesson

To create a prototype that will scroll vertically when you preview it:

  1. Start by opening Insert Create in the Toolbar and selecting a Template for your fixed window that your prototype will show in the viewport. Alternatively, create your own Artboard Templates to use as a scrolling Artboard.
  2. Increase the height of your Artboard template (its preset dimensions in the Inspector will show an asterisk * to indicate that you’ve resized it) and add extra layers that will scroll within the viewport
  3. Preview Preview your prototype to see how your resized Artboard and the layers within it scroll inside the viewport
  4. You can create and add fixed elements to your scrolling prototypes, such as tabs and menu bars

Make sure you use an Artboard template to create scrolling Artboards. If you try to use a custom Artboard, your prototype won’t scroll in the app, on the web app and in the iOS app. Also, keep in mind that scrolling Artboards only works with vertical layouts.

An image showing the steps to create a vertically scrolling prototype

Steps to create a vertically scrolling prototype

Creating scrolling areas

Scrolling areas are currently in beta.

You can create horizontal, vertical, or multidirectional scrolling areas inside an Artboard to create realistic scrollable UI elements in your prototypes.

To create a scrolling area, select one or more layers (or an existing group of layers), head to the Prototype tab in the Inspector and click Make Scrollable. You don’t need to manually group your layers — if they’re not already in a group, we’ll do that for you. Now, choose whether you want to make the group scroll horizontally, vertically, or in both directions (multidirectional).

When you make a group scrollable, we add a special clipping mask to that group. This controls the size of the scrollable area and which layers are visible before you start scrolling. To adjust this visible area, make sure the Prototype tab is selected in the Inspector and select your group. You’ll see a set of scrolling handles at the left and right (for horizontal scrolling) or top and bottom (for horizontal scrolling) sides of the selection. Click and drag on these handles to adjust your scrolling area’s visible area.

How to create and customize scrolling areas in your prototype

Note that you currently cannot use an alpha masks to create a scrollable area.