There are many times that you want to show items scrolling in your Adobe XD prototype. You can simulate scrolling by changing the size of the artboard while keeping something called the View Point at the original artboard size. If you were following along earlier, you can use any of the artboards you have created, or create a new file with an artboard of any size.
You will first need to create content that extends beyond your screen area. For this, you add some easy shapes:
- Select the Ellipse tool and click and drag to add a circle to your artboard.
- Choose the Selection tool. Hold down the Alt (Windows) or Option (Mac) key and drag the circle down to clone it. Repeat this as many times as you need to in order to have content positioned outside the default template size.
Add content that extends beyond the viewing area so that you can see how to implement scrolling. - Now, select the artboard either by clicking on the artboard name or by Ctrl-clicking (Windows) or ⌘-clicking (Mac) on the artboard.
- Make sure that Scrolling is selected in the Scrolling section of the Properties Inspector. Note the value in the Viewport Height.
- Click and drag the bottom-middle handle. This extends the artboard, but if you used a default template you should see a dotted guide where the artboard used to end. If you do not see this dotted guide, see the following note.
If you are using a default template, the Viewport Height value will not change when you click and drag to make your artboard longer. If Viewport Height does change, you more than likely created your artboard with custom values. No worries; just type back in the original height into the view box control after you extend your artboard.
- Now you can test the scrolling by clicking on the Desktop Preview play button in the upper right of your workspace. Note that when the preview appears that you can scroll through your content.
