In our previous video, I showed you How to Create a Button Hover Effect in Adobe XD. Today, I’m going to show you How to Create a Vertical Scrolling Effect with your prototype. Using this method, you can simulate the realism of scrolling on a mobile device or a desktop website that has a single page.
Getting Started in Adobe XD
You can see your prototype in action by clicking the play button in the top right corner. Use your mouse to scroll up and down. You can’t can you? You may have noticed that it is one long screen. But that wasn’t what you wanted, was it?
Let’s use the sample design that I have on hand. Select the artboard by clicking on the artboard’s name with either the Select Tool or Artboard Tool. On the right-hand side, you will see the scrolling section. It may say None, and if so change this to be Vertical. Right below that is the viewpoint height. Depending on what you have or are using, mine is set at the height of my artboard. Change the height. This is more accurate as you can change the viewpoint for each artboard if it’s longer than normal.
Or if you prefer to be more handsy, you can also extend the artboard a bit, and move the blue icon to the height that you want (the viewport) to be. And then move the artboard back up again. Again, I prefer changing the viewpoint height by entering the height to prevent any hiccups during the prototype play session or forgetting to move the artboard up too.
Testing the Prototype in Adobe XD
Let’s put this to the test. If you click on the play button in the top right corner of your prototype, you can see it in action. Take your mouse and scroll down and up. There you go, you have created a vertical scrolling effect for your prototype.
I hope you find this tutorial helpful.