Useful Adobe Xd Features: Padding & Stacking

do you also spend a lot of time measuring things in adobe xd to align hundreds of different objects because you want to make your design pixel perfect well that time is over because i have found a few features that will do that automatically for you so you can spend all of your time making cool creative stuff isn't that great i mean the whole reason why i use adobe xd before i go into elementor is because i can test different designs and make changes much faster which i explained in my video why you should never start an elementor but in adobe xd but i have to admit i'm a bit late to the game because these features were already implemented in adobe xd but i completely missed them and i think there are more people that don't know about these features so that's why i'm making this video let me show you what i mean [Music] the first feature has to do with padding so for example on a towel like this you have a background and you have a few elements inside of it and to align this perfectly you can click on an element and then hold option or alt and then you can see for example that there's 35 35 35 but 129 pixels to the bottom so then you have to measure this size in order to know if all these elements are aligned so what i would do constantly all the time is measure so for example if i wanted to drag this column and make this a bit bigger then i would also have to click on the outer layer make that bigger hold option again and then be like 50 0. okay 50 40 we want 35 oops clicked wrong 35 okay uh almost one pixel more yes 35 but with padding it is much easier so let's just go back a few steps to this and now it's still 35 what we're gonna do is we're first gonna group these things so make a group of this part and this doesn't have to be a group because it's one element now select all of it and on the right over here there should be padding but that is only visible when you group it again so make sure to group it and then you can see the padding feature over here click on it and now adobe xd will automatically measure it and it's 35 so let's say that you want to make it 40 on all sides it will increase as you can see or even make it 50. but what's even better is that if you increase the size of an element then the sides will keep that betting so you never have to measure that again and what's also great is that now you can see if there are flaws in your design because for example if you have not aligned it properly it looks perfectly aligned but when you click on it you're gonna see that these numbers are not the same you can change them on each side if you want to or you can just click on this first one and then put it on 35 and now if responsive resize is on you can also just drag the sides over here and this still works isn't that great another example so what this is is actually a shadow it's just a linear gradient from transparent to black which is behind this deck so it's actually readable when you have an image so let's say that you want to use the padding feature over here well of course you can group everything like this and then use the padding feature but then it doesn't work because it only uses the top side so in a situation like this what you want to do is select these elements and then only select your shadow because you first want to measure the padding within that block so now you group this one first then you click on the padding and now you can see it's 60 at the top dirty at the sides so that is what i want so now this is a group and this is a background now if you want to measure the size from the shadow to the top you can group them again and click on padding and now you can change this number over here so maybe make it 250. what you can also do is use the wave key on your keyboard if you click on that you can click and then drag it's nice you don't have to mess with the numbers you can just do it like this and leave it at 230 for for example so the padding within this block will stay the same so even if you would add another title as you can see then this will all skill what's also great about padding is that when you add new elements so for example you want to add another text over here right i just hold alt to make a copy hold shift to align it and for example uh read more something like that click over here and then you can see it automatically adjust no matter how how many elements you're gonna add on each side so that is absolutely great and where you also want to use this is in buttons so what happens a lot of times is that you create a button for example like this with rounded corners let's give it a color and let's add a text so let's say that this is your button it's just a text and a background and there's a 41 pixels on each side which is not perfect so let's say you want to you want to make it 40 right you measure things with your command but now with the padding feature you just select it you group it you click on padding and now these values will stay so when the text is going to change click over here the button is going to change as well now it stays at the left because this text is left aligned but it also works in middle align click over here this will save you a lot of time measuring things so i hope you can see that just the padding feature alone will save you a lot of time okay now let's go to the stacking feature and stacking is very powerful as well and especially when you combine it with padding but let's just first focus on stacking so stacking is essentially adobe xd trying to understand what items are in a row horizontally or vertically so the simplest example is with a menu so you have your menu over here you have a few items over here and you measured everything so for example 40 pixels between oops this one okay and this one like this i always use the arrow keys and sometimes shift to go up or down 10 pixels but i always use to measure things like this but then if something changes in your menu for example the client wants a surface instead of surfaces then it's not aligned anymore so with stacking you can just select all of them by holding shift group it stack it and then automatically adobe xd sees that there is 40 pixels of spacing between the elements and if you have not aligned it properly so for example let's go back a step and this one is just a pixel off and you group it you will not see a number over here because you have not aligned it properly so then you can just type in 40 over here and it will align it but because it will keep that distance in the same way as padding does when you change something over here then the whole menu will change because it will keep that 40 pixels of spacing and this is great for making changes for example our surfaces for or something like that but also when you add another element so let's say that you want to add another page well if you just click on about you click on comment d or right click and then oh it's not even over here okay you can you can comment or control and then d and then it will make a duplicate and you can change this so uh for example a contact you see and then it will automatically move and because adobe xd now knows that you want 40 pixels in between you can also switch positions so contacts let's say that this button wasn't here right so you want contact at the end you can click on it just drag it and see how that works [Laughter] that's nice because without this feature you would always have to measure it you can even select all of them and right align them so let's say that um i want to change this then everything will move to the left which is what you want for a menu like this isn't that beautiful i think it is this also works for example with a simple list like this that is now just three separate icons svg icons and let's say that you want to add another icon for example the youtube icon like this but you want it to be in between linkedin and instagram well normally you have to click and drag and click now you just select all of them comment g to group right or right click and then click on group then turn on the stacking it sees that there's 20 pixels in between now i need to get the youtube inside of it so you need to comment x or cut cut it make sure that you are inside over here click over here and then click on command v or right click paste and then you all only have to align it vertically but now horizontally it will snap no matter what you do over here it will snap in this position and again you can still change the order what you can also do which is great is change the spacing between because maybe your client thinks that this is a little bit too small well you can simply change it over here so for example change it to 30 and that will change the space between but you can also use a shortcut which is what i always like uh prefer so you can click the the wave icon like this you can click and drag but that will only change one place so if you click that wave icon and you hold shift you can do it for the whole list so that's great so let's put it on 25. so here we have we have used this tech but now we can use another stack for this whole section so let's just do that select all of it make sure always group it first click on stacking there's 20 pixels between this as you can see over here and this it's a little bit too small so we click over here we hold the wave icon hold shift and then change it to 30. it's great and again you can add something for example this button just make sure to cut it like this make sure you're inside the group and paste it and then it will snap in position this is not a good place for a button but you get the point what you can see over here by the way is is a preview of what's coming up um this is a video series about this website but what i want to show here is that you can have different levels of stacks for a website like this you want to also be consistent with the spacing you use between your sections this is also great when you're working with elementor because if you for example always have um let's say 130 of spacing between the main sections then you can do 130 divided by 2 so then you know that you want 65 padding on the top and panning on the bottom in your main sections or containers in elementor so for a website like this what i've done is i've divided it into sections so this is a section right because it's a custom design we don't want that spacing over here because this is yeah this is more custom but we want the same spacing over here as over here as over here and over here this is a group this is a group uh this whole thing is a group this is a group and there's a group and now since this whole page is now a group you can see that the stacking 130 i could just easily change that so for example if i think 120 will be better click on the wave click on shift and then change it or just change the numbers over here isn't that great i think it is so let's now combine the padding and the stacking alright so we have a section like this i will ungroup it and start over so we only have layers like this so first we want to group the buttons right so they are just uh draggable separate items you want to click on the padding right so when we change the text then this button will change but if you also want to keep the spacing between this button and that button because it's 20 you also need to use stacking so we're also going to add batting over here so again we can then change this if we want then we're gonna group these two buttons and use stacking and now it's 20 over here so now when i change this text not only is this button gonna change this button will also move and when i use a center align because i want these two buttons to center a line on the screen no matter what i do over here so for example our surfaces the other button will also move that's great so let's go back to our first example over here so here we've only used the padding feature as you can see but now if we're gonna use stacking as well for these three parts which we haven't grouped then we can also play with the spacing over here so i'm gonna group that then i can use stacking so let's say i wanna use a 30 or 25 and now not only the sides adjust with padding but also the elements inside of it so when i make this text longer then these items will also move because it wants to keep that 25 pixels in spacing and also the outside will move because that is done by the padding i mean if that is not cool then i don't know what is okay you can change whatever you want make this one bigger you see it all moves it's it's wonderful and before i'm going to show you a more complex design like this i want to emphasize one more feature and i've used this already before and it's the components this one is not new for me but i think it's still new for a lot of people so i want to talk about it a little bit and then i'm going to combine all of these features in a design in a design like this you will have a lot of the same kind of elements for example buttons well this is the same with elementor you can sell a button and use that same styling on the whole websites in the site settings right but in adobe z you actually have more options in a mentor you can only sell one button but in adobe z you can have three main buttons um also what i wanted elementor by the way so let's say that you have three kind of buttons in your design so this is a typical situation one very intense color one very soft one almost white color and one outline button right you wanna play around with this and make sure that not all of your buttons have the same importance right in your design but then you're gonna copy all of these buttons in your whole design and you will get a situation like this where you have the same kind of button in many different places so for example over here and then over here so let's just switch to a real project so i can actually show you how this would make my life a lot easier in this website is it's already two years old i didn't use the component feature only for the social media buttons over here i don't know why it's kind of stupid to be honest because this website has a lot of different buttons so you have the green button over here and the black button over there even a black button over here but especially the green button it's used in so many places so what you want to do is you actually want to just uh grab one of your buttons direct them outside of your artboard make sure to of course use the padding feature before we're going to use the component feature so align this however you want for example 25 25 and just call it button to make your life easy all right so this is your button now you click on components right and you call it button and then when you need a button in your design you're going to drag this one in so not just like i did copy and paste the button no drag in your button like this delete this one and now this is a copy of the master button over here how do i know this is the master button well because of this little diamond shaped block that is the main the master button right and all of the other buttons which don't have that are copies of the main button since these are copies i can change the text over here read more but now i see oh oops this is not aligned perfectly so i'm going to go back to my main button and if you can't find it just right click and edit main components and then just make sure that this one is left aligned so when you have a copy over here read more perfect so this is what i should have done because now let's say that i want to change the cell of the button so i want to give it a rounded corners of a 8 it will change in all the places where i've used the component but it will not change on all the places i have not used it so if you even want you can create two buttons so make sure to ungroup it right make your black button over here and i don't know call it a button two and of course first use padding and then just call it a button two for example or bottom black whatever maybe call this one a button green and then make this a component as well bottom black and then over here i wanna use that sync that same component it is a copy so we can change the text get the magazine and again let's say that we they want to delete the rounded corners this will change on the whole website now i'm going to challenge the repeat grid tool because i was a big fan of the repeat critter but now i'm like ah i don't know so in a design like this you have a lot of elements that are the same for example you have this row of blog posts right and this website is a magazine so it has a lot of different blog posts right so here i've used the repeat grid or so so i can easily drag in images and create another row like the repeat grid tool is supposed to do but let's say that my client says like you know what we don't want the categories on the website if i'm gonna delete it over here now it only will change within this repeat grid so now we can use a combination of components and stacking to make our life easier so i'm gonna ungroup this ungroup it again so we lose the ability to use a repeat grid but i think the component feature for this is better because over here first of all we can use stacking right group stack spacing fixed spacing and this is our new design now if we create a component so we say block posts vertical because this one is the horizontal we can now delete all of these ones and then just drag it just start working like this and then also do that over here so i'm gonna ungroup it i'm gonna use the component instead of the repeat grid and yes then i have to copy i know but i can still use stacking if i want to to align it 35 right because we also use 35 over here so now i've replaced the whole home page with the components here we have the master as you can see now if we change something so for example your client says you know what that category wasn't so bad because this is how clients are they change their mind so then you can go in over here you can paste it edit again and then on the whole website it adds a category again it's just better and it's in so many places you should make this your workflow right it's so many places the sidebar for example i've used the sidebar on different pages on the website well oh actually only two but i have not used the component feature i should just make this a component right sidebar delete this one and drag it over here and then inside over here we can use stacking so i hope you can now see how the padding the stacking and components work together to make your life easier but you have to start with the right tools the asset panel is not part of this video if you guys want me to make a video about that i will absolutely create one it's the same story with fonts it just makes your life so much easier if all of your components are on the side over here and what i do have to say is that the disadvantage of this method is that the ability to drag in images from a folder like you can do with repeat grids as you can see right here that is a feature that you will miss but on a website like this when you have one design that appears in a lot of different places it's less frustrating to just drag in images just one by one like this make sure that you don't add it to your master component of course because then it will change everything but just drag it in one by one that's less frustrating than having this component on a lot of different pages with the repeat grid tool that you you can't really change with this example i want to end this video i didn't use the component feature and the stacking and all of it over here but for a more complex design like this it's just so much better so we are here in the master component so uh what i've done is in the button over here of course there is padding so whatever we gonna change over here that will change oh i need to left align it as you can see um this is one group that has stacking but it's not the same number because otherwise this will not look very good so you can see that um it's 50 everywhere but not over here because that is something that i did not like a little bit too much space so you don't have to of course use the same values you can also just if you want to grab your wave icon and do something custom like this yeah so this is a group with stacking and i also wanted to use the padding feature on all of these sides of course but that was not possible because this white tail was um like this because that white tail had a shadow right and you don't want the shadow to stop over here so what i had to do in this case is add another layer beneath it with a different color so i can clearly see it add the shadow onto that one and then make this a group so i have the options to change the padding over here so again if you have a towel like this which has a shadow which goes from the top to the bottom and it has an image you need another white layer and a separate layer for your shadow otherwise you can't use the padding over here so this is a more advanced example and i will be using the repeat grid less as you can see because now this master component is also applied to this page and with the repeat grid that just wasn't possible so i am really happy that i took some time to understand these features and i hope that there will be some people in this video who have not seen these features as well if everybody has seen it then i am just late to the game but at least i am really happy with it but there probably will be some people right because who has time to dive into new features all the time i mean i'm running a business here so i mean even i which has a youtube channel and and needs to spend time figuring out new features i don't always have the time to to figure out a new feature so i think that's why these videos are uh are great why am i defending myself what i also haven't dived into is adobe xd plugins that's something on my to-do list because i know they are there there are great plug-ins for adobe xd which will make the workflow even faster so that will be an upcoming video let me know if this helped you and then i hopefully will see you in the next video on living with pixels [Music] you

Channel: Rino de Boer

Views: 31,416

Keywords: adobe xd, adobe xd features, adobe xd features 2021, adobe xd features 2022, adobe xd stack, adobe xd padding, adobe xd components, adobe xd padding not showing, adobe xd new features, adobe xd web design, adobe xd basics, adobe xd for beginners, adobe xd prototype, adobe xd responsive resize, adobe xd measure, adobe xd components tutorial, adobe xd group components, adobe experience design, adobe experience design cc, adobe experience design tutorial, adobe xd vs figma

Id: SMpLPIMf56M

Length: 24min 14sec (1454 seconds)

Published: Mon Mar 21 2022