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.
To create a prototype that will scroll vertically when you preview it:
- Start by opening Insert
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. - 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
- Preview
your prototype to see how your resized Artboard and the layers within it scroll inside the viewport - 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.
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.