Learn how to prototype in Adobe XD by adding interactions that transition to different screens and back.
- [Instructor] Now that most of my screens are laid out I want to dive into prototyping, linking all these screens together with fancy transitions and buttons, it's the fun part, and that's what I want to do right now. In fact right up here, go into prototype, I'm now in prototyping mode, and you can close these side panels, it gives you a little bit more room as we start to work on this and I'm going to start right here on this splash screen. So I'm going to zoom in here. First off, how do I know that it's the splash screen? How can I define it as the starting point? Well, if you select the title, you'll see right over here this home button, selecting that, that flags that as the first screen.
Now what I can do is select this button, cause this is where you're going to start, clicking here, it's going to dissolve into this second screen, so click and drag on that tag and point it to that iPhone main screen. So it says iPhone main and then you have a number of transitions you can work with. So I actually want to select dissolve, it's going to dissolve easily using ease out over the point of 0.4 seconds, and that's what's going to happen, in fact, I want to make sure I can go back to that original screen.
Selecting that back button, pointing back to that original screen, it's going to sort of default to your last used transition, which is dissolve, just like that. Okay, so that's set up, let's zoom out a little bit because I want to point to these other screens right down here. So I could do this even by using this repeat grid, so if I double click, I can select Africa, so now I can point down to this Africa screen, just like that. So it has remember my transition, which is dissolve, when in fact what I want to do is I think it'd be cool if we did a push left, okay.
So selecting push left, it's going to push this screen to the left and reveal this one. Now when it comes to going back, what I can do is I can select that button and I can point back like I was doing before and reverse that, but what you could also do is if you just click on that tag and change the target to previous art board, this is what you want to do for most of your back buttons, so previous art board selected, and notice it's going to target the previous art board and reverse the last used transition.
Perfect, that saves so much time. That's exactly what I want to happen. So I do that for a number of these screens, just pointing, and what I'll do is I'll just connect all of these going to these screens first because it's going to default to push left, China done, Europe done, India done, oh wait. I can't see the different items to point to these other screens. Well, I need to fix that. So I'm going to go back to design view and if I take a look, if I select main, I want to adjust the scrolling height, okay, so the vertical height is what I want to change, so if I select this main, I can grab the bottom portion right down here and expand this out.
I'll expand it out to right there, cause I actually need to expand out this repeat grid and I need to make sure United States is being shown, okay. So clicking right here, making sure United States is shown, adjust like that, and that looks pretty good, but that's getting a little long. I can always select these different screens like that, maybe deselect that one, let's actually just click on each one of these if I could, just by holding down the shift key, making sure I have room, let's kind of take that, I could easily kind of move that over if I want to.
Key thing is is like kind of getting this laid out appropriately cause you want to make sure you have room and everything kind of fits in nice and neat. So that's what we'll do, something like that, and when I go back into prototype, I'll a command + A, which is a select all, we can start to see how those are being mapped out, that looks pretty good. Now I can dive in and Russia needs to be connected, let's point to that screen just like that, South America, you guessed it.
And then United States. And I do find myself actually moving these screens around a lot just because as you start to connect things and expand them and all that good stuff, you might need to orient these different ways, so this is roughly what I have so far, something kind of like this, making sure I have enough room and once I start working on, say, the tablet versions, that'll be a whole second area. Another way of doing this is I can select all these screens and kind of move them down here, and when I do that, and let's move these over here.
But when I do that and I do a select all, I can see that everything is connected. When things are on one solid line, these prototyping links tend to get a little blurry, these blue lines, but this looks pretty good, I can make sure everything is connected just by visually looking at it, but what I need to do now is make sure everything goes back so that's going to be selecting this button right here. Okay, making sure it goes back, that looks good. Same thing for this one, previous art board, right. It gives me that little arrow, okay, so I just want to visually make sure that's all squared away, which is why I'm linking these back up.
This is nice, then again this is within one app. I can do my designing and my prototyping basically in one area and once I have this done, I can also preview this right on my desktop to make sure everything is working. Just like that, previous art board, alright, fantastic. Command + 0 will fit everything within my screen, that looks pretty good, Command + A or Control + A if you're on a PC will allow me to select everything, and now let's go ahead and preview it upper right-hand corner, desktop preview, clicking that button, and now I can see it right here.
So let's click eat, should see a dissolve. Yep, dissolve back. Let's go back into it. Let's actually scroll down, can see all of our different options, select Africa. Let's go back to previous screen, and now we can test this Australia, China looks good, Europe, India, scrolling down to Russia, South America, and then United States.
Okay, so I'm just prototyping, there's plenty more countries that need to be added, trust me, but this is just a starting point, and I get a pretty clear vision of how this app will ultimately work to just work out all the scenarios to make sure I'm not going to run into any issues as we go into development.
- Building multiple screens of different sizes
- Creating graphics and text in Adobe XD
- Importing graphics
- Using a repeat grid for easy prototyping of lists and recurring elements
- Adding interactions to elements
- Creating transitions between screens
- Sharing and getting feedback
- Exporting artboards and assets