How to Make a Responsive Design in Adobe XD | Adobe Creative Cloud

Scale your app design for optimal display across different screen sizes.


Preview without Responsive Resize:

2. Duplicate the start artboard: Click the artboard name, press Control+D (Windows) or Command+D (macOS).
3. Select the second artboard. Double-click the artboard name and rename it.
4. Note that Responsive Resize is turned off in the Property Inspector.
5. Drag the right center handle to resize the artboard. Notice the artboard resizes, but none of the other design elements do. Use Control+Z or Command+Z to undo and reset the artboard size.

Enable Responsive Resize:

1. Toggle the Responsive Resize setting so it is turned on.
2. Select the artboard again and use the right center handle to resize the artboard.
3. Notice the featured images, navigation, and headline do not resize correctly. Undo to reset the artboard.

Note: Responsive resize speeds up your design workflow, but you will still need to make manual adjustments.

Override Auto settings:

1. Shift+click to select both featured images.
2. Tap Manual in the Responsive Resize section of the Property Inspector.
3. Deselect Fixed Width and resize the artboard again.
4. Shift+click to select both featured images, hold Alt or Option as you drag the middle right handle to make the images wider and decrease the padding between the images and the edges of the artboard.
5. Shift+click to select the Gallery label, gallery images, and the Featured label. Hold Shift as you drag to move these to the left of the artboard.

Tip: Holding shift as you drag to the right constrains the movement horizontally.

6. Expand the Gallery layer in the Layers panel.
7. Click to select the Repeat Grid.
8. Extend the right handle to reveal three photos.
9. Expand the title layer under Gallery in the Layers panel.
10. Select the dots layer and hold Shift as you drag the three dots to the right margin.

Make manual adjustments:

1. Expand the Hero layer, then expand the Main layer.
2. Select the title group.
3. Hold Shift as you drag a corner handle to resize proportionally.
4. Drag to move the title group into position using the guides to center.

That's it!

To watch with Subtitles/closed captions, click the CC icon in the lower-right corner.

About Adobe Creative Cloud:
Adobe Creative Cloud gives you the world's best creative apps so you can turn your brightest ideas into your greatest work across your desktop and mobile devices.

Connect with Adobe Creative Cloud:

#AdobeXD

How to Make a Responsive Design in Adobe XD | Adobe Creative Cloud

[beeroslava]

It would be lovely if you start posting the names of the songs in these videos... We can put them in a playlist and use them as a background while working.

[rowanbish]

what about different mobile screen sizes?

[drumdalf]

Thank you so much, super helpful video!!! :D

[khakh]

That's it?
Is that how I can make any design responsive?

[steveboris]

Great we can you know how to do it but without a narrative it's doubtful that the rest of us will get it quickly.

[yoyoz]

and what if you have buttons? This isn't really a comprehensive tutorial.

[fgfiad]

it wont work above full hd resolution.

[mareklewandowski]

This is only scaling. Not responsiveness.

[fahadmanzoor]

For god sake add Search in Adobe Xd so one can find files. Still wondering why adobe is ignoring it for so long.

[asher]

Great it is quick way to work web and mob app