Adobe XD Drag Tutorial - Create an Interactive Image Carousal

Key Takeaways

today you're gonna learn how to make this image carousel in Adobe experience design from scratch oh and hey I'd like to point out this videos awesome sponsor Skillshare comm which offers thousands of classes in design coding business and more for instance you're about to watch this quick video on Adobe XD but you could watch this full xD course at Skillshare now Skillshare is just ten bucks a month but if you're the first 200 students to use my very exclusive link below in the description here in youtube did you get the first two months free alright so let's get started hey everyone Garry Simon of course Tatro so as you know I've been really focusing Dobey on Adobe XD this week because they just released a ton of new updates across all their software and there's been a lot of different updates that are major in terms of experience design and it just become really fun to play with especially the auto anime feature in the drag feature so we're gonna be talking about the drag feature specifically so let me just show you a little bit more in-depth I as opposed to the very beginning of the video about what exactly will be doing so this is what we're gonna this is actually the project that I'm going to be showing you exactly how to do if we drag this you can see that they animate in and out we have an opacity effect on the ones going out and also the ones coming in this is slightly off a pasady and size as well now also watch what happens when you get to the third eye the card here we'll see that we have a notification that comes up we could do this with a time-based trigger all right and then watch what happens when we click on it nice we can also go back and it will automatically reverse that animation and then we can of course go back to the very beginning alright so very exciting stuff I again for today's question which paid resources if any are you using to learn how to design and/or code this could be something like plural site I Skillshare I Linda or LinkedIn com let me know our LinkedIn learning that is let me know in the description I'll also let you know what used in the past so let's go ahead and get started all right so I've started just a blank document and iPad I don't know why I chose iPad you could use anything really for this to work and what we'll do first is get a background color going so I think I kind of wanted to do a radial gradient for this so the inner color let's go ahead I'm gonna go to blue and make it a little bit lighter and then also around that same area yes something like that alright that way it kind of gives us some emphasis in the middle which is where our primary thumbnails based our card based content will go all right so after that we'll take the rectangle tool and we'll draw out something roughly around this size for now we'll take the selector and get it here just a little bit down because we're gonna have a title up here so I'm gonna put in something like latest content and of course and make this eye a bit larger I'm gonna go to my favorite font montserrat of course and then make it white all right so right here we'll hit control D to duplicate this and this is gonna serve as the the container for an image so like a thumbnail let's take off the border here on both of those alright right now we'll just make it a little bit gray temporarily and then I'm gonna put some content right here so I'm just going to put in AI first blog title I can't see it because it's white at the moment so let's go ahead and I do that scale this down maybe make it bold or semi bold that'll be fine control D we'll duplicate it and for this we'll go back to making this regular maybe just gray and then also we'll change this to maybe like a date so 10 18 20 18 something like that will make this slightly larger - all right I don't like that quite that bit of a that much white space from the left and the top here so I'm just gonna move them over just a bit and then bring this up like right around there all right that's good so now what we'll do is I'm going to take everything we're going to go to repeat grid and we're going to pull out just three of these alright for this simulation here so after doing that we'll then we'll just ungroup them and we'll also ungroup everything here as well and I'm just going to take these three and by the way did this get no okay these are all ungrouped all right so one to make sure we'll take these three thumbnail containers and we'll go to plugins and I'm going to use photos splash for this you can install this by going to discover and then typing in photo splash and hit install so I used the keyword computer when initially coming up with this project these will be fine so I'm just gonna hit apply alright and there we go well real quickly just change this up second and third all right so now once we have that done i we're going to take each one of these and make them their own group so ctrl g ctrl g + ctrl g and then we'll select all of them and then make it another group so there's three groups inside of a main group and if we go to our layers we can rename this to i don't know gallery all right so now at this point we can duplicate the artboard once we have this ready to go you could probably also make these symbols by the way the groups and that way if you make you want to make a change to one of them all these other artboards they'll they'll change out but I don't anticipate doing that but you would want to do that so ctrl D to duplicate and then now for this section I'm gonna move this over a bit we're gonna drag exactly where we want this carousel to end up after they've dragged from this first artboard here all right so if we were to play this right now if you go to prototype real quickly you get rid of the layers there and we took this group right here and we just drag it over on top of this iPad 2 we can use a drag trigger Auto animate and everything else is fine here so now if we hit play there we go works great we can't go back though because we haven't yet set that up so let's I drag that back it'll remember the other properties and now we can go back and forth and this is completely cool unacceptable obviously I especially if you have considerations of I really trying to make the app as fast as possible then you would probably wanna stick with this and not do any other outside of animations but let's keep on going just to make this a little bit finer so inside of here let's say that when a user is dragging this this way this first one we would want this to maybe fade out and get smaller off-screen so here's how we would do that so this is point a because we already have this group right here this group is called by the way Group four we could call this the first blog group and we have it over here as well Group four is here so our starting points right here the end point will be over here as well so any changes we make over here because we have Auto anim applied to this then it's going to automatically apply an animation from the beginning state to the end State so I'm gonna hold and alt and scaling this down just so it's outside of the view and I'm also going to take the opacity out so let's hit play now now watch what happens look at that and it will come right back so it'll go back and forth between these states as needed now I think that's a little bit too dramatic the amount of scale so I want to change that up what I'll do is just increase it slightly and I'll just move it over off sighs there we go so now we'll try that again and it's a little bit better of an effect in my opinion all right so what about for instance we want these to animate in as they're coming in well let's go ahead and make a couple adjustments here so let's say for instance I will start this off on the first artboard a little bit smaller and also a little bit of a pasady so we'll put 70 percent opacity all right so I'm gonna remember this size right here I'm going to copy this and you'll see how this comes into play over here we'll want to do the same thing actually right here if we take this we'll go ahead and change oops let's go ahead and make sure that's first on there make sure it's locked hit enter we'll move this down into place and then also take this to 70 as well okay good and now automatically watch what happens here if we hit play it's gonna come up into full zoom all right awesome all right so let's continue on going here let's have a third drag just to show this one over here so we'll duplicate this we're gonna move this over and we will take this we're gonna scale this up so I'm gonna hold shift and alt and scale at the same time and it just needs to go to the full size that it once was and I'm gonna move this over again so that this starts right here with the very beginning of latest content and then we'll take this right here which is the primary one shown from the artboard too and we'll scale that down off-screen and take the opacity down alright so let's go ahead and hit play now Oh first we have to go to prototype and we have to drag this over here instead so let's hit play look at that now how do we go back exactly well what we'll do is I'm going to duplicate this artboard put it just underneath here and this connection we can get rid of this by default what we'll do is if you want to go back we'll take this third artboard for the gallery and drag it here and again this is still a drag trigger and we're just dragging it back to this way and then this one we can connect and make it go back to the first one alright so and this is also a drag so let's try that now and by the way we couldn't make this just go back here to this one I because this one this gallery right here is currently pointing to the third artboard so we wouldn't be able to get back to the first one that's why I duplicated it down here so if I hit play and then now I'll go back it's currently on this artboard which allows me to go back so now we can go back through all three of these as we want alright so now let's try to do something interesting with the time-based eye trigger so a time-based trigger will work like this let's say we have iPad 3 and we want to duplicate it and we want to show that once you get to the end of a gallery maybe something pops up or animates onto the user interface informing the user that they're at the end of the gallery this is probably a no-brainer thing there's probably other better use cases for to demonstrate this but I this is just for demonstrating you know how you can do this sort of thing so once they get to the end we want we'll say we want a by the way I'll delete this before I duplicate this we'll say we want a like a little kind of I like a they get to call like a toast notification that will show up at the bottom it says you're at the end of the the gallery or something like that so to do this what we'll do is I'm gonna first create a container here with the rectangle tool and we'll bring in the sides yeah all the way I guess actually no I don't want to do that just barely and then we'll also take the pen tool like that make it a fill take the Select tool move it over into place we can do like that that it works all right um and then we'll just I group these two ctrl G and then we'll go ahead and take the the type tool and I'm just going to come all the way from the left and right and type in I something like you have reached the end whatever all right all right so then we'll take this down maybe we'll make this regular position this correctly actually let me add a little bit more of the gallery there that fits perfect almost there you go and we'll take the look let's change up the color real quick so what I'll do is I will take this and get rid of the border by the way and we'll color drop the background real quick and just come up a little bit higher to make it lighter we'll add this to the colors and we'll change that as well and make this bowl we'll make this white all right something like that now we'll take all these all three of them because it this is a group and then this is just a text layer we're going to group them up again and if I go to already layers we'll just call this toast all right and we want we'll say we want this to animate in right after they get here so what we'll do is duplicate this and this is the state where we want it to end up we have to in order for it to animate we have to have this you know we have to have a point a or a starting point that's why I chose to do it here but we're actually not going to see it in this artboard but they have to exist these these layers have to exist on this artboard so that it knows where this should animate from and how it should animate based on the properties that we change so we could do a number of different things we could hold shift and just make it I start at the bottom that way it'll come up and then we can also if we want to take the opacity all the way down all right so there we go what we can do then at this point is we could duplicate this one more time and we can make it so that this toast comes up there's be another delay maybe a one second it'll show it and then it'll go back down all right so let's I set this up in the prototyping section so what happens is when they get here we want a time-based transition here trigger so it's gonna come here we're going to change this a time we're gonna change I so we have to ask this one once they get here how fast should this this transition this time trigger take place how until this toast notification comes up I'm just gonna have a zero second delay it's going to be instant how long should the duration be where that animates up from you know opacity zero to a hundred and moving up I will just say 0.6 seconds all right and then over here we'll do the same thing so we have a time with a delay this time how long do we want it to stay in this state right here I'll just say one second and the duration again will be 66.6 seconds from going back down we could also play by the way with the easing options because it's gonna look a little strange we can just say ease in we can try ease out see how that looks and really this is all about experimenting let's give it a try now so we're gonna go here here there it goes and there we are so you could do a lot of really cool stuff with this now how would we go back out of here if we wanted to well we could simply just take this right here and drag it to this artboard I on by the way make sure that the trigger is dragged so same thing if you want to be able to do it in the middle here I believe this will work we could take this and drag it down to that one and same thing here so if we hit play and guess what we can go right back now just as we wanted to awesome stuff alright so let's do a little bit more here just to demonstrate I you know what would happen if somebody clicked on this third blog title alright so what we'll do is take this and duplicate it and I'll just put this down here and alright so what we can do is just move this off-screen so we'll say we want this to move up let's also take down the opacity so it'll fade out and move up we'll take this group right here and specifically this group I'm gonna double click on a few times to make sure I get to just the thumbnail image selected and I'm going to scale this thing up so I'm just holding shift while doing this and then we could take this area and complete it we'll take this and move it over here we'll make this bigger and we can do this real quick and then I'm going to use a plugin here lorem ipsum alright right there I love the plugins by the way we'll take this and make it regular take down the the the contrast just a bit fill that out a little bit more this right here yeah I didn't want this eye to be great there we go all right so we'll say this is I what happens when somebody clicks on this right here so if you go back to prototype instead of doing that we're gonna drag it here and this is going to be a tap and it's gonna auto animate and we'll save one second so the lots gonna be happening here in terms of the animation we're going from this to this so let's give it a shot all right and come in here come in here and click let's also apply some easing to that it because it really makes the animation look better so we can do you can try any of these actually will just do ease in out and just so we don't have to go through the whole sequence I'll select that our border hit play there we go that's much much better I like that and then let's say we want to for instance be able to go back I'm just gonna put in a real quick very simple I back button triangle of sorts and don't worry I'm sure it's completely ridiculous looking so let me just make a quick eyeball adjustments there alright so if somebody clicks this where's it gonna go back well we'll make it go back here so I will go into prototype make this go back this is tap Auto animate sounds good to me and let's hit play toast click it click this look at that and then now at this point we can't go back because this is currently just set at a click trigger so what you could do then is we can duplicate this we'll make this right here we'll take this right here and make it go down here and that's based on the tap and then so this we would connect back up to this right here all right so now hopefully we if we got that right let's go ahead and I come back here we hit play or not play but you click it and then we go back and then now we can drag that way oh and by the way the trigger yet you guys have to change this to a drag so one last thing just to get to that last sequence click on it go back drag oh this is so fun very fun stuff alright alright so hopefully you found that helpful and again answer today's question which is do you use any of paid learning education or subscription-based websites for learning design or code let me know in the comments and if so which ones you use and I'll see you guys real soon with new tutorials goodbye [Music] [Music]