Learn how to prototype in Adobe XD by adding interactions that transition to different screens and back.
- [Voiceover] Now that most of my screens are laid out, here comes the fun part, which is prototyping because you can start to see this app come to life. And all you need to do it select prototype right up here in the upper-left. And now we can start linking these screens together. First off, notice as I select any one of these titles I get a couple things, and if I zoom in on this... This little icon right here, I can say, "Hey, you know what, "let's make this the start screen," so that's what I'm doing there by selecting that.
And notice as you select anything when you're in the prototyping section, you'll get basically a blue highlight and then this little tag that sticks out. And essentially what we're gonna do is we're gonna select this button right here, and this little tag will allow us to point this button to another screen. So I can just click and drag, point this to any screen that I want, but I'll point it to this second one, this main screen just like that. You'll get this popup that says, "Hey you know what?" The target is the main screen, it's gonna slide to the left.
So from the right to left. Which is cool, and there's easing. Let's take a look at this because there's more segways, or transitions, in here as well. Slide left, slide right, slide up, slide down, and dissolve. In this case I actually just wanna dissolve it. So it's gonna dissolve into this first screen at a certain duration, .2 seconds works out well, I like how fast it is. And the easing, it will determine that it's actually gonna slow down and rest into place if it's set to ease out.
So that works for me, I'm gonna leave basically these two the way they are and the next thing I'm gonna do is connect this button right here. So selecting it, click and then drag it back to that first screen just like that. And in this case, again, the same thing, dissolve, it will keep your last setting, so really I don't need to do anything here. So let's watch this work now that it's prototyped between two screens, basically. Right up here I can click this preview button.
So here it is. Here is my app prototype, I can click on this button and we'll see that nice transition, that dissolve, click back and easy enough. Now let's hook up these other ones like this button here. Let's do that right now. Even though this does happen to be a repeat grid, I can just double-click and dig into that specific button. And I'll just zoom out a touch because I need to be able to see all these screens. And now I can point this one clear down here to this screen here.
And at this point, I don't wanna dissolve it, I actually would like to do a nice slide. So it's gonna slide left, it's gonna slide in from right to left. And that will be good. Taking this back button, I'm gonna have it point back to that main screen and then it's gonna slide right. So that's what you're gonna do there. And it's really repeating that process and you'll start to see these lines build out. So I'll just drag this down and I'll change this to slide left, but now with this set up I can start doing that for each one, selecting it, dragging it, it's gonna default to the last setting which is slide left which is good.
So it makes this really quick when prototyping. Just dragging that down, selecting the one you want. You can start to see all these lines being built out very easily just like that. Let's do these back buttons, because it will be, again, pretty quick. Just dragging that up, just like that, slide right. It's that easy, I encourage you to also play with the easing to see what works for you, but in essence, I like ease out because it feels more responsive because it starts out really fast and then eases into place.
So we'll do two more of these, just like that. This last one, just like that. And if you ever mess up and don't want it connected, you could just pull it off. Just grab it and pull it off just like that, and reconnect it to whatever you want. But, with that done, now that I have all of these seven, eight, nine screens set up, I can click play. Start to preview this, that nice dissolve going into the Great Pyramid of Giza.
Works... As... Expected. Okay so prototyping done very easily, using Adobe XD, as I start to click through all of these, I get a clear vision of how this app will work
Learn how to lay out a screen design with graphics and text and import vector and raster images. See how easy it is to create complex screen designs, complete with repeated lists and grids that are as simple to change as they are to create. This goes for any mobile screen type: iOS or Android, tablet or smartphone. Once the design is done, author Paul Trani shows how to add interactions and transitions to see how the app will "work" from one screen to the next. The end result is a full-featured prototype that can be shared with designers, developers, and clients, and broken down and exported as assets for use in development.
- Creating your first Adobe XD project
- Working with graphics and text in Adobe XD
- Importing assets
- Building additional screens for different display sizes and platforms
- Creating UI elements
- Using Repeat Grid for easy prototyping of lists and recurring elements
- Adding interactions to elements
- Creating transitions between screens
- Publishing and sharing a prototype
- Exporting artboards and assets