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.
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.
Make sure you set the viewport to custom in the Prototype tab in the Inspector. If you try to use a custom frame without defining the viewport, your prototype won’t scroll in the app, on the web app and in the iOS app.
You can create and add fixed elements to your scrolling prototypes, such as tabs and menu bars.
Creating scroll areas
You can insert a frame and resize it to match your desired scroll area. Then, set the scroll direction in the Inspector. Nested frames automatically scroll when their content extends beyond their visible area.
When opening older documents, the app will assign scroll direction and viewport automatically.
