Hey everyone, Howard Pinsky here. Back with another video exploring a few features that you can use to build upon your Photoshop documents in Adobe XD. In the last video, we took a look at some design workflows you can take advantage of, including Repeat Grids, padding, Stacks, assets, Responsive Resize. And today, it's all about bringing your designs to life with prototyping.
So here's the website design we've been working on. And some of you may have noticed, if you press the Play button at the top right-hand corner, you'll be able to launch a preview. And this is where you're going to interact with your prototype once you start building it out. But one thing you may want to do within this window is scroll and that will help you get a better feel for what that website is going to look like on a desktop. Now, if you already have content going down your artboard like we do here, what you're going to want to do is, select the artboard at the top left-hand corner and then over within the Properties Inspector under Scrolling, you're going to switch over from None to Vertical. And by default, it's going to match the viewport height to our artboard height which, right now is 3311. And since the width is 1920 we'll likely want 1080 for the viewport height. And you'll notice we now have a handle over to the left. Anything above this handle and inside of the viewport will be visible immediately. And anything below will be visible upon scroll. And if you need to tweak the viewport height, you can easily pull on the handle like this. And launching the preview one more time, we're now able to see only the content above that viewport handle, but we can now scroll down the website just like this.
Now, continuing our look into scrolling, we have this New and Noteworthy section right here in the middle. And in addition to the vertical scrolling down the artboard, we may also want to scroll horizontally. So I'm going to dive into this group and select the Repeat Grid that we created in the last video. And then back within the Properties Inspector we can enable a horizontal Scroll Group. You can also create vertical Scroll Groups and Scroll Groups that go in both directions. And similar to the viewport, you now have handles on the left and the right to define the window where the content will be visible. And it did a great job at snapping to the left-hand side of this card, but I actually may want to extend this over to the left-hand side of the artboard instead. And now if I press the Play button one more time, we can not only scroll down the artboard vertically, but we can also scroll horizontally using a trackpad or clicking and dragging.
The next feature we're going to explore are hover effects. You might remember in the last video we created a component for the Shop button and that not only allowed us to very quickly create additional buttons, but it also helps us keep our instances up to date. But along with components, you also have the ability to create states, which you can do from the Properties Inspector over to the right. And in this case, we're going to want to create a hover state which, as indicated by the lightning icon over to the right, will automatically be wired up for prototyping.
And now that we've created our new hover state and it's active, as indicated by the blue highlight in the background, we can dive into this component and make some changes. And for this example, we're going to keep it nice and simple. We'll explore a slightly more complicated example in just a moment. And I'm simply going to shift the color down a little bit. And with that, we now have our hover state and we have our default state. And because hover states are wired up by default, if I hit that Play button at the top, I can now hover over top of this button and it transitions beautifully. Let's do a slightly more complicated example. Here at the top, right beside our search field, we have a filters icon. And what I may want to happen in this case is, when someone hovers over top of it, these sliders move. This icon is currently not a component. I'm going to go ahead and press that Plus button within the Properties Inspector and then I'm going to press it one more time to create a hover state, just like we did a moment ago. Now this time, since I want these sliders to move, I'm going to dive into this group, move this one down, move this one up a touch, and move this one down as well. And pressing Escape, we'll go back to the parent of that component. Now I can go to my default state and my hover state. And just like with the button, I can press the Play button at the top. And we now have a button that hovers and we also have our filters icon.
Now, in addition to scrolling and micro-interactions, you may also want to use prototyping to navigate, not only on the same artboard, but to other artboards as well. Towards the top of this design we have this bar containing a few categories. And what we might want to happen is, when one of them is clicked on, it will actually take us down here to the bottom of this artboard. So what we're going to want to do is, switch over to Prototype mode right here at the top left-hand corner. And this will allow us to select the object that we want to trigger the interaction. In this case, we're going to use this icon right over here to transition us down to home office. And you're going to notice, when you have an object selected in Prototype mode, there's a blue handle over to the right. This will allow us to drag down to this group at the bottom. And when you drag to an object on the same artboard, it creates an anchor link. And you'll notice in the Properties Inspector we have our Type set to Scroll To. And currently the Y offset is set to 0. So it's going to scroll right to the top of this particular group. Now, if you want to adjust that, you can either do that directly in the Properties Inspector or just pull on the handle over to the left. Let's go ahead and set up one more. I'm going to select this Outdoors icon and drag it all the way to the bottom. Now, you're going to notice because this Outdoor Living group is inside of a larger group, it doesn't allow me to drag directly to this group only. So what I'll do is, I'll leave it on this overall group and then grab the Y offset to the left and drag it on down. And with those set up we can now press the Play button at the top. We can click on Decor. And then we can scroll back up and click on Outdoors.
Now, finally, we have this other artboard over to the right that I started working on. And I may want to transition to this screen when this Explore ideas button is tapped on. So, still within Prototype mode, I'm going to dive into this group, grab this handle, and then drag it on over to this artboard here. And then, within the Properties Inspector over to the right, you can start defining your interaction. For the trigger, we're going to keep it at Tap. And the Type we're going to stick with Transition. As you continue to explore the world of prototyping, you'll go over Auto-Animate, overlays, and audio and speech playback. And then, for this example, I'm not too concerned about any animation. So I'll set that at None. Now finally, one more time, we can hit the Play button at the top. We have our micro-interactions. We can scroll down our artboard horizontally and vertically. And now we can tap on Explore Ideas to go to the next screen.
And those are just a few prototyping features in Adobe XD you can take advantage of to bring your designs to life. Thanks so much for watching everyone. And I'll see you all in the next video.
Bring your Photoshop designs to life with the prototyping features in Adobe XD. In this tutorial, you’ll learn how to set up Scroll Groups to simulate the experience of scrolling down a webpage in a browser. Enable Scroll Groups for a Repeat Grid to add vertical or horizontal scrolling, or enable scrolling in both directions. Add hover effects to buttons by adding a component and setting up states. Make anchor links that jump down to a new section of a long layout. Set up buttons that move to different artboards so that when you tap, your prototype jumps to the next screen.