Have a question to ask or an idea to share? Come and participate in Adobe XD Community. We would love to hear from you and see your creations!
Learn how to use stacks in Adobe XD to create dynamic layouts that react to content changes.
Stacks in Adobe XD enable objects within a group to define fixed spaces between them. When you resize, reorder, or modify objects within a stack, XD automatically preserves the defined space between objects.
Coupled with padding and responsive resize - stacks make a powerful feature combination that provides more control and speed in design. Stacks applied to components, automate layout, and makes editing of buttons, menus, dropdowns, card-based layouts a breeze.
Know these limitations before you get started with stacks:
XD automatically determines the stack orientation based on the structure of your group or component. However, if you want to change the stack orientation, select Vertical or Horizontal within the Stack option in the Property Inspector.
When working with components, the stack orientation control is available only for the master component.
After you create stack elements, use any of the following options to edit them:
Move elements or use the Align option Resize objects and text in the stack
Edit spaces between objects Adjust spaces within a stack
Equalize spaces in a stack Duplicate elements in a stack
After you create and modify the stack elements, use any of the following options to reorder them:
When you create a stack, XD automatically determines the background. However, when you enable stacks on a group or component, the layer or group positioned lowest in the stack that overlaps its content, becomes its background.
XD does not support component instances as background.
To create and modify a stack background, follow these steps:
Now that you have learned how to create stacks and work with them, here are some additional pointers on using stacks:
You can achieve a well defined and easy to edit layouts when nesting stacks within one another – for example, a horizontal stack into a vertical stack. You can nest an unlimited number of stacks. Watch the animated illustration to understand how nested stacks work.
You can apply stacks and padding to components to define reusable UI elements in the context of design systems. When working with components that need a label or a row update, usage of stacks makes the layout of the component react to change and automates manual layout effort. For example, if you have multiple instances with content overrides, use stacks to edit and manage spaces globally. No more manual editing of each card!
Stacks applied to master components are automatically applied to all its instances and states. You can also create a linked component with stacks and edit them.
"Coupled with padding and responsive resize -- make a powerful feature combination when you’re working in a design system. When stacks are used on a master component, any instance of that component will respect that stacking structure."— Dani Beaumont, Principal Product Manager, XD.
To learn more about getting started with stacks in components and groups, watch this video.
Viewing time: 1 minute.
We've got you started on how to use stacks to define spaces between elements. Take a step forward and learn how to create animated prototypes and share them with designers or stakeholders for feedback.