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 comprehensive exercise, you'll master one of Adobe XD's most powerful layout features: stacks. You'll learn how to efficiently organize, reorder, resize, and adjust spacing between design elements using both interface controls and keyboard shortcuts. By the end of this tutorial, you'll understand how to create responsive layouts that automatically adapt when content changes—a crucial skill for modern UX/UI design workflows.

Creating a Stack & Adjusting the Spacing

We'll begin by working with navigation elements, transforming inconsistently spaced text links into a perfectly organized stack with uniform spacing.

1. In Adobe XD, go to File > Open from Your Computer or use the keyboard shortcut Cmd–Shift–O (Mac) or Ctrl–Shift–O (Windows).
2. Navigate to Desktop > Class Files > Adobe XD Class and double-click on Hawaii.xd to open the project file.
3. Zoom in on the top portion of the artboard to clearly see the navbar text elements.
4. Select the Select tool from the Toolbar.
5. We'll now create uniform spacing between the navigation links. Click on Maui in the navbar.
6. Hold Shift and click on the remaining three items: Oahu, Kauai, and Big Island to select all navigation elements.
7. Group these elements by pressing Cmd–G (Mac) or Ctrl–G (Windows).

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

   Note: The spacing value displays as a dash (—) initially because the current spacing between elements is inconsistent.

9. Hover over the space between Maui and Oahu—you won't see any interactive feedback yet.
10. Press and hold the tilde (~) key, located in the top-left corner of most keyboards below the Esc key.
11. While holding tilde ~, hover over the space between Maui and Oahu. You'll now see a pink highlight indicating the adjustable space!
12. Continue holding tilde ~ and drag horizontally to adjust this specific spacing.
13. To adjust all spaces uniformly, hold both tilde ~ and Shift, then hover over any gap. All spaces should highlight in pink simultaneously.
14. While holding tilde ~ and Shift, drag left or right to create consistent spacing across all navigation items.
15. Here's an alternative method: Double-click on Maui to enter the group editing mode.
16. Hover over the space between Maui and Oahu—the pink highlight appears without needing the tilde key.
17. Hold Shift to highlight all spaces, then drag to adjust them uniformly.
18. For precise control, press Esc to reselect the entire group (look for the blue outline around all text links).

19. In the Property Inspector's Stack section, change the spacing value to 30 pixels for exact consistency.

Rearranging & Adding Items to a Stack

Stacks shine when you need to reorganize content or add new elements. Adobe XD automatically maintains your spacing and alignment as you make changes.

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

2. While holding Shift (to constrain vertical movement), drag Kauai to the left, positioning it between Maui and Oahu.

   Pro tip: XD automatically maintains consistent spacing as you reorder stack items—no manual adjustments needed.

3. Select Big Island (if the entire group gets selected, double-click to enter group editing mode).
4. Copy the item with Cmd–C (Mac) or Ctrl–C (Windows).
5. Paste it using Cmd–V (Mac) or Ctrl–V (Windows).
6. For a faster duplication method, select Oahu.
7. Hold Option (Mac) or Alt (Windows) and drag to create a copy, positioning it between the two Big Island text elements.
8. Press Esc to select the entire navigation group.
9. Hold Shift and drag the navbar left to ensure all items remain visible within your design area.
10. Edit the duplicated items by double-clicking until the text becomes editable. Change them to Quick Facts and Travel Info.
11. Your navigation should now read: Maui, Kauai, Oahu, Big Island, Quick Facts, Travel Info.
12. Click in an empty canvas area to deselect all elements.
13. Now we'll align the navbar using the layout grid. Enable the grid: View > Show Layout Grid or press Cmd–Shift–' (Mac) or Ctrl–Shift–' (Windows).
14. Hold Shift and drag the navigation group so its right edge aligns with the rightmost aqua column.

15. Hide the grid: View > Hide Layout Grid or use the same keyboard shortcut.

Responsive Resize & Stacks

One of the most powerful aspects of stacks is their integration with Adobe XD's responsive resize features. This combination creates layouts that intelligently adapt to content changes—essential for modern, flexible designs.

1. Scroll down to the Island Quick Facts section.

2. Select the white Kauai information card.

   Note: This element is grouped, so the entire card will be selected as one unit.

3. Zoom in for better visibility of the card details.

4. In the Property Inspector, notice that Responsive Resize is enabled and set to Auto.

   These are XD's intelligent default settings for adaptive layouts.

5. Experiment with resizing using any corner handle to observe the responsive behavior.

   While this works adequately, we'll explore a more sophisticated approach using stacks.

6. Undo the resizing: Cmd–Z (Mac) or Ctrl–Z (Windows).
7. If the Layers panel isn't visible, click the icon in the bottom-left corner.
8. Expand the info card group by clicking its folder icon to reveal its structure.

9. Examine the card's components:

   • Close button
   • Multiple text layers
   • Divider line
   • Additional text layer
   • Button element
   • Background shape
10. With the card selected, enable Stack in the Property Inspector.

11. While nothing changes visually, check the Layers panel—XD has automatically created Group 2 within the info card.

12. Expand Group 2 to see its contents.

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

    Why this matters: These elements have a horizontal layout while everything else flows vertically. XD intelligently preserves their horizontal relationship within the overall vertical stack.

14. Notice the resize handles now appear only on the left and right sides. Use the right handle to adjust width—observe how the content reflows beautifully.
15. Undo that change: Cmd–Z (Mac) or Ctrl–Z (Windows).

16. To adjust height, we'll modify the spacing between stacked items:

    • Hold Shift + tilde (~) while hovering over any space. When all spaces highlight pink, drag vertically to adjust overall spacing.
    • Undo with Cmd–Z (Mac) or Ctrl–Z (Windows).
    • Hold tilde (~) alone and hover over the space above the Learn More button. When highlighted, drag to increase just that specific spacing.
17. To rearrange stack items, double-click on The Garden Island text to enter group editing mode.

18. Hold Shift and drag The Garden Island below the dotted divider line. The stack automatically reflows around the change.

Padding

Padding control in Adobe XD gives you precise command over the space around elements. Combined with components, this creates scalable, consistent interface elements.

1. Select the Learn More button.

2. We'll convert this to a reusable component for consistency across your design system. In the Property Inspector:

   • Click the + button next to Component
   • Enable the Padding checkbox

3. Let's adjust the button's internal spacing using keyboard shortcuts rather than numerical inputs.

   Hold tilde (~) and hover around the button text—notice that no spaces highlight yet.

4. Double-click the Learn More button to enter component editing mode.

5. Now hold tilde (~) and hover around the text—you should see pink highlights indicating adjustable padding areas.

6. Master these essential keyboard combinations for padding control:

   • Tilde (~) alone: Highlights individual sides as you hover
   • Shift + tilde (~): Highlights all four sides simultaneously
   • Option/Alt + tilde (~): Highlights opposing pairs (top/bottom or left/right)

7. Practice precision padding: While hovering over the left or right side, hold Option/Alt + tilde (~) to highlight both horizontal sides, then drag inward to reduce left/right padding.

Nesting Stacks (Stacks Within Stacks)

Advanced stack management involves creating hierarchical layouts—stacks within stacks. This technique enables complex, responsive layouts that maintain their structure regardless of content changes.

1. Press Esc to reselect the button component (verify selection in the Layers panel).
2. Drag the Learn More button to align its left edge with the text above.
3. Copy the button: Cmd–C (Mac) or Ctrl–C (Windows).
4. Paste the duplicate: Cmd–V (Mac) or Ctrl–V (Windows).
5. The new button appears below the original. Select both buttons by holding Shift and clicking the first button.
6. Group them: Cmd–G (Mac) or Ctrl–G (Windows).

7. In the Property Inspector:

   • Enable Stack
   • Click the Horizontal Stack button

   The buttons now align horizontally as a nested stack within the larger vertical stack.

8. Double-click through the layers until you can edit the right button's text.
9. Change it to Flights—notice how the button automatically resizes to accommodate the new text length.
10. Similarly, edit the left button's text to More Info.

11. Observe the intelligent behavior as you make this change:

    • The button width adapts to fit the new text
    • The adjacent button automatically repositions
    • The overall card layout remains perfectly balanced

Optional Bonus: Making the Entire Page a Stack

For the ultimate in flexible page layouts, we'll convert the entire page structure into a master stack. This advanced technique ensures that content changes in one section automatically push or pull other sections, maintaining perfect vertical rhythm throughout your design.

1. View the complete page: View > Zoom to Fit All.
2. In the Layers panel, click the header group to select it.
3. Hold Shift and click the Travel Info group at the bottom, selecting all major page sections.

4. Enable Stack in the Property Inspector.

   Important: This creates individual stacks within each section, but for true page-level responsiveness, we need one master stack.

5. With all sections selected, create a master group: Cmd–G (Mac) or Ctrl–G (Windows).
6. Enable Stack for this master group—now you have true page-level stack behavior.
7. Test the setup: Click in empty canvas space to deselect everything.
8. Zoom in to see the Kauai, Oahu, and Big Island sections clearly.
9. Double-click to edit the paragraph text under Oahu.

10. Place your cursor mid-paragraph and press Return/Enter to add a line break.

    Watch the magic: The Big Island section automatically moves down to accommodate the expanded content!

11. Click in empty space to deselect, then double-click once on the Oahu section to select it as a unit.

12. Hold Shift and drag the Oahu section upward until it swaps positions with Kauai.

    The entire page reflows automatically—this is the power of properly structured stacks in action.