As a designer on the Adobe Studio team, Cynthia Fong brings her passion for inspiring others to all her creative projects.

When Fong completed the site design for the website layout, she used Control+D (Windows)/Command+D (macOS) to duplicate the artboard. She double-clicked the new artboard title and renamed it. With the new artboard selected, she dragged the middle right handle to decrease the artboard width. Responsive Resize is turned off by default, so none of the elements resized. She used Control+Z/Command+Z to reset the artboard to its original size.

Fong then enabled Responsive Resize by toggling the switch in the Property Inspector. When she dragged the artboard to a mobile width this time, the elements resized much better. The featured images didn’t resize the way she wanted, though, so she opted to undo the changes.

The Responsive Resize feature works best when the elements in your design are organized. Fong spent time during the design phase grouping elements like the menu icons so that XD would scale and reposition them accordingly. In the screenshot below, notice the difference in how the menu icons reposition when they’re not grouped compared to when they are.

Responsive Resize does its best to scale and position elements when resizing to new layouts. There were times when Fong discovered she wanted to override the Auto settings. For example, she used Shift+click to select the two featured images, and then she clicked the Manual option for Responsive Resize. She deselected Fixed Width and resized the artboard again. This time, the images resized in a way that was closer to what she wanted.

With the two featured images selected, Fong held Alt (or Option) as she dragged to adjust the padding between the images and the edges of the artboard.

The gallery below the main image is contained in a Repeat Grid. Fong used Shift+click to select the Gallery label, Repeat Grid, and Featured label and move them to the left. She then moved the three dots to the right. After she resized to mobile, only one gallery image was visible. To fix this, she selected the Repeat Grid in the Layers panel and dragged the handle off the side of artboard to show all the images.

The mobile design was pretty close at this point. Fong manually adjusted the header elements to put the finishing touches on her design. She then selected the Hero layer in the Layers panel and resized and positioned the main image, header icons, title, and tagline until she was happy with the overall layout.

Use Responsive Resize to speed up your design workflow as you customize your app layout for different screen sizes.

Note: Project files included with this tutorial are for practice purposes only.