Adobe XD Multiple Interactions Prototype Tutorial

hey guys it's Kaler welcome to the YouTube channel in today's video I have an Adobe XD multi interaction prototype tutorial for you guys we're gonna be taking any app design and making it a full prototype using multi interaction we're gonna be taking the design you see here creating a drag effect on the card so you can swipe back and forth and use a tap effect to expand that to full screen taking advantage of the multi interaction feature if you guys are interested in creating this design have a link to that in the description as well as I'll throw that video up on the screen now in case you missed that design tutorial I think this feature is really cool so I'm excited to get into today's tutorial so let's take a look at multi interaction and how you can use it in a prototype like all of my design tutorials there is a project file link down in the description that will get you set up for the starting point for today's tutorial so let's go ahead and get started so the first thing we're gonna have to do is every time I like to prototype in Adobe XD because I'm a bit messy when I design I like to organize my layers so here I'm going to be renaming certain elements grouping them together and changing the layer order to best fit this prototype that asfar is a component so it's already grouped so that's fun next we have this navigation section so I'm just gonna select all that in hit command G or ctrl G to create a group and then I'll just name that navigation the next thing I want to do is here since we're not going to be changing the interaction of this I'm gonna group this as well and we're just going to call this heading card one I'm going to select all of that and group that and we'll just call that card one down here at the bottom going to group that together and call this swipe tip so now we've got a little bit more organization to our design file we are gonna pay attention to the layer ordering here in just a second but for now this is going to do us just fine so what we're going to do is I'm simply going to drag this card off into the pasteboard making sure that I remember that we have 16 spacing here for later and what we're gonna do is make this the exact same as this one over here so I'm going to unlock the aspect ratio on this black rectangle and drag down until it is 500 pixels high just like card one from there I'm just going to grab these text and drag them in we'll check our spacing 21 and 21 so we'll grab both of those and we'll go to 21 and 21 change out the descriptions and so now we have a second card so then I'm going to select all this command G to group it and we'll call this card two and we'll drag this back into our design and make sure we align it properly one final thing we have to do on this card is make sure that both of the body texts here are right in front of the rectangle so the background rectangle that way when we slide these around they're going to go behind this image layer so you want to make sure that is organized correctly so then we're going to select the design artboard and hit command D to create a exact copy so that's going to keep all of our layers and organization exactly the same so that when we go to auto animate it's going to tell Adobe XD these are the same elements all the changes need to auto animate so I'm going to slide this over just a bit and here I'm going to drag this into the first position and make sure we line it up on that guideline command semicolon to turn off my guides so now that we have that we can go to the prototype tab well select card one and drag a wire over this is going to be a drag trigger and we don't need any easing and make sure you have Auto animate active well select card two now and drag the wire back to the first artboard with the exact same settings if we hit live preview now we have this nice drag effect switching back over to the design tab I have a third card that we're going to place into the design so I'm going to drag that component out and place it 16 pixels to the right so that we don't have that empty space we're going to copy that with command C come over to the design command V and we'll just drag that over so that it matches the spacing for all three cards and then it'll disappear since we already have that wire set up so now we no longer have that space over here on the right because that card now fills it so we can ship this back over from here what we need to do is collapse the second card on our first artboard just like this one is so I'm going to do that by just grabbing the rectangle and dragging it all the way up to its original position then we can select the text holding shift to grab the second one and I'm going to put it behind our image just to hide it I'm also going to grab that text and lower the opacity all the way down to zero so now that we have this one expanding we want the original one to collapse so I'm going to select that grab the rectangle in the back we'll set it back to 212 and then we can grab the text shift them behind the image just like we did with the other one so I'm touching the top one to the top of the image in the bottom one to the bottom of the image so that they're both hidden we also need to lower the opacity down to zero and you'll notice that we have these out of order that's fine we'll just drag these in front of the rectangle and because we've done that that breaks the auto animate for card one so we have to go back to the original grab the text and drag it to the exact same position right above rectangle 15 there so if we have that done correctly when we hit live preview again you'll notice that they slide behind as the other card expands like so also looking at the layers one thing we need to do is we need to make sure that card three is behind card two and we need to do that on our second artboard so we'll do that card three and make sure they're in the exact same position so now that we have multiple interactions in Adobe XD we have a drag effect on this card but we can also then add a tap effect so we're gonna use that tap effect to expand this card to the full screen and select our playlist so I'm going to grab this hit command D to create a duplicate now I'm going to drag this above this just so we have kind of some visual hierarchy here so we're swiping back and forth these two and then this is going to take us up here let's go to the prototype tab we're gonna select this card and drag up a new trigger with that plus icon and we're going to make sure this is set to tap make sure the action is set to auto animate we're going to turn on ease in and ease out and we'll set this to 0.8 seconds for the duration so then on this screen we can drag a new trigger back to the previous artboard tap easing these out over 0.8 seconds now nothing is going to happen because we have no changes so let's swap to the design tab and create those so here in the layers panel I'm going to select from card 3 all the way down to the bottom and turn the opacity to 0 so the only thing we're left with is car 2 and the status bar so since we want this to expand we need to grab the rectangle in the back and we'll just put it up here in the top left-hand corner and we'll drag it down to fill the entire artboard now we do have some rounded edges on that so I'm going to set the border radius to 0 so that it fills the artboard completely we'll drag our image to the top left we're gonna unlock the aspect ratio and we're going to slide this image over to the edge just like that again we need to adjust our border radius for this I'm going to set this to 0 in the first two fields which is the top left and right corner and then I'm going to create a larger radius on the bottom left and right so we'll set that to 18 so it adds this nice curve here on the bottom but the corner now fills out just like that for the heading text we're going to Center that inside of this new image area and we're going to increase this in size to 34 point font and we'll just make sure that it's again centered the only thing we're left with here is the original body text we're gonna grab them both and slide them off the artboard completely and turn the opacity down to 0 so they're going to slide down as they fade out so this is what we are left with so far let's go ahead and hit live preview and take a look at what happens when we tap that card so that is the effect we want so now we need some content on this screen I went ahead and created two content sections here so I'm gonna drag those out one is called the song list and the other one is just a card of the original description text combined here so we're gonna put the first one 21 pixels below that image so I'm going to touch it there and go down 21 pixels and then we'll follow that up with this card right here and we'll put that 21 pixels below the song list so now we need to go into the layers panel and we need to grab the description and song list and we're going to drag those to the top of card two and I'm going to copy them with command C once we have those copied we're gonna go into our art board select our grouping expand it and paste them right above just like that so they are the exact same position here then we're gonna slide these down out of the way and I'm going to drag one way down so that we have a little bit of variation in the speeds that they slide in so that is just letting Adobe XD know that this element exists on the first screen we're gonna be animating from so that they will in fact animate in so we hit live preview we're gonna swipe over select the card and you'll see that our new two content sections will appear sliding in and sliding out one final thing I missed here on the second artboard select that swipe text and just turn it to 0% opacity so that when we swipe over it fades out and then we have our finished prototype so that's it for this multi interaction prototype tutorial that's the process I take for creating a prototype utilizing multi interaction in Adobe XD if you guys enjoyed today's video make sure you give it a thumbs up subscribe for more design related content every Tuesday and Thursday make sure you have that notification belt on so you don't miss an up-and-coming video as always have a great day and I'll see you guys in the next one [Music]

Channel: Caler Edwards

Views: 163,641

Keywords: Adobe XD Tutorial, CalerEdwards, Caler Edwards, UI Design, UX Design, Web Design, UI/UX, interface, UI, UX, AdobeXD, Adobe XD, Xd, Experience, Prototype, Adobe XD Prototyping, Adobe XD Prototype, Design and Prototype, Adobe, New Adobe XD, App tutorial, Adobe XD Multiple Interactions, Adobe XD Multiple Interaction Tutorial, Multi Interaction Tutorial, Auto Animate Tutorial, Drag effect tutorial, Creating multiple interactions, Adobe XD prototyping tutorial, prototype tutorial

Id: JE-EsLhmlkU

Length: 11min 2sec (662 seconds)

Published: Tue Dec 10 2019