With scrolling effects, you can build prototypes that feel closer to a finished product. For example, you can prototype scrolling lists, a row of cards, or even maps that move in any direction.
Creating scrollable frames
Press F to draw a frame or select a Frame Templates in the Inspector.
Switch to the Prototype tab in the Inspector and choose the scroll direction for your frame.
Once you enable scrolling on a top-level frame, you can set it to:
- Frame: The viewport matches the frame’s size, and any content beyond its bounds becomes scrollable. This is the default.
- Custom: Set a custom scroll viewport size (or use a template), and any taller or wider frame will scroll within it.
Using a custom frame without defining the viewport will prevent scrolling in the app, web app, and iOS app.
You can create and add fixed elements to your scrolling prototypes, such as tabs and menu bars.
Creating scroll areas
Insert a frame and resize it to define the scroll area, then choose a scroll direction in the Inspector. Nested frames will scroll automatically when their content extends beyond the visible area.
When opening older documents, Sketch automatically assigns a scroll direction and viewport.
