Adobe Xd Basics Tutorial #14 - Components

Key Takeaways

components are amazing feature of adobe xd and they are really going to help you expand your workflow they're really going to help you organize your workflow and they're really going to help expand your creativity even more because inside of a single component you can have multiple states you can have multiple options multiple looks and fields for your particular component so if you go back to adobe xd here we have the button which we created in the previous video and what i can do is hit ctrl or command k and i'm going to create a component and it's going to show up right here what you can also do is if i go back you can click right here you can click here to create a component same like we did for the character styles and for the colors and finally when you select it you can also click right here to add a component so basically here here or you can always use control or command k on your keyboard to create a component what we have right here if i zoom in just a little bit closer is this green diamond at the corner that green diamond indicates that this is the default state so default state is basically a starting state for your component let's say that this button is going to just sit like this on your website perhaps you're going to have inactive state which means that you cannot click on that button maybe you're going to have the hover state which means that user actually hovered their mouse over that button and then you're going to have clicked state to indicate that the user actually selected that button you can do all of that in a single component you just have to add those states and then activate them later when you start with prototyping so in this default state this is just basically a random button just sitting there and it's going to show you this green diamond if you have instance of your component so if i hold my alt key and change it like this if i select this you can see this is the filled in diamond and if i select this you can see it's hollowed out diamond so what that means is instances of your main component are basically like parents and children that's how they called it actually so this top component is actually a parent component it's created first so it's kept all of the original settings it's kept the size it kept the font style inside it kept the colors it kept the rounded corners all of these things it kept inside while this bottom component and child component actually it has all of these settings but if i click right here and actually let's change this to learn more now you can see it updates in real time as you can see productivity tip you can create components that resize automatically with padding and i'm going to show you that in just a second but this is the parent component this is the child component so basically whatever change you are doing in the pattern component is going to show up in a child component but it's not going to show the other way around so for example if you change the color inside of a child component and then try to update it to the parent component it's not going to work it's just going to work from parent to child so if i double click right here to access it like so so if i show you that in just a second so if i go into my parent component double click right here and if i for example go back to here for some reason it won't allow me yeah here we go so if i round my corners you can see how it looks but if i do the same thing in a child component as you can see it's not going to show up in a parent component because once again this is the child component same thing about changing colors same thing about changing the text but just remember when you're creating these components parent and child components whatever change you make in your child component is going to stay fixed inside of that child component and it's not going to apply to the parent component what that means is if i did this for example and now i go back to here if i try to resize it it's not going to work because i already resized it right here but if i want to move it it's going to move if i want to scale it in size it's going to work so any change that you didn't make in your child component it's going to work in parent components but any change that you did make like in this case we change that uh we change the corner radius to this bitcoin radius it's not going to work inside of a parent component so these are just things that you need to know finally let me show you states so as i said this is our parent component and this is our default state what you can do is click on this plus to add a state it's going to show you new state so depending on what you want to do we have new state we have hover state which obviously is for our state and we have a toggle state which is great if you're creating these toggles inside of your ui design so in the new state what i can do in this case is create this inactive active clicked deleted so all of these states for example for this particular button and inside of a hover state i can always create a higher state you cannot have multiple horrors you can just have one but you can have multiple states so if i click on the new state what i can do is call it for example clicked and inside of a click state what i can do is change this color to this color for example so now if i switch between my default state and my click state you can see how they look like so if i now add a hover state call it hover and inside of my power state for example i just want to include some ridiculous drop shadows so 20 20 and 20 like this this is the default state this is the click state this is the hover state so what you need to do now is hit prototype and i'm not going to show you that right now i'm going to show you that in a later lesson but for now you can always hit preview right here this is your desktop preview and when you hover you can see how that works so this is your hover state and you can obviously change even more by going into settings inside of your prototype and then changing the duration of these hover effects the duration of these transitions and all of these things and basically that's it for your components as you can see it's quite simple when you get your hands around it when you get the grips just remember whenever you are duplicating your component and creating parent and child components just remember whatever change you're making in your parent component is going to update throughout your child components so if once again i hold alt and create i don't know four different components for example and i click right here and i change it to plain gray you can see it's going to update through all of them but if i click on this one for example change the playgrade it's just going to update on that one and if i for example make these round it's just going to update on that particular one but if i for example change this learn more today it's going to update everywhere because even in this channel component i didn't change the color so basically that's it for the components in the next video we're going to talk about 3d in adobe xd it's not massive it's not going to give you these massive possibilities but it's going to allow you to do some interesting things here and there so i'll see you there