XD feature deep dive: responsive resize

How one little switch can change your designs forever.

What is Responsive Resize?

This feature allows you to easily resize interface elements for different screen sizes. When used correctly, it can help you drop a layout from tablet to mobile simply by shrinking the width of your artboard.

When should you use it?

Anytime you’re building a component that you anticipate needing to resize for different layouts. That could mean sizing elements up or down for different screen sizes, or simply wanting to stretch/shrink an element to fit a space more comfortably.

A note on Stacks: Responsive Resize and Stacks can be a bit fussy together…particularly when you have Padding enabled. I’d suggest picking the feature that best suits your use case and prioritizing that (and turn off Padding to get the most out of Responsive Resize).

First things first…turn the switch on.

In your Property Inspector, you’ll see the Layout section. Inside of that section are your Responsive Resize controls (alongside Stacks and Padding). Select the element you’d like to apply Responsive Resize to, and toggle it on.

Pin elements where you want them to stick!

Drill down into your component, and select each individual item (one at a time). After you select the smaller element, you can select where you’d like it to stick as you resize the larger component. For example, in the text input below I want the checkbox to stick to the upper right corner. It looks like Responsive Resize automatically had it pinned top left, so I deselect those constraints and select inside top right.

Fixed width, fixed height, or neither?

Depending on the component (or element), you may want to enable fixed width/height. For things like icons you’ll want them both enabled so the icon doesn’t stretch or shrink disproportionately. For things like text, you may want fixed height, but no fixed width so the text grows horizontally (or vice versa so the text grows vertically). If you’re using point text, disabling fixed width means the text will shrink alongside the component.

Fixed width helps an icon stay locked at its original size.

Disabling fixed width for text results in point text shrinking as the component gets smaller.

Test and test again!

I like to drag out an instance of my main component and try stretching and shrinking it to see what happens. The best way to learn these features is to play around with them and make sure they work for your designs, so don’t be afraid to start putting them into use and working out any kinks!