Sketch 100 — Everything new in 3 minutes. Learn more

Skip Navigation

Creating scrolling prototypes

Last updated on 10 Apr 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

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

How to create and customize scrolling areas in your prototype

If you want to change the boundaries that enclose a scrollable group, you can manually adjust them – 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 Forward arrow, then adjust the scrolling area’s boundaries in any direction.

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