4.1 Advanced Layouts With Stacks

Welcome back to the course. In this lesson, you're gonna learn how to use the new Stax feature to easily create layouts. Let me show you how. Here I'm using some elements that I got from a UI Kit, called Navigo Transportation. Now, that's a free kit, and you will find a link to it in the lesson notes. Now, let's say we have this card, right? With these three elements. Now, what happens if we want to rearrange these? Well, again, simply drag them like so, like so. And making sure that all the distances here are equal, and everything is aligned properly. What if you wanna add another element? Well, you will need to select a separator and an element, Command D to duplicate. Drag them into position, and then go to the background and resize that, as well. This can sometime be very time consuming, because you have to stop and remeasure and realign everything. Well, this is one thing that you can resolve very easily with Stax. So, to work with Stax, you need to select the parent element and in the inspector, check Stack. Now, this has two modes, vertical and horizontal. And XD is smart enough to recognize that my items here are displayed in a vertical manner. So, it's selected vertical for me. But I can always switch between the two. Now, what's nice about Stax is that you can hold down the S key and you can determine, what distance you want between items. So, if I want, for example, 16 between these two, I can do that very easily. What I can also do is, hold down Shift and S and alter, The distance between all the items. So, that's really easy to adjust now. Look at how look simple that is. So, let's keep this at 16. And you also notice that the background now resizes automatically. And that's because, when we created a stack we also enabled padding. And XD measured the distance that I had between my item and the background, and it applied those distances as padding all around. And with this new feature, I can select individual padding values, like I have here, or I can select a single padding value, let's say 24 pixels, or I can go 48 pixels. And you'll see that the background resizes automatically. And I can change the value of that padding just like before by holding down the S key and changing that value, just dragging it up or down to the value that I want. So, very, very useful feature. Now, I can also nest various stacks. So, I'm gonna select this card. I'm gonna add a stack to it. And let's also set a padding here of 24 pixels. And let's also set a distance here between these items of, let's say 16 pixels. And then I can go in here, Or I have the rating, basically. It's just a list of dots, and I can add a stack to this, as well. Notice, XD now determined that this is a horizontal stack, it automatically added four pixels for spacing between these items. And I'm good to go. Now, there is another benefit to using Stax, that I haven't told you about. Watch what happens when I now want to move An element from a stack. All the other elements Will move automatically for me. How easy is that? You just drag and drop an element to its new position. Now, be aware, this doesn't constrain the element to that particular side. So, I can move it left, right, up, or down, depending on the direction of the stack. So, you would still need to do a bit of work when aligning items. But in terms of the ease of use, this is very very nice. And it also works on a horizontal stack. So, maybe I want to select this item and I want to move it right here. I can do that very very easily. Now, this also works when, for example, you don't have a background set to your elements. So, I'll select all of them. Ctrl+Cmd+G to create a group because Stax only works on groups. And then you can hold down Shift+S to determine the distance between the stack items. Now, there is another benefit to using this new functionality. It's now easier than ever to create something like a button that has a background that adjusts to the size of the content. So, for example, I have this this button here and I can skip the stack entirely and just go for padding. So let's say I want 16 pixels of padding. Now, when I change the text, You will see that the background resizes, accordingly, which is fantastic. So, that's how you can work with the new Stax and Padding functionality in Adobe XD. Now, if you've worked in Adobe XD before then you've probably used Components. But did you know that you can now add Component States? I'll tell you more about those in the next lesson. So, I'll see you there.