Stacks

Stacks is another powerful feature that will give you more control over your design and considerably increase your work speed. With stacks it’s incredibly easy to resize, reader or modify objects while keeping the defined spaces between elements.

To enable stacks on a group or component make sure that Responsive Resize is active, and then check the Stack box to turn on stacks for your selection.

You can set the stack orientation to Vertical or Horizontal. XD automatically sets the stack orientation based on your selection.

 

Once enabled, stacks identifies the bottom layer from your selection as the background and uses it to calculate the Padding values that will show up the Property inspector, below the Stacks buttons. More about padding in the next chapter. 

 

Editing Stack Elements

Move or resize an element from a stack and the rest of the elements will automatically move to preserve the defined spacing between elements.

 

There are three methods that you can use to adjust the spacing between elements inside a stack.

  • select an element from your stack, hover on the spacing area, and then click the drag the pink highlight to adjust the spacing.
  • select the entire stack, hold down the S key to adjust the spacing between elements of a stack. You can also adjust the padding using this technique. 
  • hold down Shift + S to easily equalize the spacing between all elements of a stack.

 

To duplicate a stack element use the CMD + D (Mac) & CTRL + D (Win) keyboard shortcut.

The order of elements inside a stack can be easily adjusted. Simply select and elements and move it where you want. XD will do the rest. You can also make this change inside the Layers panel. Change the order of elements inside the Layers panel and you’ll notice the changes on your artbaord.

You can also use the CMD + ] (Mac) & CTRL + ] (Win) and CMD + [ (Mac) & CTRL + [ (Win) keyboard shortcuts to move up and down a stack element or CMD +Shift + ] (Mac) & CTRL + SHIFT + ] (Win) and CMD + SHIFT + [ (Mac) & CTRL + SHIFT + [ (Win) to move the selected element first or last in a stack.

If you want to change or add the background of a Stack, move the object that you want to act as a background inside the Stack, right click on it and go to Make Background or Replace Background.