Join Tom Green for an in-depth discussion in this video Overview of the Prototype mode, part of Adobe XD First Look.
- [Voiceover] As I said at the start of this first look at Adobe Experience Design CC, prototype view's where the magic happens. This is where interactivity and screen transitions are added. It is where you can test your project and you can make any changes to the project based upon the results of your user testing process. Now, creating a prototype is really simple. What you do is you just click on Prototype View, right there and when you do that, the Properties panel disappears over here on the right and you'll notice the only tool left on your toolbar is the Selection tool.
If you take a look at your Main art board here, it's now sporting a little blue icon. This is telling you that this is the first screen the user will see when the app or project is launched. If you want to change the Home screen, what you can do is you just select an art board, click on the icon, and this one now becomes the Home screen. Of course, I don't want to start there. I want to start here, so I'm going to put it back. The other thing you should notice is that if I come over to the side of the art board here, it's not sporting a little blue arrow and it's saying, where do I go? And if you roll the cursor just on top of that arrow you'll notice a little squiggly line.
That little squiggly line is called a wire, and the wire is what links the art boards together. If you click on the arrow, the target dialog box opens up, and from there you can choose the destination art board, so I can choose any of the art boards that are in this project. How I'm going to move, am I going to slide right, slide left, what am I going to do here. How the easing is going to happen. And how long it's going to take to move from one art board to the other.
Now there's an easier way of connecting art boards than clicking on this, what you do is you just click on the arrow, and you drag. And you notice, there's the little wire and it's pointing to where you want it to go. So I want to go to this art board and when I let go, there we go. I am now told how it's going to transition. I'm going to the Xian art board and I don't want to slide right, I want it to slide left. The eases that we have here are fairly standard. If you're unfamiliar with them, they give motion a more natural feel.
Motion is never constant, thus when something starts to move it accelerates, that's an Ease In. As it arrives as it's destination, it slows down, an Ease Out. And if you've got motion happening on one screen at the start and the stop, that's Ease In, Ease Out. Or, if you just want it to pop from one screen to the next, None. The duration, which is right here, is how long the transition lasts. Right now, if I want to move from the Main screen to the Xian screen, it's going to happen in two one hundredths of a sec, or two tenths of a second.
Basically, it's two hundred milliseconds. The pop down allows you to change this number and if the number is not meeting your intention, you can always change it. So for instance, if I want it to last half a second, I can just type in 0.5. Just be aware that if you do add a custom value, anything over one second to a user will feel like an eternity. Now, one of the fundamental rules of navigation is that if you're going to take somebody somewhere you better take them back.
So, we got to give them a path back to the Main by just clicking on the Xian art board and dragging a wire back here and you can see that I've now got two wires. Now, if you want to see the connections to art boards, you just click on an art board and there you go. Now, what happens if you want to remove an art board? Let's just say I don't want this one going back, I want it to go somewhere else. Well, just to remove a wire you just pull it off it's destination and there you go. Now, what I'm going to do is I'm going to put this back and we're going to slide it right, and we'll use that, that's fine, over half a second is fine too.
So, to test your transitions, what you do is you come up to the Preview button right up here and if you click it, the preview panel opens and if I click on this art board, notice. And if I click on this art board, back I come. There's a lot more you can do with this and I'm going to talk about that in the next video. We're going to be connecting interactive elements to each other and various art boards to interactive elements.
- Choosing an artboard style
- Adding content
- Formatting text
- Using shapes and masks
- Creating a repeat grid
- Linking artboards and content
- Testing, sharing, and exporting Experience Design projects