By Matte Rae
A
s your design becomes more intricate and detailed, making modifications to the layout can often feel like a tedious chore. Rearranging elements or adding sections can absorb large amounts of time to get a design feeling just right. This is valuable time taken away from other vital parts of the design process. Thankfully, Stacks in Adobe XD is here to make your design life more efficient.
What is a Stack?
Working alongside Padding, Stacks are a Content-Aware-Layout feature designed to make re-arranging content simple and easy. Whether you’re iterating on an email template, working with a complex arrangement or simply adding content to an existing layout, Stacks helps you to do so dynamically.
How to Create a Stack in Adobe XD
To create a Stack, you’ll first need to create a group (CMD/CTRL + G) around the objects that you wish to include. These objects can be of any size or shape, which makes Stacks great for a wide range of content. With the group selected you’ll find a new “Stack” tickbox in the Layout section of the property inspector. Selecting that tickbox will enable a Stack and Adobe XD will automatically detect the direction for the Stack, either vertical or horizontal. Overriding the direction is as simple as toggling to the alternate direction.
With the Stack enabled on the group, rearranging the content is as simple as selecting an object and dragging it to the location of the other object. Adobe XD detects this movement and rearranges objects appropriately.
Practical Application for Using Stacks
Let’s take a look at a design where Stacks is going to be very helpful. In this desktop note taking application, there are three panels or columns of content. On the left, the notes folders where content is organised. In the middle is where the list of notes in the selected folder is displayed and to the right of that is the note detail. Each of these columns contain content that can be used in a Stack.
Starting with the list of notes in the middle column, there is a clearly defined grouping for each note which includes a date, title, description and tags. Each of these blocks is already a group and likely something that will need to be rearranged to test sorting and filtering later in the design process.
Creating the Stack
To set this column up for Stacks, select all of the note block groups and make them one unified group. When Stacks is enabled for this group, XD auto-selects the ‘vertical’ direction, allowing elements to be reordered up and down.
Clicking into this list group, an individual note block can be selected and dragged up and down the Stack to rearrange the order in the list. Simple.
The same can be done with the note blocks themselves. Since these are already configured as components, editing the master component to enable Stacks will apply the Stack across all instances. Right click one of the blocks and select “Edit Master Component”. Selecting the elements within we can create a group and enable the Stack.
In this example, the horizontal tags were not grouped prior to creating the Stack. To prevent undesired behaviour, Adobe XD automatically groups horizontal objects in a vertical stack so that you don’t have to worry about grouping them.
This also makes creating a horizontal stack for the tags a one click action. With the newly created tag group selected, enable the Stack. This time you’ll notice it automatically assigns a horizontal stack, allowing the tags to be quickly shuffled in order, as desired.
Adjusting Spacing
Now that the stacks are created on the note blocks and the notes list, the content can easily be rearranged within the list. If the spacing between elements is not appropriate, adjusting these spaces is simple. To explore spacing we’ll turn to the note detail panel.
In the note details there are a number of stacks present. Each section of content is a block that can be rearranged using the vertical stack and individual elements within those blocks also have Stacks enabled. Rearranging complex content like this is easy, but what happens when the spacing between two elements just isn’t right? Thankfully Adobe XD makes that easy to adjust.
When you’re clicked into the Stack, holding ‘S’ and hovering over the spaces between groups will allow you to click and drag to resize them individually. This works great for variable spacing and adjustments between elements.
Hold S while hovering over spaces in a Stack to resize spacing.
If you’re adjusting elements that should have a uniform spacing between them, like our tag group, holding Shift + S while hovering over a space will allow you to click and drag to resize all spaces in the stack identically. Note that if individual spacing was set within a stack, holding Shift + S will override the individual spacings that were previously set.
Hold Shift+S while hovering over spaces in a Stack to resize spacing.
Changing Alignment
Though elements in a Stack are ordered vertically or horizontally, they are not required to remain in perfect alignment to maintain the Stack. This unlocks powerful functionality for creating elements like charts and timelines, while still maintaining the ability to reorder.
Click and drag an element to the left or right in a vertical Stack to offset it.
In a vertical stack, simply click and drag an element to the left or right to offset it from the rest of the stack. Dragging this offset element up and down will still maintain the ability to reorder the content. Use this to create gantt charts or unique photo gallery layouts with offset imagery.
Reorder with Keyboard Shortcuts
With an element selected in your Stack, you can also use Keyboard shortcuts to adjust the order. Selecting an element and pressing Command or Control and the left or right square brackets will move your element up and down or left and right within the Stack.
Stacks and Components
Stacks are a powerful feature on their own. However, when combined with Components, they unlock a range of new possibilities.
Using the notes app as an example, we can create a component out of the top level tabs, which include a horizontal stack to make rearranging the tabs super simple. With the component created, we can copy out an instance to see how modifying the master component will affect the instance.
As expected, modifications to the stack in the master component are carried over to the instance. This includes element position within the stack, as these properties have not been overridden in the instance. Once a property has been overridden in the instance, it no longer receives updates from the master.
In this example, the order and colour of the stacked elements have been modified in the instance and therefore will no longer receive updates for those properties from the master. However, the text was not modified, so the changes to text made in the master are pushed to the instance.
Try it yourself
Stacks puts powerful layout controls at the tip of your mouse, allowing you to quickly rearrange content to fit your needs. Get started with Stacks by downloading the Notes.XD UI Kit and trying it for yourself.
