Responsive resize and constraints

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.

Work with responsive resize

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

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.

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 component, 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

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:

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.