Adobe XD Masterclass for Beginners (Updated 2023)

what's up everybody I'm Jesse Showalter and in this episode I'm going to be doing a complete crash course a total overview of adobe XD this is the 2023 revised Edition we're going to cover all the latest and greatest features of adobe XD as well as all the basics by the end of this video you should know everything that you need to know to start using Adobe XD to design web applications mobile applications websites and more I'm really excited to get started and walk you through everything that has to do with Adobe XD let's do it all right let's jump in and learn about Adobe XD you can see I have it open here on my desktop it is available for both Mac and windows as long as you have an adobe subscription when we open up XD we get our little welcome screen here which has a couple of options of course you can hit the big blue button to start a new file you can also pick from different sizes or device sizes to give you a starting artboard artboards are an ID or a concept I'll show you a little bit more about inside got some helpful to tips and a lot of your recent files if you've been designing inside of adobe XD I'm just going to go ahead and open up this current file that I've been working on and you can see Adobe XD opens right up and we are ready to go let's take a quick tour of the interface show you around make you feel at home we have our canvas right smack dab in the middle that's where our Mouse is kind of wiggling around at and here we can point and click at things and if we hold down shift we get the hand that'll allow us to drag around the interface if you have a track pad you can also just kind of like track pad around like that so that is an infinite canvas you can zoom in and out of I'm holding down command plus or minus that'd be control plus or minus on the PC now we have all of our artboards that are on like our canvas and each of those artboards are represented in our layers panel currently our layers panel is showing each of those artboards one two three and four and as I click on them it highlights them over to the right like you can see there but if I click on any one of the individual artboards and the contents within it's going to jump into the actual layers panel so now we can drill down on individual elements and from there you can just be working in that artboard itself and seeing all the layers inside but at any point if you click on the canvas it's going to kind of Zoom you back out in the layers panel that 10 000 foot view to all of the artboards themselves that's our canvas that's our layers panel to the left hand side here you're going to have the tools panel it's always going to be present we have our direct selection tool which is V on your keyboard if you like hotkeys you also have your rectangle tool that's R ellipse with e polygon which will allow you to create lots of different shapes with multiple different sides we have line pen tool text tool artboard tool and our Zoom tool at the very bottom this is an important part of our interface this is where we are currently at we are in our layers view these are the three different views of adobe XD by pressing command y we will see that layers view it shows all artboards objects groups in our document we can also jump over to the libraries view that's going to be command shift y those are really important hotkeys to jump back and forth you will be doing that a lot in Adobe XD but this allows us to use our libraries our Styles our components which we'll talk about later absolutely and then we also have our plug-in view command shift p and so you can see if I was just kind of like out here designing I can press command y that'll actually hide and then show our layers command shift y to jump over to our assets and all of our document assets and the command shift p to jump over to all of the plugins in that left-hand panel it just switches everything in that left-hand panel let's hit command Y and go back to our layers and now we have those three views memorized we move up to the top you can see we can click back to home to bring up that home screen if we want but within our current file we have a design kind of like view we have a prototype workspace we'll call it and we have the share workspace we have the name of our file in the very top here and if we just double click on that we should be able to rename our document if we want to over on the right hand side we have the ability to do device preview so if I plug in this my computer that I'm working on to my device we'd be able to actually open up the XD previewer and make sure that we can see it on our mobile device really really helpful we have our preview button our desktop preview which is going to be really helpful we press that we get a preview of our prototype of our design with all the interactions that we'll talk about later and we also have the percentage of how we're currently viewing it and we can assign what percentage we want that view to be at maybe we want to view it at 50 percent it's going to zoom all of our artwork in and out we have our contextual panel over here and it's grayed out because we don't have anything contextually selected so once we select something we get all sorts of options and they will contextually change depending on what you're currently selecting so if I'm selecting an image like this we're going to get a lot of image options over here on the right hand side you're always going to get some like your distribution and your alignment tools you have your Boolean operations like adding subtracting dividing things just like you would in illustrator we have some special features like repeat grids and components and I do want to note that when you roll over a lot of these you get nice helpful little kind of like dialog boxes it'll tell you all about what those things do you're always going to see your transform controls and the ability to flip things horizontally or vertically we have some special features here called scroll group excuse me that we'll talk about scroll groups are a lot of fun you have some layout options including responsive resizing which we'll get to as well as your normal kind of appearance elements like changing the opacity to things your fill your border and even some blending modes just like in Photoshop or illustrator then down at the bottom if anything has a is able to have a fill or a border you're going to get all those options as well to open up and change the color and and we can also change those into linear gradients radial gradients angular gradients we can drop images inside of these which we'll talk about and you can change your border sizes and all of the elements there for the Border as far as the thickness and the type of border and ends to all of your points and everything so that's your contextual panel if I click on text I'm going to get some text based options here obviously which we will talk about here in a little bit we also have an effects panel down below when they are relevant and you'll see even more things pop up as we start to click on components and components that have States and things that have to do with video other things will surface in that contextual panel and we'll talk about it as we go next up let's take a look at these things we've already kind of talked about these are artboards how do we draw new ones well we would either select the artboard tool over here but or we can press the hotkey of a but when we select the artboard tool we're also going to get in our contextual panel see I told you relevant things would pop up contextually we're going to get a bunch of different device sizes so we have mobile device sizes tablet sizes we have desktop sizes and even some social media sizes there we do have our little cursor here so we could just draw an artboard of any size we want or we could just click on any one of these like an iPhone 14 pro Max boom pops it right in it immediately names it and we can come up and double click on our layer just like that and rename it if we want to once we've created an artboard like this we might want to actually draw some fun custom shapes on there to do that we're going to use our pen tool and so we can either hit our pen tool up here or we can hit the hotkey of p and when we do that we get our pen tool so I'm going to zoom in here by pressing command plus to zoom into my artboard you can also hold down Z and you'll see you'll get the zoom tool and we can zoom into a particular portion of our design or our artboard I'm going to go back and hit P for pen tool and we can start drawing with our pen tool really very similar pretty much identical to the pen tool you'll find in illustrator or photoshop creating bezier curves with it coming around and then connecting and then you do have some options inside there as well you can click on any of these and mess with the handles and change the shape like so and then once you've done that obviously we can fill it with a color maybe we want like a really obnoxious purple color we can take the border on or off and we can even start applying some of these effects like an inner Shadow or drop shadow and we have some fun things like background blur or object blur that you can play with as well but that is our pen tool and then once we've done that we might want a little bit more of a structured shape not such a weird crazy pink shape so what we'll do instead is I'm going to hit R for rectangle you could have also gone up and hit your rectangle tool but R for rectangle is pretty easy to remember I'm going to drag a holding down shift a perfectly constrained Square out or if I let go of shift we can shape that any way we want it I'm going to release that and again fill it with an identifiable color so we can actually see it there and then we might want to actually draw a circle as well and we'll give that another equally atrocious color and then lastly why don't we pull our polygon tool out that we talked about during our UI tour and we'll draw it a polygon it's going to start with a triangle but you'll notice contextually things have showed up in our panel that will allow us to change that and so I can head right over here and change the amount of sides that our polygon has on and on you can go holding down shift will allow you to do move or increment anything inside of adobe XD by 10 10 pixels or an increment of 10. so you can see I'm holding down and moving up to 13. Let's drop it back down to something like eight we can also soften this the edges of it a little bit so we can kind of round those Corners the Border radius of the corners and then we can also either through the percentage here we can reduce the inside kind of like shapes for our our shape here we have a little control here on the screen as well for those rounded corners and then also to pull these in and out creating different shapes and stars kind of angling those things down and so from there once we have the shapes that we like all of them equally atrocious we could select each of those by just dragging over all of our shapes like so and then we could use our Pathfinder tools or our Boolean tools just like in illustrator by adding them all together unionizing them or subtracting them and when you do that adobe XD is actually really smart it holds on to each of the individual shapes so it's all still very editable which is really really cool inside of adobe XD to add some text to our design to do that we can hit the text tool in our tool panel over here or just press T now you can either just click and this will allow you to start writing text onto the screen and we'd probably want to make our text a little bit better of a color and to do that we'll just use our selection tool and make it black like so or instead of just hitting T and then tapping to open up a single line of text box we can actually grab and drag and create a defined text area this is actually a pretty important distinction inside of adobe XD because we have I'm just going to put some text inside of here we have a couple of different types of text boxes inside and and we're already kind of seeing those take place so I'm just going to zoom in here a little bit so you can see that this first one is what is called Auto width text that means that if I just left align it here no matter how long the text goes it's just going to continue to stretch the width of the text itself whereas this next one here is auto height text and that means that as we continue to type it's going to expand the actual height of the box and then lastly we do have such a thing as just a normal text box here so this last one is a fixed size and that's going to be us actually rigidly defining the area now the problem with that is that as we continue to go past XD is going to hide that last little bit of text that's overflowing now if we want to really quickly kind of like expose all the text we can kind of force it by just double clicking this red dot right here double click that and expands to the perfect height of the text and transfers it to becoming a auto height text box and so those are your three types of text box you have your auto width Auto height and your fixed size once we have put text on the page you can actually choose like all the different like typography you have installed um selecting it through there you don't have visible like or visual previews quite yet in XD but I'm sure those are coming at some point you can change the size and the different weights that you have and you have all of the different options inside of here like character spacing line height paragraph height uh justification and then you have like um you know creating making things uppercase and all the ligatures and everything that are inside of here but that's text in a nutshell you can grab any text box and you can actually rotate simply by hovering over the uh like the area or like any of the Little nodes and that's actually kind of an important thing to notice here any of these little areas you'll see on pen tools like points that you make or text boxes these are called nodes and they're going to come into play a lot throughout the rest of this tutorial all right let's move into some more advanced functions and features inside of adobe XD and let's start with style uh we are currently in our layer view that's command y but if we press command shift y we can actually jump over to our document assets and I'm going to zoom into my document asset so we can kind of see them and I don't really have much I do have a component which we'll talk about in a little bit but I don't have any videos or character Styles or colors these are all things that we can actually create assets out of store them here in our document assets that way we're reusing the same Styles the same colors over and over and over so for instance I could zoom out and uh let's find like for instance let's find this yellow that's a good yellow we have that like in our fill right here and you can if you want uh just add like a little Swatch inside of your like color swatch picker thing but you know that's not really as productive or efficient as if you had that thing selected that's shape selected that had that color fill and you just head up here and press the plus button it's going to add that fill so later on if we hit R for rectangle and we're drawing maybe like a shape of some sort we can come in here and right click and say hey apply this to the fill and now we have we have effectively created what CSS does inside of front-end code we were able to Cascade the Styles throughout the rest of our design so that means that if later on I really don't like this yellow I'm going to come in here and actually just right click and I'm going to edit that color it's going to give me an uh like an like an editable like Color Picker and I'm just gonna command C I'm going to copy this so I can revert back to it maybe I really want it to be turquoise blue well now everything you can see that had that color applied to it that style or that color in my assets panel it's going to change it across my entire project now this is really helpful when I start designing applications and websites and I have 5 10 80 150 screens inside of my project I don't want to go through and change the color one by one I want to be able to assign that color with this kind of global variable up here change it once and see it changed everywhere let's put our yellow back and you can see everything goes back to normal pretty cool we like that quite a bit let's do the same thing here with our black background I'm going to press plus and you can see it actually because we we grabbed our just our entire artboard it just pulled every color out of our artboard so we do have a few duplicates here and we can do a little bit of editing we can come in here and say hey I'm going to delete that one and I like these two I'm going to just kind of rearrange them kind of a darker black and an off-black yellow and white and if we want to see these more in kind of like a more of a Swatch view we can change that from the list to the Swatch which is pretty cool all right that's I like that a lot we also have some typography here so we can select multiple items and add those to our assets panel at the same time I can select this headline and this body copy just come into character Styles and pop those in and you can see it's going to give me like all of the description of everything that has to do with that typography selection I can kind of organize them and if I want to even rename them like headline and we'll call this I think a lot of times I like to call these like body copy and then whatever the like all the characteristics are like maybe it's 16 and this one's like 25 let's do 25 in there like that and now we have a really nice description of what that text is now no matter what we do later on if we come back to our really ugly design and we decide we want this to be a headline all I have to do is click here and it's going to apply that headline style and you can always override styles that you have on your screen right like in instances of that style so I can come in here and make make this black right it's our headline because our headline is it's pulling the color of white into that style but we're just over writing like this that doesn't actually change our headline style but if we select body it's going to make it white select the headline again it's going to revert back to the master style that's inside of our assets panel so that's pretty cool so we can actually hold on to Styles and then kind of iterate on them on the fly without messing up our entire system that we're building over here so those are our Styles now let's talk a little bit about components because you can see I do actually have a component built in here called card but let's do something a little bit simpler let's say I really like this button that I have inside here I'm going to press command y to go back to my layers and you can see I have a little folder here it has a little plus icon and the ellipse and it's wrapped inside I just grouped it in a folder by pressing command G to turn it into a button I really really want to turn this into a component so that I can reuse that component that one single component over and over so if I make changes just like in my colors or my text to that single Master instance of that component it's going to apply it everywhere so how do I do that well I can right click on it and if I want to I can turn it into a component or I can just hit the hotkey for that which is command K so I've turned my button into a component I can right click on it again and you can see I I want to now edit the main component it's it's gone ahead and created a component and hidden it somewhere now this is very important to note that when you have a main component a master component we're going to have a little filled green diamond as one of the nodes that dictates that this is the master instance any changes made to here to this master component is going to change it everywhere so that means if I come in and I take my plus and I turn it into an X look at that it's going to change it everywhere whereas this is it an instance of the component and you can see it has a white empty Diamond note on it letting you know that it is an instance it's also very important to note that when I select the master component our contextual panel will tell you that this is the main component versus this one which is in fact an instance of that component right so now we have a component but what if we want this component to have more than one state actually we saw something really really interesting with the twisting of it from a plus into an X I can kind of see that becoming like a really fun interaction and I don't want to create an entire another component a separate button that's going to be kind of weird Adobe XD actually allows me to bake in multiple states of the same component right it's like having one thing with multiple faces or multiple instances okay so you can see we're we're currently on our main component and it has a default state right we can add a new state and later on we'll talk about when we create these component States some of these are built-in prototype triggers right so to hover over it to tap it and toggle it but let's just go uh well actually let's go and experiment with it a little bit right now instead of creating a new state we'll create a toggle State it's just going to bake in a fun prototype interaction inside of it we'll call this x to close we get to name it and then any changes we now make while we're selected on this state it's going to be a difference between the two states so let's select our plus we'll turn it into an X okay you can see we're currently still at our X to close let's switch back to our default State now you can see we have two different states of the same component what's really great about that is later on command shift y can open up that components menu and I can say I want to bring in one of my buttons and then I want to change it to an X to close version instead one component doing multiple things super mind blowing super fun so that's components and component States all right let's talk a little bit about responsive resizing because we have our layout here and we want things to actually flex and move potentially as our artboard kind of grows right now if I kind of pull my artboard and imagine like this being a device with maybe a larger device or a browser that's kind of stretching this is not really playing nicely or responsively so let's go ahead and press command Z and go back the first thing we want to do is go to our artboard and actually turn on the toggle that says responsive resize this means that anything that actually happens inside of our artboard now is automatically going to try to responsibly resize so now we can actually try to stretch out our artboard and you'll see we're getting a lot of really really good results but we're still getting some weird results as we kind of tuck in our text is moving weird what if we grab it from the bottom here and we do this our text is flying up where it's not supposed to let's fix all that up right now shall we so the first thing we want to do is go in and now not tap on the artboard but on any individual element that I want to work with I'm going to come in here and I'm going to assess the responsive resizing kind of settings that have been placed there it's not fixed width it's stretching to the left and right it's pinned to the top it does have a fixed height so my box is not actually growing when my artboard grows in its height let's figure out what's going on here with our text I'm going to go to manual and I want this to stay fixed to the top and the left I want it to not have a fixed height so I do want it to stretch that let's stretch our box out a little bit so that our text boxes match but I do want it to have a fixed height okay cool let's grab this one as well go over to manual check that out let's pin it to the top we don't want to fix width okay we want to stretch the left and the right as well like this what happens now when I grab my artboard and I start actually stretching it out is my text actually stretches the boxes are now officially set to be Auto height and so that means that they're going to ebb and flow along with my box and nothing's going to get too weird it actually kind of perfectly kind of changes so maybe we have like a really small iPhone there and maybe we're moving out to a larger one now you'll notice as soon as I started kind of like moving past the size that was initially set for this device size I get a little pull bar down here and that's going to actually dictate the above the fold or what is the actual device pane anything underneath it is going to need to be scrolled to so let's put some text down beneath and let's experiment let's press play on that and you can see as I scroll down we have some text down below and we have to scroll to it to get to it we have defined the device size and you can actually see it's pretty Apples to Apples there the size of it like and and actually like the perfect like dimensions of it so we're defining the dimensions and what is actually scrollable and that's what you're doing when you press artboard and slap an artboard onto the screen you're defining what the actual size and height of it is and then choosing oh maybe I want to be a little bit less and only show this portion of it so that might be something to take into consideration as you're designing but usually a lot of times you can just work with the device defaults that are placed there for you let's talk next about photo and video integration inside of adobe XD that's right I said video it's pretty rad and it's really really easy to use if I have a shape this is one of my favorite ways to use images in video inside of XD I can grab an image that I want to bring in and I can do a few things I could just drag one onto the artboard and now I have an image to play with or I could drag an image and I can actually hover over the shape dropping it in will immediately crop that image into place so now when I actually stretch my image around it's trying to fill that shape and constrain it nicely so we might want to actually give our model a little bit more space here command y to bring up our layers panel and we might want want to bring our text down now and again our everything is defined so when we look at it in preview it's looking really really nice right and it actually it'll stretch as well as we play with it so we do have our image over here it brought it in really massively you'll notice we do have some nodes at the top so we can any shape can be the edge of the Border radiuses or the corners can be softened like that and as you do that you'll see in our contextual panel we're actually getting our edges here so maybe we want you know 200 for our border radius that's what 200 looks like if we want to do unique not like consistent all the way around but unique to the top left and then the top right bottom right bottom left it goes around it shows you which one you're actually selecting so maybe I want zero on this side and zero on the bottom left now I have this really interesting image that has sharp corners and I drag it into my artboard so it has really sharp corners on two two sides of it and soft corners on two other sides of it so that's kind of cool and it is a shape so it's going to try to constrain that shape if you want to not constrain your image and you want to get really wonky all you have to do is uncheck the uh the lock and that will allow you to actually warp your image but I highly recommend that you don't warp your images like that all right images are great they say a thousand words but what it says even more words than a photo is actually a video so let's do a little video integration here I'm actually going to zoom out on my canvas pressing command minus I'm going to find a really fun video that I like I'm just going to drag it in now in Adobe XD you can't bring in massive videos they can't be hour-long live streams or movies or whatever they have to be under 25 megabytes currently all right our video is awesome but because it is a video this element is going to be fixed and we don't want to warp our video and we don't have the ability to kind of constrain or contain it inside of a shape so what do we do well what I'm going to do is I'm going to drag my my photo out here I'm going to fill it with just a color and then I'm going to take my video and try to match it somewhat if I can I'm going to move my shape to the back and I'm going to select both of these these shapes this video and this shape and then I'm actually going to mask with the shape which the hotkey is command shift M and when I do that I now have a manually created mask that means I can click into it and I can move my image around a little bit and mask it I could make it larger if I want and do a little bit of art Direction maybe we like it like that but now we have a video that is cropped and masked and I'm able to kind of work inside of that mask if you want to get rid of the Mask you just right click and say ungroup mask and it will take care of that for you let's remove our image and bring our video into play and you can see that we're currently when we are selecting a mask we don't have any of these of our video options available to us in our contextual panel that's because we're currently so selecting the mask group itself we can twirl that open you can see there with that little play icon is your actual video when I select that we get a bunch of different video playback options in our contextual panel let's click here on our little icon we can actually kind of scrub through our video and see how we can play it and see what it's going to look like you can actually even trim this a little bit and say hey I don't like that first part or that end part so I want to trim that I want to Loop the playback and then we can Define hey do we want this video to play on tap do we want to play automatically yes we do it's going to play automatically and it's going to Loop and it looks exactly the way we want it to Let's zoom out now let's press play on our prototype up here in the top right corner and look at that we have video playing inside of our Adobe XD design and it just keeps looping it's totally awesome it's totally amazing and that is the power of video inside of XD all right let's keep going we'll talk about few other great Advanced functions inside of XD starting with the idea of a repeat grid I'm going to zoom into our design here and I like this uh I like this grouping of text here so the first thing I want to do is I want to command G put them in a group and I'm just going to rename this text in my layers panel here and then I really like it I just kind of want to repeat this down the page so we're going to use this button that we've been kind of looking at but ignoring the whole time and that's the repeat grid button we can either hit that or press command R and it's going to allow us to create repeatable a repeatable grid down the page instead of duplicating over and over I'm going to press command R we get these fun little pull bars I'm going to pull them down like so great just like that and then we can dictate the spacing between all of them maybe we want to be more like 26 that's awesome and then any change I make in that very first element of my repeat Grid it's going to be reflected everywhere so maybe we want this not to be pure black but we want it to be maybe a little bit more of an off block like so maybe I want to hit L for uh L for line and I want to draw like a line inside you can see how it's doing it it's actually adding it everywhere in my repeat grid maybe I want to push it down just a little bit perfect like that and then we can select our entire repeat grid again and change the spacing on it I love it so maybe we really love this this is exactly how we want it to look and we can actually update so this one could be the black tank here and this one could be the red tank so we can update all the instances inside of our repeat grid and you can even update some of the text in uh the original but as soon as you affect any of the properties like the spacing of it or the actual like size of the text it's going to reflect everywhere else so some things can be overridden other things are going to reflect everywhere if you don't like this repeat Grid or you're all done using it you can right click on it and just say ungroup grid and now you have individual elements that you've kind of created so now we can just kind of like tuck those away here on the left hand side and we have four unique separate ones outside of the repeat grid now these are really really great and I'm going to delete a few of these because they've worked for us for a moment but we don't want them there anymore now our little grouping of text here is nice but I might want to quickly rearrange them and it's really tedious to kind of grab this and move it down on and then figure out where it needs to be instead once I've grouped things and I have the group selected over on the right hand contextual panel I can actually turn on stacks and I can turn on padding what that's going to allow me to do is say I want to Stack these things vertically or horizontally like that let's stick with the vertical stack and then we can actually dictate the spacing inside of our stack now what's really great about this is at any point you can grab an element in your stack you can move it around and it keeps the actual spacing it keeps the distance right just moving things around if I want to add something to my stack like maybe I want like a new paragraph it too is controlled by the stacks Master kind of padding and spacing and so as we space eight there that would be that would really work out great for us just like so so maybe we want this to be more of a link like buy now we'll do something like that why don't we change the color of it to be something that's a little bit more like a link and that looks perfect why don't we actually duplicate another one of these and you can actually put Stacks inside of stacks so I can group those two together turn stacks on and then change the padding there and so now if you want to use this instead of repeat grid I can grab an individual element with inside of that's inside of the stack and I can actually copy and paste and it will actually hold all of the information of the spacing inside of the stack now what's also really great is we have control over the padding so if we want to turn on padding and actually kind of create some padding around our element we can do that as well and now it's kind of contained like perfectly inside with like nice 8 pixel padding from the left and right hand Edge and maybe this was like a nice card for us or we're kind of creating an invisible card that works really well so that's how to use padding and stacks to really control and bring consistency to your designs next up I'm going to talk about a really powerful feature called scroll groups you can do some really fun stuff with and to do that I'm going to open up a different file I'm going to press press my little home button here and I'm going to grab this map kind of lake and river activities finder that I built out inside of this design we have the background which is basically one big map and I want to be able to scroll around inside of that map think of like Uber or Google Maps I want to be able to scroll around now if I drill down I'm holding down control and that allowed me to kind of like drill down specifically on things so if I want to like drill down onto like the text inside this button I can actually hold down control and click right to it it goes right to the exact layer that I'm looking for well I want to do that with my map you'll notice that my map is inside what's called a scroll group and that scroll group allows me to do something that's really cool which is when I preview my prototype I'm able to drag my map around now the the details there are not actually connected to it but I can drag drag that map around because the map is bigger than the space defined for the scroll group how do we do this well I'm going to grab this uh this map and we'll create it from scratch I'm going to come over here and press a for artboard and drop a new artboard onto my screen and I'm going to paste this map inside now we have a map and let's kind of zoom out and over and away so we can work a little bit I really really want to be able to scroll around how do I do it well the first thing I'm going to do is I'm going to decide hey do I want this to be just horizontal scrolling do I want it to be vertical scrolling or do I want it to be horizontal and vertical that seems like the one I actually want so I'm going to press horizontal and vertical and you'll see what happens is I get some nice little pull bars put to the top left bottom and right of my image now my image is still massive so I'm going to choose where we want it to start I'm going to go smack dab right in the middle so we can see a little bit of this Lake down at the bottom now when I press play I can scroll around with some nice kind of easing even like just dragging and moving around inside all of the like the entire map and anything that goes inside of that scroll group so you can see we have the scroll group and we we have the rectangle maybe I want to pinpoint a place of interest on my map maybe that point of interest is represented by an e for an ellipse and it's over here on this street let's make it really bright really really obvious with the purple like that and we'll just call this point of Interest POI it's inside of the scroll group so now when I scroll to it you can see it's staying fixed to the map because it's inside the group that is allowed to scroll all right so far you've taken a tour you've learned all the basic functions of adobe XD and a lot of the advanced functions now let's go into prototyping where you actually bring your design to life all right we're back to our previous design that we were working on and we have a few screens here that we want to actually start creating some prototype actions so we have screen one that has our text and our buy button and our video and really what we want to create is a second screen with some differences so why don't we move the text down and we'll actually double click into our mask and we'll stretch the size of the mask out and then we'll move the buy button down to follow the first thing we're going to do is create a really basic screen to screen prototype and we're going to do that by hitting over to the Prototype view or workspace here once we're there I'm going to select my buy button and I'm actually going to grab this little blue node and just drag it over to my second artboard that means on when I interact with this button somehow it's going to move me over and we know also that uh let's just say We'll tap the anywhere on the video to head back okay so we're going to drag back now let's address what we call our triggers or our wires that we've created here so we're just going to drag that back you can see two of them one of them is happening this way the other is happening that way I can actually select the wire that's moving from this one to this one and when I do that in my contextual panel I get some information it's telling me the trigger type the type of transition that's going to happen where it's going to go and any sort of Animation information that I need here all right so first thing we're going to say is we really like this it's a tap trigger we're going to explore some of the other trigger types as well but we can do drag gestures we can do work on our Xbox controller or our keyboard or we can actually even do voice controls which is really really fun but let's start with a simple tap and we won't do a basic transition we'll do something like Auto animate which is where like a lot of fun happens it's going to actually automatically kind of smartly animate anything that's here that's a matching layer from one state or one place to another you're going to see some animation kind of take place when we choose Auto animate we get to choose what type of easing so let's do something like a simple ease out and then the duration that the animation is going to take let's do something like 0.5 seconds and then we have the one that's going back it you can select a wire or an interaction there and you can actually delete that interaction if you want you're only deleting the interaction itself not anything on the canvas all right so with that done let's actually go back we'll redo it again and you can see on tap it's going to save those settings we just had for the previous one tap Auto animate with ease out in half a second let's go right back here and we're going to just press the little home button that creates the start of what we call our flows right and it gives us a little tag we can name this flow let's call it animation something like that and we'll press play on it you can see we get our video playing looping look really really great and we can hover over our button and you can see that's an interactable point we get our little hover button we click it auto animates and looks really really smooth we can click anywhere here on the video it'll Auto animate back and this is the basis for the majority of the Prototype work that you'll do state to state or artboard to artboard animation now what's really cool is we've actually already created a component that has baked in animation so that no matter where we place it we don't have to worry about going from artboards to artboards but the component itself already has an animation baked into it we made our little button over here that has our X to close and so we can place that somewhere in our prototype and you'll notice that if I click on it I don't switch to the other artboard right it's just happening here now I can duplicate it and take that same button and maybe do something interesting with it like move it up here right but now you can see when I move from one to the other that component is going to move but it's always in interactable because it is in and of itself a component that has animation from state to state now we did that by creating that toggle state in between but you can do all sorts of cool things by creating components and then actually creating animations inside of them we're talking about meters that move and progress bars all sorts of fun stuff you can do that using component States and then prototyping just like you would the artboards between the components themselves or the states of the components pretty cool stuff let's go back to our prototype because previously it actually built in some drag gestures you can see the trigger that's being used for this one is drag Auto animate and it's moving from screen to screen and so we Press Play Let's make a little room so we could see it we just kind of drag over and we get fun drag gestures changing the image inside the size the masking and all the details below to slide in and out really really cool there's a lot of other really cool action types that you can use news we won't go into all of them but I'll show you where to find them instead of doing a simple tap with an auto animate you could have done a really quick simple fast transition like that you could have also created it into a hyperlink it'll actually open up a browser on your device or on your computer you can create overlays which will allow you to create slide out menus or modal dialog boxes that pop up and you'll be able to pull in designs from other artboards to be that modal or be that dialogue you can scroll to you can create anchor links that scroll up and down the page like a navigation in a website that actually like leads you down to the very bottom maybe the footer you can just go right back to the previous artboard we can actually play audio and do speech playback we can do crazy things inside of XD I'll leave these for you to explore but these are the different action types that are available to you one more trigger type that we haven't covered yet is timed triggers you'll notice when I go back into my prototype and I select any element I get a lot of different trigger types I get tap and drag keys and Gamepad and voice but I don't get time triggers that's because time triggers can only be applied to the artboard as a whole not to individual elements so let's come in and grab the entire artboard itself and actually drag that wire over to the next artboard and what we get there for triggers now is the opportunity to create a timed trigger let's create a timed animation let's have it Delay about two seconds and then we'll have an auto animate over there and let's have it do something really crazy like wind up and it'll be a really long animation like something like two whole seconds so it'll wait two seconds and it'll do a long two second animation if we haven't clicked anything yet with that said we can press play let's see if it works 1001 1002 it's doing it all on its own let's go back for 1001 1002 it's just because it's a Time trigger It's Just Happening we can do the same thing over here so we get like a nice bounce back and forth let's do a make sure we're selecting an entire artboard good like that yes we want a Time trigger two seconds the whole thing everything's looking great let's press play and now with my hands up in the air you should be able to see it go there and then after 1001 1002 it should go back and these are your timed triggers you do a lot of really cool things with time triggers you can do loading animations and you can do like user generated like input all sorts of really cool things using your timed animations and triggers the last few things I want to talk about are plugins and sharing super powerful inside of adobe XD here we are back inside of our project and we've really been working a lot in our layers panel command y or our assets panel command shift y to open up all of our document assets what we haven't pressed is command shift p to go down to our little plugins menu our little Lego block down here and Adobe XD has tons of great plugins you can install for free and just start using things like building charts or color scales and ranges adding thing confetti or color like plugins adding maps and lorem ipsum Lottie files photos and renaming things for contrast and UI faces there's all sorts of great ones and I won't go into you know all the ones that I have here or the ones that I use but it's really really simple to use plugins all you got to do is go into that plugins menu and if you don't have one you like you can press plus and that'll open up your Adobe CC screen where you can search for plugins inside so maybe we want some icons all you have to do is install it like that and it is acquired it's installing the plug-in as we speak and then as soon as it's done it will be available for me to use it'll pop up in my plugins panel over here on the left hand side all right it's been installed we should be able to look over here and see icons for design there it is to run your plugin all you have to do is Select whichever one you want to use click on it and it will start running in the left-hand panel this is a photo finder where you can find lots of really cool images and then immediately apply them into the shapes and into your artboards and side of adobe XD plugins are great but sharing your design is even greater and to do that all you have to do is move over to this elusive share workspace we haven't touched yet when we do that we decide which flow we want to share and then when we do that we can actually create a few settings up here so maybe we really want to create a link a new link right here and then we're going to say what do we want the view settings to be now it's just really just setting the type of functionality and permissions for whoever's going to view it so maybe we want to get feedback people will be able to do some commenting do we they need to be able to see the Prototype and then actually get code components out of it that'd be for development presentations user testing or we can customize let's just choose development and we'll export for iOS anybody that has the link will be able to share and actually see this thing and so we are generating the link right now and as soon as it's done Adobe XD is going to create that link for us when we click on it it'll open it in our browser and we'll be able to have a working like prototype version of what we've created you can see you can actually do all the interactions just like you could before but you also are able to open it up and get all sorts of different details for the code environment for the developer environment that would be sizes and colors character Styles and interactions that are defined and they can get all like the different elements that they need out of them as well as being able to comment and we can actually like place a pin somewhere and then comment on it like this and that comment will then be available for feedback we can reply to it and kind of like communicate and interact with our clients or our stakeholders and this is sharing creating these links managing the links and to do that we can open up our plus here we can go back and manage all of the links that we have created and they're like living documents living files and we'll be able to see them all right here we can click on any one of those and share the link from our link database as well which is really really cool well that's it that's everything you need to know to get started with Adobe XD and begin designing websites and applications and blowing people's minds with all of your creativity I hope you enjoyed the video if you did make sure to leave a thumbs up subscribe to the channel I make lots of videos about design and development and Adobe XD also so ring that Bell so you know when more videos like this one come out if you have any questions leave those down in the comments and check the description for a bunch of helpful links about Adobe XD or how to learn more about design with me and other great resources I hope you're having an amazing week I hope you're designing amazing things making amazing things and using tools like this one to accomplish your goals we'll see in the next one

Channel: Jesse Showalter

Views: 163,231

Keywords: jesse showalter, jesse showalter design, learn ui design, learn ux design, adobe xd, adobe xd tutorial, adobe xd web design, adobe xd basics, adobe xd basics 2023, how to use adobe xd, how to use adobe xd website, designing an app in adobe xd, designing a website in adobe xd, designing ui in adobe xd, adobe xd responsive design, adobe xd responsive, adobe xd responsive website, adobe xd prototype, adobe xd prototype website, adobe xd prototype example

Id: C-_pr1Hzlvg

Length: 48min 34sec (2914 seconds)

Published: Mon Nov 21 2022