Stacks, Padding, & Responsive Resize

Topics covered in this Adobe XD tutorial:

Creating a Stack & Adjusting the Spacing, Rearranging & Adding Items to a Stack, Responsive Resize, Stacks, & Padding, Keystrokes for Working with Stacks & Padding, Nesting Stacks (Stacks Within Stacks)

Exercise Preview

Exercise Overview

In this exercise, you’ll explore how to stack, reorder, resize, and adjust the space around or between design elements.

Creating a Stack & Adjusting the Spacing

1. In Adobe XD, go to File > Open from Your Computer or hit Cmd–Shift–O (Mac) or Ctrl–Shift–O (Windows).
2. Navigate into Desktop > Class Files > Adobe XD Class and double–click on Hawaii.xd to open it.
3. Zoom in on the top of the artboard so you can see the text in the navbar.
4. In the Toolbar, choose the Select tool .
5. Let’s even out the spacing between the text links in the navbar. In the navbar, click on Maui.
6. Hold Shift and click on the other 3 items (Oahu, Kauai, and Big Island).
7. Group them by hitting Cmd–G (Mac) or Ctrl–G (Windows).

8. In the Property Inspector on the right, click on the checkbox under Stack.

   NOTE: The spacing amount to the right starts out as a dash (—) because the amounts are different.

9. Hover over the space between Maui and Oahu and you won’t see anything happen.
10. Hold the tilde (~) key that’s at the top left of most keyboards below the Esc key.
11. While holding the tilde ~ key, again hover over the space between Maui and Oahu and this time you should see a pink highlight for the space between the items!
12. Continue holding the tilde ~ key, and drag left and right to resize the space.
13. This only adjusted the space between those 2 items. Let’s make all the spaces the same. Hold tilde ~ and Shift and hover over any of the gaps between the items and they should all highlight pink.
14. Continue holding the tilde ~ and Shift and drag left and right to resize all the spaces (making them consistent).
15. Let’s see another way to do this without the tilde key. Double–click on Maui to go into the group.
16. Hover over the space between Maui and Oahu and you should see a pink highlight.
17. Hold Shift and the pink highlight should appear on all the spaces. Drag left and right to resize them.
18. Let’s finish this by setting a specific amount of space. Hit Esc to reselect the group (you should see an the blue outline around the group of text links).

19. In the Property Inspector on the right, under Stack there’s an amount to the right of the checkbox. Change that to 30.

Rearranging & Adding Items to a Stack

1. In the navbar, double–click on Kauai to select it.

2. Drag it to the left (while holding Shift) so it’s between Maui and Oahu.

   XD is smart enough to keep the same spacing!

3. In the navbar, click on Big Island to select it. (If the group gets selected, double–click to go into the group and only select Big Island.)
4. Hit Cmd–C (Mac) or Ctrl–C (Windows) to copy it.
5. Hit Cmd–V (Mac) or Ctrl–V (Windows) to paste it.
6. Let’s make one more copy, but a different way. Select Oahu.
7. Hold Option (Mac) or Alt (Windows) and drag a copy between the 2 Big Island pieces of text.
8. Hit Esc to reselect the entire group.
9. Hold Shift (so it doesn’t move vertically) and drag the entire navbar to the left so you can see all the items.
10. Change the last 2 items to Quick Facts and Travel Info by double–clicking on the text until it becomes editable.
11. The nav should now be: Maui, Kauai, Oahu, Big Island, Quick Facts, Travel Info.
12. Click in an empty area of the canvas to deselect the text.
13. Let’s move the navbar into position using the layout grid we’ve already set up. Turn on the grid by choosing View > Show Layout Grid, or hitting Cmd–Shift–' (Mac) or Ctrl–Shift–' (Windows).
14. Hold Shift (so it doesn’t move vertically) and drag the group of text links so the right side aligns to the right side of the rightmost aqua column.

15. Turn off the grid by choosing View > Hide Layout Grid, or hitting Cmd–Shift–' (Mac) or Ctrl–Shift–' (Windows).

Responsive Resize & Stacks

1. Scroll far down the artboard to the Island Quick Facts section.

2. Under Island Quick Facts, select the white Kauai info card.

   It’s a group, so the whole card will be selected.

3. Zoom in so you can see it well.

4. In the Property Inspector on the right notice the switch for Responsive Resize is flipped on and below that the Auto tab is selected.

   These are the default settings.

5. Use any of the corner resize handles to change the width and height, just to see how it reacts (don’t worry about making it any specific size).

   It resizes pretty well, but let’s see another way.

6. Undo that resizing by hitting Cmd–Z (Mac) or Ctrl–Z (Windows).
7. If the Layers panel is not open, at the bottom left of the window click the  icon.
8. Expand the info card group by clicking its folder icon.

9. Notice the contents of the info card group:

   • close button
   • multiple text layers
   • divider line
   • a text layer
   • button
   • info card bg
10. With the card still selected, in the Property Inspector on the right, click on the checkbox under Stack.

11. Nothing visually will change, but in the Layers panel notice that inside the info card group there’s a new Group 2 that XD just automatically made.

12. Click folder icon for Group 2 to see what’s inside.

13. Notice Group 2 contains 2 text layers: Kauai and 4th Largest Island.

    These have a horizontal layout, while everything else has a vertical layout. So XD had to make this group so they could remain horizontal. How smart!

14. Notice there are now only resize handles on the left and right sides. Use the right resize handle to adjust the width.
15. That works well, but undo that resizing by hitting Cmd–Z (Mac) or Ctrl–Z (Windows).

16. To adjust the height we alter the spacing between items:

    • Hold Shift and tilde (~) as you hover over a space between the items in the card. When you see all the spaces highlight in pink drag down/up to adjust the space.
    • Undo that by hitting Cmd–Z (Mac) or Ctrl–Z (Windows).
    • Hold tilde (~) as you hover over the space above the Learn More button. When you see the space highlight in pink, drag down to increase the space.
17. We can also rearrange the items. Double–click on The Garden Island text to enter the card’s group (but not edit the text).

18. Hold Shift (so it won’t move horizontally) and drag The Garden Island text down below the dotted divider line.

Padding

1. Select the Learn More button.

2. We’ll be adding a second button in a little bit, so let’s make this a reusable component. In the Property Inspector on the right:

   • To the right of Component click the + button.
   • Click on the checkbox under Padding.

3. Let’s change the space (padding) around the outside of the button. We could do that by adjusting the Padding numbers in the Property Inspector, but let’s see how to do it using keystrokes.

   Hold the tilde (~) key and hover over the white space around the Learn More text to see that none of the spaces get a pink highlight.

4. Double–click on the Learn More button to go into the component group.

5. Again hold the tilde (~) key and hover over the white space around the Learn More text and now you should see a pink highlight!

6. Try the following keystrokes (just hover, do not drag):

   • Holding tilde (~) only puts the pink highlight on the one specific side you’re hovering over.
   • Holding Shift and tilde (~) puts the pink highlight on all sides.
   • Holding Option (Mac) or Alt (Windows) and tilde (~) puts the pink highlight on 2 opposing sides: top/bottom or left/right.

7. While hovering over the left or right side, hold Option (Mac) or Alt (Windows) and tilde (~) so you see the pink highlight on the left and right sides, then drag in a little to reduce the left/right padding.

Nesting Stacks (Stacks Within Stacks)

1. Hit Esc to reselect the button component (verify it’s selected by making sure button is highlighted in the layers panel).
2. With the Learn More button component selected, drag it over until its left side aligns with the text above.
3. With the Learn More button component still selected, hit Cmd–C (Mac) or Ctrl–C (Windows) to copy it.
4. Hit Cmd–V (Mac) or Ctrl–V (Windows) to paste it.
5. The new button will be placed below, but we want it to the right. Hold Shift and click on the other Learn More button so both are selected.
6. Group them by hitting Cmd–G (Mac) or Ctrl–G (Windows).

7. With them still selected, in the Property Inspector on the right:

   • Click on the checkbox under Stack.
   • Click the Horizontal Stack button .

   Now the buttons should be next to each other.

8. For the right Learn More button, keep double–clicking on the text until it becomes editable.
9. Change the text to Flights and notice how the width of the button changes to fit the new text!
10. For the Learn More button on the left, keep double–clicking on the text until it becomes editable.

11. Change the text to More Info, hit Esc to finish, and notice:

    • The width of the button changes to fit the new text.
    • The button to the right moves as the button width changes.

Optional Bonus: Making The Entire Page a Stack

1. To zoom in/out so you can see everything, choose View > Zoom to Fit All.
2. In the Layers panel we need to select all the main page sections. Click on the header group.
3. Hold Shift and click on the Travel Info group (near the bottom) so all the groups between them are also selected.

4. In the Property Inspector on the right, click on the checkbox under Stack.

   This turns each individual group into a stack so adjusting one thing in a section moves down the other things in that section. But for one section to push down another section, we need to put all of these into a group.

5. With all the sections still selected, group them by hitting Cmd–G (Mac) or Ctrl–G (Windows).
6. In the Property Inspector on the right, click on the checkbox under Stack.
7. Now let’s test it out. Click in an empty area of the canvas to deselect everything.
8. Zoom in a bit so you can see the 3 sections: Kauai , Oaha, and Big Island.
9. Keep double–clicking on the paragraphs of text under Oaha until you can edit them.

10. Put the cursor anywhere in the middle of the large paragraph and hit Return (Mac) or Enter (Windows).

    Notice that the Big Island section below moves down!

11. Click in an empty area of the canvas to deselect everything.

12. Let’s rearrange the sections on the page. Double–click (just once) on the Oaha section.

    This should select only the Oaha section.

13. Drag the Oaha section up (while holding Shift) until it swaps places with the Kauai section above.

    Cool!