Adobe Xd Basics Tutorial #5 - Artboads

Key Takeaways

in this lesson we are going to cover artboards in adobe xd so if we switch to adobe xd this is the r port that we created first of all you can double click right here to change the name of this artboard so for example our website and as i said in the previous video we have some some options right here and some controls so for our artboard i can click right here and i can see instantly it's 1920x1080 it's in pixels right here you can rotate it horizontally and vertically and these are your x and y axis for later usage next we have responsive resize obviously this is really useful if you're working with the r port which is going to be responsive later and you can switch that on and any kind of content you have inside of your artboard is going to act responsively when you start resizing it by clicking and dragging this handle on your right below that we have scrolling so you can change horizontal or none sorry vertical or none so scrolling is basically when you extend this artboard and you can do so by simply clicking on this dot right here you can click here and this is basically your cutoff point or your fold line however you want to call it so everything above this line is going to be visible on this size and everything below this fold line is not going to be visible until users start scrolling and this is where you defined a vertical scrolling horizontal scrolling is going to be added in the future but for now we just have vertical scrolling viewport height so this is basically this height so the entire artboard now is at 1207 but viewport or this fold line is 1080 and this is the original size that we created for this particular artboard below that we have the appearance so you can basically remove any color of your artboard you can click right here change it to any kind of solid color that you want you can even include gradients you have linear radial and angular gradient so if i choose linear for example just to show you this is how it looks like and of course you can click on these stops and you can edit them however you want and here you can change the opacity of this stop you can change the colors right here so just click and drag i'm going to choose the solid color go back to white and finally what we have right here is the grid when you click right here it's going to show you this grid here you have the columns which are these blue bits here you have the gutter width which is the spacing between the columns column width so the width of this blue bit basically and here you have your margins which is this space on the left and on the right of your columns so how can you actually change that well if i choose yeah i'm going to have 12 butts i'm going to change this cutter width to b60 for example adobe xd is automatically going to adapt to change all of these settings so now column width is 82 and margins are linked left and right with 138 so this is the space of 138. finally you can click right here if you want different margins you can go left right top bottom and you can change all of these you can see margin right and margin left are 138 but if i hover right here margin top and margin bottom are at zero but you can always go inside and change those settings if you want to otherwise just keep it right here and finally if i change it from layout to square if you're working with 8 pixel grid for example this is the default size of your squares so if i zoom in really closely every single one of these squares is eight by eight so if you want to change that you can simply type in ten for example now they are ten by ten or if you want to change it to four now they are four by four and you get the picture so basically this is how that works when you are in square and finally for any one of these so either for grid or layout you can use default which in this case for example is eight and if we go back to the layout you can click use default this is the default or you can make default so when you make changes for example 60 and i want to make this as a default you can click right there finally what i want to show you is this you can click right here on your artboard tool and you can jump in right here to choose from all of these different artboards and if i hide myself you can see all of them right here so these are the mobile devices these are the tablet devices web and desktop devices social media devices and watch devices but of course you can always click on your artboard and you can enter custom values so for example 2080 with this size but of course i will have to go back to my columns and readjust this so let's go with use default and you can see how that works finally if you want to duplicate your artboards all you need to do is hit ctrl or command d or you can click on your artboard name hold alt or option and simply drag to make a copy and this um purple bit between your artboards is actually your spacing between your artboards and one last thing which i want to share is this when you go back to home screen all of these sizes which i mentioned in the first video are also located right here and much more so when you click right here to the artboard tool or hit a on your keyboard you can access all of these different sizes which i mentioned right here so that's it for this video in the next video we are going to cover shapes in adobe xd so i'll see you there