2.3 Using Multiple Interactions on One Element

Welcome back to the course, in this lesson, you'll learn how to add multiple interactions to a single element in Adobe XD. Now, this was not always the case with prototyping in XD, until recently you could only add single interaction per element. This was recently changed though, and now you can add as many as you want, provided you have triggers for them, so let's take a look at an example and see how it works. This is the prototype we'll be creating in this lesson, so you'll notice that on this element, I have two interactions. I have a drag interaction that allows me to scroll this horizontal group, and I also have a tap interaction that opens up In this new artboard. And this is actually pretty simple to create, so let's get started, we're gonna start right here, so I'm gonna move this down. And let's start by cleaning things up a little bit here, so this is the content, I'm just gonna Ungroup that. Sections this is another grid, so I'm going to Ungroup that as well, so now we have the section for sushi, let's call this burgers, soup, and sushi. And I'm doing this because I don't want to be any conflicts in naming when we auto animate. So we have sushi. And then we have all of these cards here. And actually what I'm gonna do here is I'm gonna go into each one of these cards, and I'm gonna unlink these elements, or unlink, the component. And I'm just gonna do that on these first elements, and then I'm gonna target this bg. I'm gonna call it sushi picture, and I'm doing that because we need to expand this picture in the next art board and it needs to have the exact same name for auto animate to work properly. So now let's go ahead and create this first interaction, the drag, so select this art board, Command D, and then just select the sushi slider and just move it something like this. So then let's go to prototype, select this first card, link it to the second art board, drag for trigger, auto animate for action, easing none. And I'm actually gonna select the second one from the second art board and link it back, so now we should have something like this. A nice drag interaction. Now, I also want to be able to click on this element and open up the third art board, which looks something like this. So to make that happen, let's go ahead and duplicate this art board like so, and we're gonna select these two elements. Set the opacity to zero and then from this artboard we just need the picture and title. So I'm gonna select nearby, opacity zero, I'm gonna select this, this, that's opacity zero. Also this, also this background, sushi, let's also reduce its opacity, and now I can take this image, I can move it to like, so to make it bigger. This needs to be 340 pixels so that it matches the height of the image that we're trying to create. Let's grab this sushi place text and actually, you know what? Let's copy this one, so Command C and Command V, or Ctrl C and Ctrl V for on Windows. Let's put that over there, and now if we do a quick test, I'm gonna select this element and notice we have a plus sign here. That's telling us that we can add another interaction, or we can click this plus sign right here. So just click drag to the artboard, auto animate the trigger will be Tap, and easing we can just go ease in and out over 0.8 seconds. So let's see if this works, I still have the drag interaction available to me but as soon as I click this it's gonna open up in the new artboard. Let's also add a small interaction on the settlement right here. This needs to basically go back, and let's see about the other elements we need to add the reviews and also the description here. So let's copy or let's actually first group these two up. We'll call them reviews and let's select this, this, and these two group them up as Description. And let's go ahead and copy these two, paste them in here, and in order for auto animate to work properly they also need to be present in my original artboards. So let's paste those in as well, and actually, I'm just gonna move them outside all the way down. Oops, right all the way down here, so that they'll have a nice animation coming in. So now. It looks something like this and I can also choose to lower their capacity to let's say, 10% here, so that. When they come in from the bottom, they also have their capacity animated as well. And that's how you can use multiple interactions on the same elements. As you saw, we have a drag interaction added to this first one, but also a tap. Interaction or a tap trigger that allows me to switch to a completely different artboard for that second interaction. Now, have you ever heard about micro interactions? These are tiny animations that usually give users feedback on certain actions. I'll show you some examples and also how you can create your own in the next lesson, so I'll see you there.