Learn how to use responsive resize and constraints for multiple screen sizes and layouts.

What is responsive resize?

When designing for a multi-device landscape today, it's important to consider the wide variety of screen sizes available across mobile, tablet, and desktop resolutions. Since not all designers use similar devices, designers need to consider how content works across multiple screen sizes. 

To solve this user problem, Adobe XD has developed a feature called responsive resize that allows you to resize objects while maintaining spatial relationships at different sizes to best adapt to multiple screen sizes.

Responsive resize
Responsive resize

How does responsive resize work?

With Responsive Resize, XD automatically predicts which constraints you are likely to apply and automatically applies those constraints as objects are resized. 

Traditionally, to achieve a responsive-like behavior, designers had to manually apply constraints to multiple objects to dictate the object behavior when resized. This monotonous and time consuming method focused more on guess work and repetitive motions overshadowing the creative spark of designing.

XD automatically applies constraints by analyzing the objects you have selected, their grouping structure and proximity to the edges of the parent group, and layout information.

Responsive resize
Responsive resize working with an asset being resized

Responsive resize crosshairs

When resizing, pink crosshairs appear on the object being resized. These crosshairs indicate what constraint rules are applied to a group. XD provides a visual, in-context method of learning how responsive resize and manual constraints work in tandem.

Crosshairs in responsive resize
Group being resized with pink crosshairs

Responsive resize and groups

Before resizing, you can group similar objects to establish relationships between them. XD retains the grouped objects together by default and allows you to establish a hierarchy in your projects through an organization mechanism you already use. When resized, grouped objects stay together.

הערה:

Responsive resize does not support symbols. As a workaround, ungroup symbols and resize the group.

Group similar objects
Group similar objects before resizing

Manually edit constraints

If you’re not happy with the results of responsive resize, you can edit the constraint rules manually. Placing manual constraints allows you to explicitly determine how objects behave when you resize a symbol, artboard, or group with layers within.

Select Manual  to manually edit constraints that responsive resize has placed on objects. Manual constraints always override automatic constraints placed by XD. You can use the following constraints to specify the rules and control the behavior of the various components.

  • Fixed/Variable width
  • Fixed/Variable height
  • Fixed/Variable left margin
  • Fixed/Variable right margin
  • Fixed/Variable top margin
  • Fixed/Variable bottom margin
Constraints
Setting manual constraints
Setting up constraints on individual objects
Setting up constraints on individual objects
Setting up constraints on group of objects
Setting up constraints on a group of objects

Responsively resizing artboards

By default, responsive resize is turned off for artboards, but you can turn it on to initiate responsive resize on artboards.

To switch on responsive resize:

  1. Select the artboard in design mode.

  2. In the Property Inspector, select the toggle button to switch on responsive resize.

    Switch on responsive resize, select Manual and view constraints
    Switch on or off responsive resize
  3. Select the following responsive resize options:

    • Auto: automatically uses constraints to resize the artboard.
    • Manual: lets you set manual constraints available in the Property Inspector.
    Switch on responsive resize, select Manual and view constraints
    Switch on responsive resize, select Manual, and view constraints

How do I override responsive resize for groups?

Though responsive resize is the default resize behavior for multi-selection and group resizing, you can: 

  • For a scaled resize, use the Shift key to temporarily override the responsive behavior. You can pull from one of the corner selection handles to lock the aspect ratio of your group as you resize.
  • Switch off responsive resize option in the Property Inspector.

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת