Handboek Annuleren

Create dynamic designs with stacks

  1. Adobe XD User Guide
  2. Introduction
    1. What's new in Adobe XD
    2. Common questions
    3. Design, prototype, and share with Adobe XD
    4. Color Management
    5. System requirements
      1. Hardware and software requirements
      2. Adobe XD, Big Sur, and Apple silicon | macOS 11
    6. Workspace basics
    7. Change app language in Adobe XD
    8. Access UI design kits
    9. Accessibility in Adobe XD
    10. Keyboard shortcuts
    11. Tips and tricks
  3. Design
    1. Artboards, guides, and layers
      1. Get started with artboards
      2. Use guides and grids
      3. Create scrollable artboards
      4. Work with layers
      5. Create scroll groups
    2. Shapes, objects, and path
      1. Select, resize, and rotate objects
      2. Move, align, distribute, and arrange objects
      3. Group, lock, duplicate, copy, and flip objects
      4. Set stroke, fill, and drop shadow for objects
      5. Create repeating elements
      6. Create perspective designs with 3D transforms
      7. Edit objects using Boolean operations
    3. Text and fonts
      1. Work with drawing and text tools
      2. Fonts in Adobe XD
    4. Components and states
      1. Work with components
      2. Work with nested components
      3. Add multiple states to components
    5. Masking and effects
      1. Create a mask with shapes
      2. Work with blur effects
      3. Create and modify gradients
      4. Apply blend effects
    6. Layout
      1. Responsive resize and constraints
      2. Set fixed padding for components and groups
      3. Create dynamic designs with stacks
    7. Videos and Lottie animations
      1. Work with videos
      2. Create prototypes using videos
      3. Work with Lottie animations
  4. Prototype
    1. Create interactive prototypes
    2. Animate prototypes
    3. Object properties supported for auto-animate
    4. Create prototypes with keyboard and gamepad
    5. Create prototypes using voice commands and playback
    6. Create timed transitions
    7. Add overlays
    8. Design voice prototypes
    9. Create anchor links
    10. Create hyperlinks
    11. Preview designs and prototypes
  5. Share, export, and review
    1. Share selected artboards
    2. Share designs and prototypes
    3. Set access permissions for links
    4. Work with prototypes
    5. Review prototypes
    6. Work with design specs
    7. Share design specs
    8. Inspect design specs
    9. Navigate design specs
    10. Review and comment design specs
    11. Export design assets
    12. Export and download assets from design specs
    13. Group sharing for enterprise
    14. Back up or transfer XD assets
  6. Design systems
    1. Design systems with Creative Cloud Libraries
    2. Work with document assets in Adobe XD
    3. Work with Creative Cloud Libraries in Adobe XD
    4. Migrate from linked assets to Creative Cloud Libraries
    5. Work with design tokens 
    6. Use assets from Creative Cloud Libraries
  7. Cloud documents
    1. Cloud documents in Adobe XD
    2. Collaborate and coedit designs
    3. Coedit documents shared with you
  8. Integrations and plugins
    1. Work with external assets
    2. Work with design assets from Photoshop
    3. Copy and paste assets from Photoshop
    4. Import or open Photoshop designs
    5. Work with Illustrator assets in Adobe XD
    6. Open or import Illustrator designs
    7. Copy vectors from Illustrator to XD
    8. Plugins for Adobe XD
    9. Create and manage plugins
    10. Jira integration for XD
    11. Slack plugin for XD
    12. Zoom plug-in for XD
    13. Publish design from XD to Behance
  9. XD for iOS and Android
    1. Preview on mobile devices
    2. Adobe XD on mobile FAQ
  10. Troubleshooting
    1. Known and fixed issues
      1. Known issues
      2. Fixed issues
    2. Installation and updates
      1. XD appears as not compatible on Windows
      2. Error code 191
      3. Error code 183
      4. Issues installing XD plugins
      5.  Prompt to uninstall and reinstall XD on Windows 10
      6. Issues with preferences migration
    3. Launch and crash
      1.  XD crashes when launched on Windows 10
      2.  XD quits when you sign out of Creative Cloud
      3. Issue with subscription status on Windows
      4. Blocked-app warning when launching  XD on Windows
      5. Crash dump generation on Windows
      6. Crash log collection and sharing
    4. Cloud documents and Creative Cloud Libraries
      1. Issues with XD cloud documents
      2. Issues with linked components
      3. Issues with libraries and links
    5. Prototype, publish, and review
      1. Unable to record prototype interactions on macOS Catalina
      2. Issues with publish workflows
      3. Published  links do not appear in browsers
      4. Prototypes do not render correctly in browsers
      5. Commenting panel suddenly showing up on shared links
      6. Unable to publish libraries
    6. Import, export, and working with other apps
      1. Import and export in XD
      2. Photoshop files in XD
      3. Illustrator files in XD
      4. Export to After Effects from XD
      5. Sketch files in XD
      6. Third-party apps not visible in Export

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. 

Outcome of how stacks work

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.

Before you proceed

Ensure that you are familar with basics of content-aware layouts:

Limitations

Know these limitations before you get started with stacks:

  • If you hover an element with a hover state that grows in size, the background does not resize to fit the new state, and elements in the stack are not pushed away.
  • Components cannot act as a background for padding and stacks. Instead, create one component that contains both the content and the background.
  • You cannot:
    • Convert special groups into masks or Boolean groups into stacks.
    • Resize stacks in the stack direction.
    • Select a stack element and elements outside of the stack.

Enable stacks

You can enable stacks on a group or component that has responsive resize enabled. Select the Stacks checkbox within the Responsive Resize controls of the Property Inspector.

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. 

Opmerking:

When working with components, the stack orientation control is available only for the master component.

What happens when you enable stacks?

When you enable stack, XD does the following:

  • Automatically identifies the background (a group or shape positioned at the bottom of the Layers panel and overlaps on the canvas with all the objects in the group),
  • Enables and calculates the padding values,
  • Determines the stack orientation: Vertical or Horizontal,
  • Groups overlapping elements to preserve the layout, and
  • Defines and fixes the spacing values in-between the elements.
apply stacks

Edit stack elements

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

align stacks

Move the elements freely or use the Align tools on the stack elements in the opposite of the stack direction.

resize

Select an object to resize, and other objects in the stack automatically move to preserve their relative spacing. Use Auto Height text to dynamically adjust the height of text in the stack without changing its width.

Edit spaces between objects                                                                   Adjust spaces within a stack

Edit spaces between objects

Select an object inside a stacked group or component and hover on the spaces. A pink highlight represents the space between the objects in the stack. Click and drag the highlight to edit the space between the objects.

adjust spaces between stacks

Select the entire stack and hold down the S key on the keyboard to adjust the spaces inside a stack. You can also use S to edit padding.

Equalize spaces in a stack                                                                        Duplicate elements in a stack

Drag and use Shift or Shift + S (when your selection is outside of the stack).

Use Cmd+D to duplicate an element inside a stack and position it under the selected element.

Reorder stack elements

After you create and modify the stack elements, use any of the following options to reorder them:

  • Select the stack elements and drag them along the stack direction on canvas.
  • Use Cmd+ ] and Cmd + [ to move up and down in the stack and Cmd+Shift+] and Cmd+Shift+[ to move the selection first or last in a stack. These commands are also available in the contextual (right-click) menu.
  • The new position of the stack element is highlighted with pink boxes. To maintain alignment when reordering, press shift to lock the stack elements in the drag direction and preserve their original alignment.
Reorder stack elements

Create or modify a stack background

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.

Opmerking:

XD does not support component instances as background.

To create and modify a stack background, follow these steps:

create_modify_stack_baground

  1. Create a shape or group inside the stack that acts as a stack background. You can also create a background outside the stack and copy into the stacked group.
  2. From the stack, select the element you want to use as the background.
  3. Right-click and select Make Background or Replace Background. The selected element is moved to the end of the stack and resized to fit the size of the stack and padding values.

Do more with stack elements

Now that you have learned how to create stacks and work with them, here are some additional pointers on using stacks:

Nest and rearrange 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. 

stacks and repeat grids

Stacks in components and states

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. 

How do overrides behave with stacks?

  • A space override occurs when you manually edit the space between two elements of a stack in an instance or state. If you modify the space in the master component, the changes are not applied to the instance or state.
  • Instances can have content or layout overrides on elements such as a larger area text. These instances can still be in sync with the master for the padding values or spaces in-between them. 
Overrides behave with stacks

Learn more

"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.


What's next?

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.

Have a question or an idea?

Ask the Community

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!

 Adobe

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?