Scrolling effects enable you to create realistic prototypes that more closely resemble a finished product. For example, with scroll areas you can create app prototypes that mimic lists, a row of cards, or even maps that you can move in any direction. With scrolling Artboards you can increase the height an Artboard template you’re using, which means your prototype will have as much room as it needs to scroll down a long page with lots of content.
Creating scroll areas
You can add horizontal, vertical, or multidirectional scroll areas inside an Artboard to create realistic scrollable UI elements in your prototypes.
First create a Symbol for your scrollable content. Next, make an instance of your Symbol, head to the Prototype tab in the Inspector and click Make Scrollable. Finally, choose whether you want to make the Symbol scroll horizontally, vertically, or in both directions (multidirectional).
When you make a Symbol or group scrollable, we add a special clipping mask to it. This controls the size of the scroll area and which layers are visible before you start scrolling. To adjust the visible scroll area, head back to the Prototype tab in the Inspector and select your scrollable group on the Canvas.
You’ll see a set of scrolling handles on your selection on the left and right for horizontal scrolling, top and bottom for vertical scrolling, and on all four sides for multidirectional scrolling. Click and drag on the handles to adjust your scrolling area’s visible area.
If you find that your group lies beyond the Artboard’s bounds, we recommend that you use a Symbol instance rather than a group.
You can manually adjust the boundaries that enclose a scrollable group, even from edges that don’t have resizing handles. To do so, select your scrollable group or Symbol, open the Prototype tab, click the Select scrollable mask icon , then adjust the scrolling area’s boundaries in any direction.
Note that you currently cannot use an alpha mask to create a scroll area.
Creating scrollable Artboards
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.
Next, 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.
Finally, preview your prototype to see how your resized Artboard and the layers within it scroll inside the viewport.
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.
You can create and add fixed elements to your scrolling prototypes, such as tabs and menu bars.