For that, I'm going to click right there on that close box. If I hit the close box, I want it to take me back to the previous artboard. This behaves a bit like a lightbox where it will come into view. For that, I'd like them to in essence to be able to click on this close box. Next, I'd like to define a way that the viewer can go from this second artboard back to the first, just for the purpose of my prototype right now. You're welcome to play with these values if you'd like, just to experiment a little bit. For Easing, I'll stick with Easing In and Out for a Duration of. Under Animation, it's grayed out because it doesn't relate when I'm using a Tap gesture. That's nice when you have many, many artboards and don't want to be dragging a wire across the entire canvas. I could change to any other artboard in the project by clicking on this drop-down. Under Type, I'm going to stay with Transition. I'm going to go with the defaults for now, just so you can see the basics, and we'll expand from there. And I can now come in and set my interaction attributes here. So I'll roll over it and then click to make sure it's blue or active. This wire is currently disabled or not active. I can come in and click on the title of the first artboard and when I do so, I can see any wires that might have been defined for the artboard. If I were to click off on the design canvas, you can no longer see it. Now let's say I made a mistake and I accidentally deselected the wire. It's only when you're clicking within that artboard to go forward that you define basically areas within the artboard as a hot spot or a trigger area. There's really only one door into an artboard. What I want to do is come to the second artboard, and I can tell when I have it selected, because it gets a blue highlight. I can go in any direction with this wire - the canvas will actually scroll if I get to the edges of the canvas. With it selected, I'm going to come to that arrow there on the right-hand side and press and drag my wire. I also could come here in the Layers panel and directly select the group called Product Sheru. I can tell that it's the only thing selected because I get a blue highlight with the arrow to the right. So for that, I'm going to click a second time, which will tunnel me into the hierarchy and allow me to select just that tile.

I want them to specifically click on a product area. I don't want the user to click anywhere on the artboard. If I were to click on the title of the artboard, notice that the entire artboard turns blue, and to the right of that artboard, I can see the ability to define a wire. To do that, I want to come in and select the area that I want to let the user click in. What I want to do in this first step is implement the simplest of a wireframe flow, basically connecting this artboard to the second by allowing the user to click on this tile to get a detailed view of the chair. Here on the design canvas, I'm going to hold down the spacebar to bring up the Hand tool and press and drag so that I can see these two primary artboards a bit more clearly on the design canvas.

I did that by clicking on the second icon from the lower left-hand corner of the app. I also want to make sure I have the Layers panel open. To do that, here in the upper left-hand corner, I'm going to change modes from Design to Prototype. I want to make sure that I'm in Prototype mode. If you're following along with me, you'll want to have Step 0: Wire artboards in the practice file visible on the design canvas. In this first step, let's define some interactions between artboards.

Adobe xd tutorial series