# Creating scrolling effects > Learn how to create scrollable areas and frames for your Sketch prototypes with the help of our step-by-step guides and video tutorials. **URL:** https://www.sketch.com/docs/prototyping/creating-scrolling-effects/ | **Last updated:** 2026-01-23 --- 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](/docs/interface-and-settings/the-mac-app-interface/the-canvas/#creating-a-template) in the Inspector. Switch to the Prototype tab in the Inspector and choose the scroll direction for your frame. ![A movie showing how to add scrolling direction to a frame](https://cdn.sketch.com/docs/prototyping/scrollable-frame.mp4) 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. ![A movie showing how to set a template as the prototyping viewport of a frame](https://cdn.sketch.com/docs/prototyping/scrolling-frames-template.mp4) > **Note:** 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](/docs/prototyping/creating-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. ![A movie showing how to set up a scroll area](https://cdn.sketch.com/docs/prototyping/scroll-areas-prototype.mp4) > **Note:** When opening older documents, Sketch automatically assigns a scroll direction and viewport.