Advanced Adobe XD | FREE COURSE

hello and welcome to an envato tuts plus course i'm adi podilla and in this course you'll learn how to use some of the more advanced tools in adobe xd now we all know adobe xd fantastic app for ui design and it's actually an app that anyone can learn how to use very easily however there are a few more advanced tools that will take a little bit more time to get used to and learn properly and that's what this course is all about since we're working with adobe xd i want to remind you that you can get all kinds of xd compatible ui kits and assets from envato elements which gives you unlimited downloads of wordpress themes and plugins web templates fonts and more now in this course we'll be taking a closer look at tools like auto animate 3d transforms stacks and component states we'll also explore some plugins that will elevate your xd experience therefore this course is a bit more advanced so you'll need to know the basics of working in xd first and then watch this course if you're looking for more beginner friendly content we have that as well on tutsplus and i've linked a couple of handy resources uh down below however if you are um more experienced with xd and you want to learn some more advanced stuff then i think we should just get started with the course and learn about auto animate that's coming up in the next lesson so i'll see you there welcome back to the course in this lesson you'll learn how to auto animate the size position and rotation of elements in adobe xd and as the course progresses you'll see more and more complex uses for auto animate but it all starts right here with these three properties so let's get started now this is the project we're gonna be creating in this course it's a simple slider that works something like this of course this is a prototype inside adobe xd and it uses auto animate to change the size position and rotation of these three elements so let me show you how we can do that i've prepared a blank canvas here and these are the three elements that we need to use now these are all shapes that have an image as a background and throughout the course you'll find links to all the resources and all of the images that i'm using listed in the lesson notes so then we'll begin by dragging this right here in the middle and i'm also going to drag in the next image like so but this next one i'm going to rotate 8 degrees you can see that in the inspector here and i'm also going to make it a little bit smaller something like 322 pixels let's align that to the middle and i'm also going to lower its opacity to 50 and then i'm going to drag it right here and i'm going to do the same with this image so 8 degrees rotation 320 to 50 opacity now i'm going to take these three i'm gonna and i'm gonna group them up and i'm just gonna move this so it's uh right in the middle there okay so that looks pretty good now let's go ahead and quickly create the pagination for that we're going to grab the ellipse tool draw a circle that's um 8x8 remove the border for fill color i'm using this 1dd760 and i'm just going to duplicate that command d or control d place these at 16 pixels and lower the opacity to about 30 percent and let's duplicate that again now let's group these up we'll call them pagination and this will call carousel or slider or whatever you want to call it really what's important with auto animate is that you keep the same layer names between artboards okay so this is the first artboard done let's go ahead and duplicate it two more times on the second artboard we need to highlight the middle element right so what i'm gonna do is i'm gonna select the first one i'm gonna rotate it negative eight degrees height 322 and opacity 50 percent so basically it looks something like this only it's rotated in the opposite direction let's move this down a little bit and let's reset the rotation on this middle element let's make it 386 and let's uh increase the opacity to 100 percent so now we're going to move that right there maybe move this a little bit like so and now i'm going to move the whole thing in the middle something like that and let's just make a few quick adjustments here align everything in the middle and i'm going to place those like so and that one like so and now finally let's align this to the middle and also i forgot to align the pagination to the middle so let's do that and let's also set a 64 pixel distance between the element above like that okay so that's artboard number two for artboard number three let's actually duplicate this one and i'm gonna lower the opacity here so i'm going to turn this middle one into an inactive or give it an inactive state that's negative 8 322 and let's make this one active so reset that reset the size and the opacity select everything like so remove that and let's move this in and that should do it now we just need to update our pagination so on the first artboard this is fine because it points us to the first image the second artboard i'm simply going to lower the opacity here to thirty percent and back to a hundred percent for the middle one and then here thirty percent and a hundred percent all right so now we have these three artboards now to create that nice animation we'll jump into the prototype tab we'll target the first element we'll drag well actually we need to target the second element excuse me so we need to drag this to the second artboard trigger is going to be tap action is going to be auto animate easing i usually prefer to go ease in and out and we can go for like 0.4 seconds now from the second artboard if i click on this element it should take me back to artboard one if i click on this element it's going to take me to artboard three and actually let me space these out a little bit so it makes a bit more sense just like that and then in artboard three the only link we have here is from this element to artboard number two all right so with that said and done let's select left one and hit preview so now that is our prototype and by doing this we auto animated the size because it goes from this bigger size to a smaller size we auto animated the rotation because right now it's at 0 degrees rotation but as soon as i change it goes to -8 and also it auto-animates the position because these elements are moving around and that's the way auto animate works really xd looks at two artboards and it finds the elements with the same name inside those artboards and then it detects what changed between artboards in our case we're changing size position and rotation but we're also changing the opacity for these elements and opacity is a property that is supported by auto animate and i just realized this now i made a small mistake when resizing this element so let's jump back to our design here and this one should be so the active element should be 240x386 this one is actually 200. i i forgot to check this this lock aspect icon so let me just quickly change that back to 40. and then we'll put this in the center and let's see this one this one is the correct size and one last thing i'm gonna do actually is to change the uh the triggers here the trigger duration i mean from 0.4 to 0.8 because i think that's uh a bit a bit smoother so let's change these 0.8 and let's change this one as well so now this is how it looks like it's very smooth i'm not sure if you can see how smooth it is because this is usually recorded or rendered at 30 fps for the for the video but when you're looking at it on a regular display at 60 fps or 60 hertz this is a super super smooth uh animation and that's how you can auto animate the position size and rotation of elements in adobe xd now did you know that you can combine masks and auto animate well you can and you can actually create some pretty cool animations with them i'll show you more about that in the next lesson welcome back to the course in this lesson you'll learn how to combine masks and auto animate and with it you can actually create some very cool animations so let's get started this is one of the two examples i'm going to show you in this lesson and i want you to pay attention to this slider right here and see how it works when i change the slide see that now that's pretty cool isn't it it's a very nice effect again this is a prototype in adobe xd so let me show you how i did this i have an artboard set up here with three pictures as you can see uh some decorative elements here at the bottom and i'm going to start by drawing a rectangle like so i'm going to set its fill to 333 border i'm going to remove it and i'm going to make it 160 by 40. and for border radius i'm just going to go the max value of 20. next i'm going to grab the rectangle tool again make a rectangle that's 32 by 16. again i'm going to round off the corners remove the border and for fill i'm going to set this 6c 6f60 and then i'm going to position this 16 pixels from the left side and in the middle and i'm going to call this dot one i'm gonna call this slider bg or slider background next i'm gonna duplicate these dots two more times the one on the right again 16 pixels from the edge here and the one in the middle well i'm just going to align it in the middle with the background and let's properly name these this is dot 2 and this is three next i'm gonna duplicate one of these dots and i'm gonna move it up we're gonna call it dot bg and i'm gonna resize this to the full extent here and i'm going to give it a different color and that color is 62a973 now i'm going to duplicate this once more and i'm gonna call it dot mask obviously you can call this whatever you want and with the dot mask i'm gonna resize it till it spans two of these dots like so so then just for clarity let me change the color here to red it doesn't really matter what we're going to do now is i'm going to take the dot mask and dot while making sure the dot mask is the first layer and i'm going to right click mask with shape or shift control m so now i have a mask group one let's rename this to mask now in order for the first element to be visible or the first dot i need to move this dot mask to the left for that i'm gonna lock the dot bg's position and i'm just gonna use my arrow keys or you can also you can also use the mouse to move this to the side so it just covers this first dot all right so now let's take this let's actually group it up and let's call it pagination so now we can go ahead and duplicate this two times and we'll make the necessary changes in the second artboard i want to see the second image so let's move it like so and also i want to see the middle dot and to do that i'm going to go in here under the mask i'm going to move the dot mask so that it only covers the middle dot and then i'm also gonna resize it like so okay and on the third artboard i want to show the third image so we're going to move all of this to the left and then select the mask select the dot mask and then i can move it to the right side so that it only covers the third dot and it looks like so so now let's go into prototyping and we'll select the dot this will go to this artboard trigger is tap auto animate for action ease in and out for easing over let's say 0.4 seconds from the middle artboard the first one goes here the third one goes here and from this third artboard we do this and we do this so now if we do a little preview you'll see that we've achieved the exact effect that you saw in the initial demo so this is possible because we used masks we have this nice animation on on the slider it's almost like the dot you click on kind of borrows this uh this active colored shape from the one before it and it's a really really cool effect and we can also go in i actually forgot to target this one from the initial artboard let's link that to number three here so now i can move like so and that is the first example that i want to show you you can do a lot of things with masks and one of the cooler animations is for numbers so you can animate numbers by using masks and it's going to be like one of those uh countdown timers that you probably saw around so i have a starting um demo here but first i want to show you what we'll be creating so we have the simple artboard and you'll see that as i drag the slider the number here animates along with it and it goes the other way around of course you can go as slow as you want but achieving this this effect is actually very very simple so let me show you how you can do that so we're going to start right here and i'm going to start with the slider so grab the rectangle tool draw a rectangle that's 320 by 8 and for fill i'm going to use 4849 for e remove the border round off the corners and let's position it in the middle something like that now i'm going to duplicate this again so this is the base this is the active and i'm just going to resize it like so let's actually sample color from here so that we have a starting point for our animation now for the slider dot we're gonna grab the ellipse tool draw a circle that's 24 by 24. for fill color let's use i don't know maybe this pink border it's going to be two points and let's make it white and let's also add a shadow to it 3 3 and 15. so now i'm just going to position this like so and i'm going to call it dot and then i'm going to group these up i'm going to call them slider all right so the way this works is very simple on the slider on this letter dot actually we're going to add a drag interaction and whenever that happens we're going to animate this number now the way to do it is to first split it up in three separate text areas because right now is just a single text area so to do that here's what we'll do let's go ahead and copy it and bring it out here and i'm just gonna change its color so you can see it more clearly so then let's duplicate it i'm going to say one let's duplicate this two duplicate it again eight okay so the number we're trying to get to is what did we have here 524 okay so we're going to do the following we're going to select the one we're going to do a repeat grid and we're going to drag down and i'm also going to reduce the spacing between these items to zero and we're gonna say two oops three four and five let's bring these uh the opacity back to on 100 right so i created a group that goes from one to five because five is the first number or the first um digit from the number we're trying to get to and this group is going to move up like so and it's going to be animated now for the other ones i'm going to do the same thing repeat grid and i'm going to drag all the way down but this time we have a few more numbers to go through so we'll do three four five all the way to nine and then we'll start again from zero and to make things a little bit easier for us let's actually ungroup this grid and let's group it up as column one let's ungroup this first let's make it a little bit bigger let's ungroup it and we'll call this column two and let's start working on those numbers so nine then we go zero one two three four five and so on until we get to 9 again like that now here we need to know the ending number so it's 128 524 so the middle digit here is 2. so we'll need to duplicate three more digits here and we're going to say again 0 one and two right so the very last digit that we're going to write here is the digit that we want our number animation to stop at finally for our third digit let's actually make things easier for us i'm going to duplicate this like so and here we're actually starting at eight so let's move this up and i'm actually gonna delete these elements okay so we're starting at eight we need to add a couple more groups from zero to nine but the ending number here is four so we have eight nine zero one two all the way back to nine and then we start again so let's do this let's select these duplicate and actually i made a mistake there i should have started with 0 like that so duplicate drag it in and let's do that one more time of course you can add as many of these groups as you want to make this animation more realistic and the number we need to end at is four so i'm gonna drag zero one two three and four duplicate and bring it all the way down cool and this right here will be called call or column three okay so that is our number now what we're gonna do is we're gonna take this group it up i'm gonna call it number and then i'm gonna drag a rectangle something like that it's a rectangle that's basically gonna cover the number so then i'm gonna take this and the number right click and select mask with shape this is barely in the screen here but you can see it shift control m on a pc and i believe it's shift command m on a mac so mask with shape and now the only thing that we're seeing is the starting number so let's go ahead and copy this and bring it in inside of our number here just paste that in like so let's delete the old number let's call this mask and let's fill this up with white so now to achieve the effect that we want we're going to duplicate this artboard i'm going to move the dot to a new position and actually let's uh first increase the width of this uh of the slider and i'm just gonna move the slider like so and then to show the the new number we've got to go inside the mask and i'm simply going to move it like so and then i'm going to move this one i'm actually going to use my arrow keys because it's a little bit easier so i'm just holding down shift and arrow up like that and i'm going to do the same thing here shift arrow up until i get to 5 24. just like that all right so now let's animate it we're going to go into prototype and i'm going to target the slider dot drag to the second artboard trigger is going to be drag action is going to be auto animate and for this one we can actually um not specify an easing and then we're going to go to the second artboard and do the exact same thing in reverse so now if we preview this there it is it goes from 128 to 524 very very smooth animation and this was all possible thanks to using masks and these are just two examples of what you can do with masks and auto animate so give this some thought and you'll see that this is actually a very very powerful uh feature that's available in uh in adobe xd alright so with that out of the way uh let's move on to the next lesson where you'll learn how to add multiple interactions to the same element so i'll see you there 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 a 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 uh 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 uh let's get started we're going to start right here so i'm going to move this down and let's start by cleaning things up a little bit here so this is the content i'm just going to ungroup that sections this is another grid so i'm gonna 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 when we auto animate so we have sushi and then we have all of these uh 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 going to do that on these first first elements and then i'm going to target this this bg i'm going to call it sushi picture i'm doing that because we need to expand this picture in the next artboard and it needs to have the exact same name for auto animate to work properly so now let's go ahead and create this this first interaction the drag so select this artboard command d and then just select the sushi slider and just move it like something like this so then let's go to prototype select this uh first card link it to the second artboard drag for trigger auto animate for action easing none and i'm actually gonna select the second one from the second artboard 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 artboard which looks something like this so to make that happen let's go ahead and duplicate this artboard like so and i'm going to select these two elements set the opacity to 0 and then from this artboard we just need the picture and title so i'm going to 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 like so 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 control c and control v for on windows let's put that over there and now if we do a quick test i'm going to 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 new artboard auto animate the trigger will be tap and easing we can just go easy 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 this element right here this needs to basically go back and let's see about the other elements we need add the reviews and also the uh 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 artboard so let's paste those in as well and actually i'm just gonna move them outside like all the way down oops right like 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 opacity to let's say 10 here so that when they come in from the bottom they also have their opacity animated as well and that's how you can use multiple interactions on the same element 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 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 welcome back to the course in this lesson i'm going to show you how to create micro interactions in adobe xd so let's begin now first of all what is a micro interaction well these are small animations that are designed to offer feedback on certain actions that are taken by user or usually clarify what's going on you can also think of it like a bit of user feedback to let you know that you did the right thing and i went to dribble to show you some micro interactions these are all creations by dribble members and i think this is a very good example notice how when you tap on this down icon you get this little animation with the with the circle and the way it ripples out that's a micro interaction it's a very small animation that lets you know that hey you tapped on this down arrow and you're actually doing the right thing you're switching between these items and actually their interaction is very well represented by the way this whole input is moving by the way the text scrolls down into view it's a very good piece of user feedback another animation that is considered to be a micro interaction is the one that you can see on these icons right you can use these two different states on for example hover or when you click on a certain element and you can see the way they change is again another great visual indicator that you've taken the correct action here's another one see how these menu items change when you move between them well again that's a micro interaction and the animation is very tiny we have a bit of a scale animation we change the color and also we change this uh this visual indicator another great example is this one see how these change right the icon rises it changes color and also the text kind of rises up and fades in and actually for this demo for this lesson i'm going to recreate this animation as faithfully as possible in adobe xd so let's get started right here i went ahead and kind of replicated uh the starting point i'm not using the exact same icons as the author but i tried to use the same the same colors and the roughly the same spacing as the author now to make this work there are three things that are happening on each animation first we're moving this element right this big bubble we're moving it to the active element second we're fading in the text from below and third we're moving the icon up and we're giving it this uh this blue color now here's the thing auto animate currently doesn't support color transitions so i can't just create another artboard with this shape being a different color it's not going to animate smoothly it's going to change its color but it's not going to do it smoothly like we have it here so to get around that we're going to be a bit creative and we're going to use masks and we're going to use them in the following way we're going to create two rectangles here so one is going to be like that let's remove the border duplicate it and let's move it down and make sure that the icon can fit inside this rectangle while it's in its inactive position so this will be our gray background and this will be our blue background we're going to take these and we're going to move them down we're gonna take the icon and sample that color and use it to fill the first background and for the actual color here we can use red it doesn't matter what color we use i use red just as just for uh separation and then i'm gonna select this color and paste it there so now while making sure that the icon sits on top of these two backgrounds i'm going to select them i'm going to right click and say mask with shape and you can actually see this right here it's outside of the recording area but the keyboard shortcut for windows is shift control m i believe it's shift command m for mac os right so that's mask group one let's call this mask messages so now what i'm going to do is duplicate this move it right there and i'm going to call it mask images i'm going to open it up and i'm going to take this icon material image and replace it for that actually we need to ungroup the mask first right delete that and i'm actually gonna bring that icon up just a little bit so that it matches where it's inside my my second background so with these selected again mask with shape we're going to call this mask messages and we're going to do the exact same thing command d bring it in here ungroup mask delete that old icon select these mask with shape and we're going to call this mask settings all right so now we have basically almost everything we need we still need to add the text here so let's duplicate this we're going to move it there we're going to call this images and settings make sure it's in the center of that icon so now i'm going to take this duplicate two times and then on the very first art board we'll take the text here we'll set its opacity to zero and i'm also going to move them down like so on the second artboard i'm gonna move this circle to the middle i'm gonna move this icon oops to the top like so and i want to make sure it has the exact same y position as the other one 6 28 6 20 8 like that messages and settings again let's push them down lower their opacity and also i need to set the y position of this icon to 675. just like that and you'll see that because this icon is the actual mask as it moves through each background it gets the color of that background so let's push this back to 675. okay so that's artboard number two and on artboard number three we're gonna do it here for the settings so i'm gonna take these two push them down lower their opacity 675 there and i got to move this up it was what 628 i believe just like that cool so now let's link everything in in the prototyping mode so i'm going to target this element and that's going to take us to this tap auto animate ease in and out let's do 0.8 seconds we're going to do the exact same for this one like that and then for the rest it's just a matter of linking everything together like so and now once everything is done look at that i think we could we can do a better job with with the easing duration maybe 0.4 seconds here yep that's much better all right and that looks almost as good as this animation uh here we probably have a slightly different easing when we when we change this element or when the author aaron eicher changes to to those menu items but overall hours is actually pretty close and that's a micro interaction one that you can very easily create in adobe xd and as i said we had to get a little bit creative with how we're going to change the color on these elements because we can't transition colors and just to make it a bit clearer for you let me change the duration on this uh interaction to five seconds so you can see exactly what's uh uh what's going on there so pay close attention to how this element changes color right it basically moves up and as it passes through the two mask layers it changes colors from this gray to the active blue and the same goes for this one notice that when it goes down it changes color from blue gradually to the gray cool now this is one example of a micro interaction you can create another example be a animated icon for a charging battery so we're starting out with uh with a simple icon and i have this this frame here and inside i have a level for the battery so at zero percent it should be like all the way down here and maybe even lower its opacity but then we can do like 25 and that element should be about 58 pixels in height then at 50 should be around 1 120 something like that 75 percent is around 175 something rather and then at 100 it should be at 235. all right so how do you link this in the prototype and here i have an example that i've already worked on well if we switch to prototype we can select the first artboard and we can link it to the second and we will use a time trigger delay zero seconds uh easing we can do ease in and out to maybe i don't know 0.2 seconds and we can do the same and then once we get to a hundred percent we go back to zero so our prototype will look something like this pretty cool right now on this last one we can actually remove the easing or if you want like a linear feel to these we can remove the easing on all of them so now the animation looks like this and we can actually select this last one and set the easing to zero so we don't have that that awkward change right at the end and this is another micro interaction that you can create with adobe xd alright and that concludes the chapter about auto animate now let's move on to 3d transforms this is a feature that was added to xd in late 2020 and it basically allows us to add perspective to elements by rotating them around the three axes and setting the various depths i'll tell you more about 3d transforms in the next lesson so i'll see you there [Music] oh [Music] welcome back to the course in this lesson i'm going to show you how to create some awesome 3d transforms in adobe xd and also animate them now if you're looking for an introduction to 3d transforms i also did a short tutorial on the topic on envato tuts plus and you can find a link to it down below this is a little bit more advanced so let's go ahead and get started this is what we'll be creating in this lesson we have a simple carousel and it goes something like this right we can see the images they they go from that uh that perspective to this uh to this 2d look and we also have an interesting glow that matches the image itself you can see pretty smooth transition and this is actually very easy to create with xd so let's get started here i have a blank artboard and the three images that we're going to use i got these images from mix kit and you can download them yourself for free using the links in the lesson notes so then i'm going to take these images and i'm going to move them up like so i'm going to select all of them i'm going to actually group them up and i want to make sure that i have the correct ordering so image 2 actually goes above image 3 goes above so image 1 is the one on top followed by uh followed by the other two so let's align these like so and then i'm actually gonna start making these images a little bit shorter actually i don't need this this group so we're going to take image 3 which is on the top and we're going to make it 700 pixels tall this image 2 is going to be 750 pixels tall now before we uh get to the actual 3d transforms we need to add that that fancy glow that i showed you around these items so how do we do that well it's actually very simple let me show you let me start by hiding these images first so here i'm actually using a mask for these images and what i'm going to do is duplicate this image i'm going to go back to the parent element and i'm going to resize it like so i can even uh disregard the the aspect ratio and make it exactly the size of that of that mask so now what i'm gonna do is go to the inspector and check background blur but instead choose object blur amount 30 percent or 30 should be enough but now i need to move it behind my main image and just like that we have a nice glow and i actually want to name this shadow and we can resize this to whatever size we want right so that's our first image now we just have to repeat the process with the other two images so in here we're going to copy that paste it in and then we go to object blur we move it behind and we just make it slightly bigger like so all right so that's the second image and let's do the same for the first image and let's push it behind the main image and if you feel like this this shadow is a bit too intense you can actually lower its opacity but i think it looks pretty good like this so now once we have these three images and their shadows we can go ahead and select all of them align them to the middle and let's bring up 3d transforms by clicking on this button or by pressing command or control t and we're going to rotate these elements all of them 45 degrees on the x axis and i'm just going to bring them down like so and then i'm gonna go to each one and i'm gonna hide their their shadows now the reason we're not seeing these images uh properly is because we actually have a different z position for for each so while image three should be on the top it's currently sitting at the bottom so let's go ahead and fix that we'll set the z index here to five uh image two we'll set it to i don't know two or whatever and the image one we can just set it to zero all right and finally what we can do is we can lower the opacity on these images so ninety percent on image three fifty percent on image two and i'm using the uh the numbers on my keypad from zero to uh nine uh to lower the opacity of these images all right so that is our starting point now let's go ahead and add that button and i'm just gonna paste it in here it's just a simple button and that should take us to the second artboard so then let's duplicate this bit and let's go ahead and hide this button right here and lower its opacity and then this first artboard should show image three let's reset its rotation and its size and let's put it just like that and also i'm gonna display the shadow and one last thing i want to do here is for image 2 i want to lower the rotation here to 40 degrees instead of 45. okay so that is artboard 2. now let's do another one this is artboard three in this case this one will get rotated something like that to like -75 we're going to bring it to the very top and we're going to lower its opacity all the way and then we're going to bring this up bring the opacity to 100 rotation here to zero and we're going to align it in the middle and we're also going to display the shadow and finally let's change the opacity of this element here to 50 and let's also change its uh rotation to 40 degrees there and finally let's do this let's rotate this again to 75 negative bring it up lower its opacity and let's display this one correctly and let's display the shadow finally on the last slide this one should be displayed on the top zero opacity and i'm just gonna paste that button that allows us to restart the carousel all right so now let me actually move this these down a little bit and let's focus on the prototyping stage so i'll go to prototype and we're going to start right here we'll go to this one tap auto animate ease in and out and we can go for like 0.8 seconds this one the trigger will be the actual image same goes for this same goes for this in here we can actually go all the way back to the initial artboard and let's give it a go see how this works pretty cool now there are certain things that i noticed are not uh particularly correct for example on this first artboard i forgot to change the opacity of this element back to 100 and we're also missing the animation for this button so let's copy it from here let's also paste it in here and we're going to move it up and lower its opacity and i'm also going to copy this paste it in here move it down and lower its opacity so now we should be good to go start first one second one third one okay we only need to add a nice animation for this button between this artboard and this artboard so copy it here paste bring it down opacity to zero and now it goes like that so all the elements are now nicely animated in between the slides now if you want to be fancy about this you can actually add a small parallax effect because the images are set in a mask you can actually decide to make these bigger or smaller right like that and like that so now it's going to look slightly different you're going to notice that as i'm starting the carousel the image here or the actual mask will get bigger of course but the image inside will also get bigger see so that's pretty cool that's a more advanced take on working with 3d transforms in adobe xd and that's it for 3d transforms now let's move on and talk about creating layouts if you've ever worked with sigma and figma's auto layout feature then you know how powerful that is well xd has something similar called stacks and stacks allow you to space elements evenly in a group move them around very easily and also add padding so let me show you how you can work with that in the next lesson welcome back to the course in this lesson you're going to learn how to use the new stacks feature to easily create layouts let me show you how here i'm using some elements that i got from a ui kit called navigo transportation now that's a free kit and you will find a link to it in the lesson notes now let's say we have this card right with these three elements now what happens if we want to rearrange these well you can simply drag them like so like so and making sure that ever all the distances here are equal and everything is aligned properly what if you want to add another element well you will need to select a separator and an element command d to duplicate drag them into position and then go to the background and resize that as well this can sometime be very time consuming because you have to stop and re-measure and realign everything well this is one thing that you can resolve very easily with stacks so to work with stacks you need to select the parent element and in the inspector check stack now this has two uh modes vertical and horizontal and uh xd is smart enough to recognize that my uh items here are displayed in a vertical manner so it's selected vertical for me but i can always switch between the two now what's nice about stacks is that you can hold down the s key and you can determine what distance you want between items so if i want for example 16 between these two i can do that very easily what i can also do is hold down shift and s and alter the distance between all the items so that's really easy to to adjust now look at how look at how simple that is so let's keep this at 16. and you also notice that the background now resizes automatically and that's because when we created a stack we also enabled padding nxd measured the distance that i had between my item and the background and it applied those distances as padding all around and with this new feature i can select individual padding values like i have here or i can select a single padding value let's say 24 pixels or i can go 48 pixels and you'll see that the background resizes automatically and i can change the value of that padding just like before by holding down the s key and changing that value just dragging it up or down to the value that i want so very very useful feature now i can also nest various stacks so i'm going to select this card i'm going to add a stack to it and let's also set a padding here of 24 pixels and let's also set a distance here between these items of let's say 16 pixels and then i can go in here where i have the rating basically it's basically it's just a list of dots and i can add a stack to this as well notice uh xd now determined that this is a horizontal stack it automatically added four pixels for spacing between these items and i'm good to go now there is another benefit to using stacks that i haven't told you about watch what happens when i now want to move an element from a stack all the other elements will move automatically for me how easy is that you just drag and drop an element to its new position now be aware this doesn't constrain the element to that uh to that particular side so you can move it left right up or down depending on the direction of the stack so you would still need to do a bit of work when aligning items but in terms of the ease of use this is very very nice and it also works on a horizontal stack so maybe i want to select this item and i want to move it right here i can do that very very easily now this also works when for example you don't have a a background set to your elements so select all of them ctrl command g to create a group because stacks only works on groups and then you can hold down shift s to determine the distance between the stack items now there is another uh benefit to using this new functionality it's now easier than ever to create something like a button that has a background that adjusts to the size of the content so for example i have this uh this button here and i can skip the stack entirely and just go for padding so let's say i want 16 pixels of padding now when i change the text you'll see that the background resizes accordingly which is fantastic so that's how you can work with the new stacks and padding functionality in adobe xd now if you've worked in adobe xd before then you've probably used components but did you know that you can now add component states well i'll tell you more about those in the next lesson so i'll see you there welcome back to the course in this lesson i'm going to show you how to work with component states these allow you to create variants or multiple variants of a component and switch between those variants very easily uh this is super useful for creating buttons or form elements for example so let me show you how this works and uh let's create some component states all right here i have some more elements from the navigo ui kit that i showed you in a previous lesson and let's say that let me actually ungroup this let's say that i want to create another version of this card the first step i need to do is create a component okay and by default this has a default state so let's go ahead and create another one by clicking this button and selecting new state you can call this whatever you want i'm going to name it state 2 and with it we can simply go in here let's say we want to increase um or decrease the size of some of these elements so i'm going to call this 125. this one is a bit bigger so maybe 452 and maybe this one will be 310 something like that so now you'll see that when i select the component i can really easily switch between states so this can have like a gajillion uses you can create like a pricing table where you create a component for a pricing plan and you can just switch between those states to display the entire table i mean for example here i can simply duplicate this this component and i can choose to display the default state in the first one and state two in the second one see how easy it is to display multiple versions of the same element really really cool this also works very well with buttons so for example i could have a component button here and i can add like a new state for let's say hover or active all right so let's say the active state make sure that is selected i can change the fill color to something a lot darker right and i can then easily switch between the two i can also create a hover state for this button and the hover state let's say i want this to be a bit lighter and you'll notice that if i'm going to open up a prototype here and i switch to the default state i get that hover state or xd displays that hover state when i actually hover on the element with my mouse button which is pretty pretty cool so that's the gist of working with states now because this is a more advanced course i'm going to show you a more advanced way of working with component states and i'm sure you remember this example from the lesson about using masks and auto animate right in that lesson we used three different art boards to create the the animation right and in each art board i would basically move these images and i will also move the mask between these uh dots well auto animate also works with component states so we can actually recreate this gallery demo by using a single artboard and of course by using components so the first step is to select both of these group them up i'm going to call it gallery and i'm going to create a component out of it here this is the default state and i'm going to create a new state that i'm going to call state 2. now with state 2 selected i can go ahead and make my changes i can go in here and i can choose which image to display and also i can go in here and move the mask to its correct position like so and then select this at another state state 3 and in state 3 i'm going to choose to display image 3 and the mask i'm just going to move it to its correct position here and actually i need to make this a little bit bigger like so and just move it like so okay so that is my component we have state 1 state 2 and state 3. so now with the default state selected although it doesn't really matter i can go to prototype i can select the component and in the default state i can select this pill and i can drag a wire to the same artboard the trigger is going to be tap action is going to be auto animate and for destination i'm going to choose state 2. this one i'm going to choose state 3. and for both of these let's not forget to use ease in out and maybe zero point six seconds okay now let's select the component again and choose state 2. in state 2 i'm going to select the pill this should go to the default state and this should go to state three and then i'm gonna select the component again switch to state three and choose default here and state 2 here all right so with that let's go ahead and preview our gallery and let me just resize this so you can see it better and there it is we have the exact same animation the exact same prototype but this time we used a single artboard but we used a component with multiple states this is a much more elegant approach although it's not as simple as the one we originally used it's a little bit more complex to get the grasp of but once you do you'll see that it's it's very very powerful and the component states can be used in lots of different places all right now for the final lesson of this course we'll have a look at five plugins that will take your xd experience to the next level that's coming up in the next lesson so i'll see you there welcome back to the course in this final lesson i'm gonna show you five plugins that i consider to be a must-have for any xd user and these will augment your experience in xd and will make certain tasks a lot easier to accomplish so let's have a look at those five plugins the first one is called rename it and this is a plugin that allows you to well keep your xd files organized and you can batch rename layers artboards and all that good stuff now i would just like to mention that all the plugins that i show you here can be installed from adobe xd you just need to go to the plugins tab here click on the plus sign and just browse and search for uh for the proper plugin and then just hit install from this link here so rename it this is a very useful plugin for when you want to batch rename artboards layers and so on and i'm not going to spend too much time on these plugins i'm just going to show you their basic functionality and i'll let you discover the rest of of what they can do so for example we have a couple of layers here and they're all called field now instead of manually renaming all of these i can simply select all of them i can go to my plugins tab rename it rename selected layers or use the keyboard shortcuts for your system so let's rename these and let's say i want to call them rows and here you can see a preview of what they will look like and it can also add um like numbers to define a sequence here is ascending descending you can also add like a parent name so for example you can do percentage o and then a dash and then maybe you want to do another dash here and you get this bit once you're happy with the changes hit rename and all of those layers are now renamed very very useful you can also change from uppercase to lowercase there are tons of stuff you can do with rename it so make sure you install it and discover everything that it can do the next plugin is called ui faces and i'm sure you know the website ui faces this is basically a website you can get a bunch of avatars for your website design and there are plugins for all the major design software's out there for adobe xd it works very simply like so you select the avatars or the shapes that you want to contain avatars in your app you go to plugins ui faces you select the source that you want for for those images you can of course go and check out some advanced options here but you basically can hit apply and the plugin will download images and will apply them to those shapes you selected very very useful you can also select photos if that's what you want you have currently six selected shapes and you can go ahead and select the ones that you want from this list and then you would hit apply and it's going to apply them like so now this next plugin is called google sheets and it basically allows you to load the information from a google sheet or a csv file and paste it in certain fields in your design so to show you an example i have created a simple google spreadsheet with some information here i have name message and picture and for each of these i filled in some some random information along with some picture links from unsplash and let's say i want to place this information right here in this design so the name would go here message here and picture here well that's really easy to do with with this plugin basically you select the parent element you go to google sheets open up the panel this is going to show you the elements that you have selected and then you go to source and you can paste a url link you can go to google sheets or you can upload a csv file i'm going to paste the url link and i'm going to hit import right so that's going to read the information that i have here it's gonna determine that there are three categories name message and picture and it's gonna ask me how to map that information to my elements so for example the message in my design will map to the message field from my csv the name in my design which is this will map to the name i have in my file bg i don't want to map that anything divider avatar badge from these i only want to map the avatar to picture okay so once that is done i can hit apply right so as you can see the text content was inserted almost immediately but right now i'm just waiting for the images to be downloaded and applied to my shapes now this is a very useful plugin for when you have a lot of repeating elements in a layout and you don't want to populate them every time with different data right you have some spreadsheets somewhere saved or some csv files and you can use those or that information in all of your designs this is a very fast way of doing things especially when adding placeholder content and just like that you saw the plugin also downloaded the pictures and applied them exactly to the shapes that i told it to you can randomize the content if you want to and you can hit refresh or you can load a totally different file if you want that but that is the google sheets plugin our next plugin is called icons for design and this basically gives you access to over 5 000 icons to open it up you can go to plugins and open up icons for design and you can search for specific icons for example let's search for users and this gives you all the icons that match your search criteria from various icon sets so i have this demo set up here where i'm missing some icons all right so i can simply click and that's going to paste an icon in my artboard and i can simply come in here paste it i can you know align it like so i can resize it and i can give it a proper color maybe something like that i don't know what else do i have next settings right i can search for settings and i can grab an icon that i feel would work best for what i need here there we go that's the settings icon i can look at some of the other icons in here and i can see that they're 22 pixels high and i can adjust that to match and i can of course change the color to this as well and i can do the same for notifications so icons for design a great little plugin that you can use if you don't want to bother with organizing your own icons or if you just want something really quick the final plugin is on draw which allows you to download free illustrations to adobe xd directly from the interface now ondraw is a website that you can download these very cool illustrations and you can change uh their colors and uh all of these come in the form of svg files well with the xd plugin i can simply open it up and you can select the illustration that you want copy and that's been automatically copied to your clipboard so now you just need to paste it wherever you want to in your in your artboard how easy is that and you have a lot of illustrations uh to choose from so uh yeah undraw great little plugin you can also search for illustrations and if you want to change colors it's actually very easy once you download an svg it automatically adds that color to your assets panel so you can actually now just edit that color and make that illustration any color that you want it's really that easy and these are the five plugins that i think you should definitely get if you're using adobe xd all right and that's it for this course um i hope it was useful and you are able to learn some of the more advanced aspects of adobe xd thank you very much for watching i'm adi padilla and until next time [Music] take [Music] you

Channel: Envato Tuts+

Views: 48,362

Keywords: advanced adobe xd, adobe xd advanced tutorials, adobe xd, adobe xd tutorial, ux design, adobe xd web design, learn adobe xd, adobe xd prototype, adobe xd prototyping, adobe xd course, how to use adobe xd, adobe xd web design tutorial, adobe xd auto animate, adobe xd responsive design, adobe xd animation, adobe xd tutorials, xd adobe, adi purdila, adobe xd 2021, adobe xd responsive, adobe xd app design, ux research, adobe xd 2020, ui design, web design in adobe xd

Id: wFPSJ6gicLc

Length: 96min 41sec (5801 seconds)

Published: Wed May 12 2021