By Howard Pinsky
“Hey Pinsky! How do I rearrange layers and groups in my designs?”
Great question! Let’s take a look at how we can use Stacks to help. Say you’re building out a landing page with content extending down and across your artboard. To help the stacking process, we’ll want to place our elements into groups or components. This will help XD figure out the direction your layers are laid out.
Once you have a group created, a Stack can then be enabled within the Properties Inspector and the orientation will be automatically determined. This will now let you shift the various layers around within your group and as you do, all others move out of the way as you would expect. The spacing between elements can also be adjusted, either directly on canvas or back within the Properties Inspector.
Stacks can also be nested within Stacks. Each row of content contains a look at the individual features and the group we just created. Enabling another Stack will define it as horizontal this time, so if we need to swap the positions, it’s as simple as dragging.
As a quick pro tip, the orientation of a Stack can be changed at any time. If you’re modifying this design for mobile, switching your Stack from horizontal to vertical will automatically rearrange all layers within it.
Finally, let’s create one more group containing our three rows - and since these are laid out vertically, that’s the Stack that will be created. So now that we have our stacks in stacks in stacks, rearranging the content within them is simple and flexible. Entire sections can be moved up or down, the position of the product shots can be swapped and if the marketing material needs to be adjusted or if anything new needs to be added, that can be done, as well.
And that, my friends, is how your layers and groups can be rearranged in your designs. Thanks for watching, everyone! Make sure that you subscribe for more tips & tricks, keep tweeting me your questions and I’ll see you all next time.
Rearranging layouts in your design doesn't need to be a tedious process. In this Adobe XD tutorial, learn how to use Stacks to make efficient layout changes in your design. Include layers and groups of elements within a Stack to make reordering them as simple as dragging and dropping. The spacing between elements in a Stack will be maintained as layers are rearranged, making it very easy to iterate on layouts within Adobe XD. Spacing can be updated uniformly across the entire Stack or simply edit the spacing between two groups of elements for finer control.
