- [Instructor] Stacks in Adobe XD
enable objects within a group
to have defined fixed spaces between them.
Resizing or reordering an object within a stack
moves the other objects out of the way
while it preserves any of that predefined space.
Let me show you what I mean.
I'm in the middle of laying out
a few artboards here in Adobe XD
and I'd like to work with the stacks feature.
I'm gonna begin by opening up the Layers panel.
So for that, I'll come here to the lower left-hand corner,
open up that panel, and I'll click on one of the objects
on this first artboard.
I can see the structure of my artboard here
on the left-hand side.
The rule with stacks is whenever you want
to be able to organize something as a stack,
you need to group it together.
So I'm gonna come and select all of the objects
on this first design canvas,
and in the right menu, I'll define them as a group.
I'll come here into the Layers panel
and I'll go ahead and give it a friendly name,
and I'll expand it out.
With that group now selected,
I'm gonna come here into the Properties Inspector
and in the Layout section below Responsive Resize,
notice I have the ability to define it as a stack.
If I check that box, XD is gonna examine the content
that I have selected and make a guess
as to whether or not it should be a vertical stack
or a horizontal stack.
It's already guessed correctly, so I'll let that be.
I'm gonna come in now to the header section here
and I'll double-click on it.
We'll give that a friendly name.
We'll call it Header.
And then with that still selected,
I'll come back to the Properties Inspector
and again define this as a vertical stack.
At this point, XD, when it converts the objects
into that stack, it also determines
what type of padding might be around the objects
as they sit on top of the background
or the backmost layer for the group.
So in this header area,
I have this green rectangle with PLANT
and the subhead sitting on top of it.
And notice when I select it,
I can see that the padding was automatically defined
and that it's different reflecting the space
between each of these areas on the side.
When I'm ready to start interacting with the objects,
I can just come on in and select one of them
and just press and drag to move it in the stack
or in that hierarchical structure.
If I decide I want to change the spacing around it,
I can move the cursor up until I see a pink highlight
letting me know what the current spacing value is.
I could come here towards the top
and by pressing and dragging from the bottom,
reduce the overall space.
Notice that all the content below moves up as well.
From there, I could come in
and create a little bit more space now
between that top area and the word plant.
So just by pressing and dragging,
I could affect that change.
If for some reason I wanted all of the spacing
to be the same, I can hold down the Shift key
and the S key on the keyboard, and as I press and drag,
it's gonna rather dramatically change
all of that spacing to be the same as you can see here.
I'll go ahead and click off and undo that change.
I kinda like the spacing that I defined there.
Let's look at a second example on this second artboard.
I'm gonna go ahead and move
so that I can see it a bit more clearly.
Now stacks can be nested within one another
and each stack can have either horizontal
or vertical for its stack direction.
Let's take a look at the second example
to see how I might integrate the two together.
What I wanna do first is come in
and select each of these little pods
and group them together,
I'm using a keyboard shortcut to do that,
and changing them to separate groups.
Now that I've set them all to be separate groups,
I can come in and select all of the groups at once.
So Shift-select here in the Layers panel.
And then over in the Properties Inspector,
as you might expect under the Stacks area,
I'm gonna go ahead and turn on Stacks.
Notice that XD realizes that the content
is moving more towards the left and the right,
it's a horizontal stack, and it's accommodating that.
From here, what I'm now able to do
is come in and just start to arrange the content
within that stacked group.
So I might decide that I want to move the image here
on every other tile over towards the right
rather than having it there on the left.
So I have that defined for each of those groups.
What I can do now is create another stack
on the vertical to organize my content
from top to bottom on this artboard.
For that, I'll come in
and let's just select this center content here.
So I selected it all.
Once again, I'm going to group it
and I'll give this, we'll call this Center Content,
and hit Return.
With that set and selected,
I'll now come over into the Properties Inspector
and I'm gonna enable the stack feature on the vertical.
So what I can do is now come in at that higher level
and maybe rearrange the items.
I might decide that Peace Lily here
should actually move down, and Rubber Plant should move up.
Now I'm making these changes or moves
by tunneling into the hierarchical structure
and using Escape to tunnel back out again.
Once I have Rubber Plant selected,
I can press and drag that back up to the higher area.
And if I don't like the spacing,
let's say the spacing seems a little inconsistent for me,
I'll hold Shift and Command on the Mac
or Shift and Control on Windows,
and make sure that all of that space is uniform
between each of the tiles.
One thing you do wanna keep in mind,
stacks are a design-time feature,
so although you're seeing movement
as I move content up and down within the stack,
this is not going to translate to my prototype, for example.
For that, I'm gonna need to simulate a drag behavior
or a move behavior the way I have in the past
using something like auto-animate
to transition between states or artboards.
The last thing I wanna mention
is stacks coupled with padding and responsive resize
start to make a powerful feature combination
when you're working in a design system.
When stacks are used on a master component,
any instance of that component
is gonna respect that stacking structure.
This means I can simply grab a component
for my design system, make any changes that I need to,
and not have to resize or move layers around
to accommodate that change.
This is obviously just a brief overview
of the stacking feature.
I encourage you to give it a try.