Designing your app layouts for different screen sizes is essential to creating a great user experience. In this tutorial, designer Cynthia Fong scales her app design for optimal display on any screen. See how she uses Responsive Resize in Adobe XD to save time.

Before You Start

Fong provided an XD file that includes a fully designed artboard and additional design elements for you to use as you try this technique. Use this practice file or practice with a file of your own.

Step 1: Make a Copy

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 it to its original size.

Step 2: See What Happens

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.

Step 3: Get Organized

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.

Step 4: Check Constraints

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.

Step 5: Expand the View

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.

Step 6: Open the Gallery

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.

Step 7: Move Things Around

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.

Design with Speed

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.