Adobe Xd Basics Tutorial #6 - Shapes

Key Takeaways

in this video we are going to talk about shapes in adobe asd what kind of shapes are there and what kind of settings can you use for those shapes so if i take you to adobe xd as i mentioned in the first video these are all of your shapes so if i hover right here this is your rectangle shape this is your ellipse shape and when you hover you have these handy shortcuts so you can click that key for example for ellipse tool it's e so if i hit e on my keyboard hold my shift key to scale it up evenly like so or if you want to go from the center you can hold shift alt or command now sorry shift or option on a mac and you can simply scale it like so or if you just want to uh go to one side you can hold shift and it's going to scale to whichever side you are drawing then you can use v or this select tool to select all of your shapes hit delete and if at any point you go left or right you can hit ctrl 0 to snap into position it's going to bring your r port to position or if you want to zoom in really closely you can hit control and then two or one for example depending on where you want to zoom in at which level then what we have as i said we have rectangle and if i scale it right here we have ellipse we have polygon and finally we have the line line is the most basic tool and as i mentioned in a previous video when you select the shape right here on your right hand side you have all of these settings so depending on which shape is selected you're going to have more or less of these settings so what we have right here is the width and the height so you can change the width and height to follow these shapes x and y axis and this is your rotation so if i enter 45 degrees for example you can see it rotated by 45 degrees if that's something that you want you can also go negative 45 for example it's going to go back to this side and you can always go to zero to snap it into position what we have right here are these commands so flip horizontal you can have flip vertical this is your scroll group and perhaps it's a topic for another video this is a vertical scroll and this is scroll in all directions so basically this is really useful when you have content and you want your users to scroll left and right top to bottom or in all directions for example maps so that's where you're going to choose these options next we have fixed position when scrolling so basically what that does if i go right here and extend this r port just a little bit like this and i want to for example move this up when i click the preview mode right here and when i start scrolling down you can see that the line stays fixed obviously this is intended for all of your elements on your artboards so for example when you're creating websites or mobile apps and you don't want your elements to move then you're going to choose this option next we have responsive resize so you have auto and manual and you might remember from the previous video when we talked about responsive resize for this artboard when you start resizing you can see all of the elements behaving in this way but this is the responsive resize for the elements themselves so you can set the responsive resize for the r port and you can set it for the elements themselves and you can change all of these settings you can go auto and let adobe xd figure out everything or you can go to manual and you can choose fixed height or fix a width depending of where you want to fix your element below that we have opacity you can lower it down increase it and you can use keyboard shortcuts so for example two is twenty percent five is fifty percent nine is ninety percent and zero is one hundred percent below that we have the blend mode so if you ever use photoshop for example and you want to stack two images on top of each other and you want to have the overlay effect of the bottom or top image then that's where you're going to use these options and basically because we don't have any image in this case you're going to use any one of these and i really encourage you to play around with these settings because they work quite differently to whatever you have chosen then we have the color and because this is just a border color you can click and change or you can hide the color altogether or you can click right here to sample a color for example let's sample this blue color right here and you can see it turned to blue now you can hit ctrl command z to go back and finally we have stroke width so i can change it to 20 for example you can see how extreme it is and all of these options are disabled because once again we just have the border i'm going to show you those options uh in just a second with these shapes because we have both border and fill color so we have the size of 20 we have the dash so if i increase it to 50 you can see how that works and we have the gap if we go back to zero right here what we have are endings so we have the butt cap so if i zoom in really closely you can see it's really straight if we click right here to the round cap you can see that this cap is rounded and finally we have this so what's the difference between this and this it's just where your point is ending so you can see that here the point is right here in the center of this line but if i click right here and you can see that your point is right here so basically that's the difference and below that we have drop shadow and we have background blur and finally you can mark it for export which is really useful if you want to export all of your assets for developers later now if i select one of these because all of them have both fill and border color and basically all of this is the same all of this is the same let me quickly show you this so with the drop shadow for example if i zoom in just a little bit closer just so that you can see what's going on if i set some different values so for example 10 20 50 you can see that i added a drop shadow right here inner shadow does exactly the same thing but on the inside obviously and finally we have background blur but that option really works well with the image behind so it's going to show a transparent basically a glass look on top of that image what we have next is the corner radius so you can change the corner radius two ways you can click one of these and you can adjust it however you want you can go with really small or really extreme however you want or you can enter your values right here so for example five is going to be really small while 100 is going to be extremely big finally you can click right here to change different corner radiuses any when you hover you can see these so this is the top right this is this one let's go with 100 for it and all of the other ones are going to be at 5 which is really useful if you want to create some different shapes finally fill color as we said you can change the fill color depending uh of your design project and you can change the border color separately so for example this one and i want to change it to 10 so we have this shape finally we have all of these options so here we have just the stroke so basically the same as the cap you can set where you want your stroke to be and finally we have these joints so basically all of these corners how they are joining in all of these things are the same and finally what i want to show you is this shape because it's quite interesting with it it's because it's a polygon tool all of these settings at the top are exactly the same all of these settings are exactly the same everything here is exactly the same what's different is this here you have your corner count here you have your corner radius and finally here you have your star ratio now what corner count does is basically what the name suggests how many corners you want to have if i click 8 for example press enter you can see that it now showed me eight different corners and finally for each corner i can set the value for example 20 and you can see now we have all of these nice rounded edges and finally here you have the start ratio so you can play around with it if i type in 20 for example you can get all of these different shapes this is 50 this is 70 for example or if you are at 100 basically this is what you are getting and that's basically it for the shapes that's how you are going to use them and in the next video we're going to talk about pen tool because it's used for a bit more complex shapes these shapes are fine if you're working with just plain regular shapes and already showed you some differences and some changes that you can make to them but if you want to create some more complex shapes some more highly polished shapes then you're going to use the pen tool i'll see you in the next video where we're going to explore the pen tool