Adobe Creative Cloud All-in-One For Dummies, 2nd Edition
Book image
Explore Book Buy On Amazon
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:

  1. Select the Ellipse tool and click and drag to add a circle to your artboard.
  2. 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.

    scrolling Adobe XD Add content that extends beyond the viewing area so that you can see how to implement scrolling.
  3. Now, select the artboard either by clicking on the artboard name or by Ctrl-clicking (Windows) or ⌘-clicking (Mac) on the artboard.
  4. Make sure that Scrolling is selected in the Scrolling section of the Properties Inspector. Note the value in the Viewport Height.
  5. 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.

  6. 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.
Now that you are familiar with the basics of creating and organizing artboards, you are ready to start putting more content on those screens.

About This Article

This article is from the book:

About the book authors:

Jennifer Smith is a user experience consultant, designer, educator, mentor, and author of more than a dozen books on digital imaging and web publishing. She has advised numerous companies on design projects and works on various platforms and devices. Christopher Smith is president of the American Graphics Institute. He is the author of more than ten books on web, interactive, and print publishing technology, including many of the Adobe official training guides.

This article can be found in the category: