UI and UX • How-To How to Make a Responsive Design in Adobe XD

Design app layouts for different screen sizes.

 

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.

headshot of designer Cynthia Fong

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

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.

Photowalk responsive website design demo asset shown at desktop and mobile widths with Adobe XD logo at lower left

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.

Two artboards show the same Photowalk web design asset; the first is named ‘desktop’ second one is named to ‘mobile’

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.

: The left artboard shows Responsive Resize is off and design cutoff, right artboard shows it on and design elements resized

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.

2 graphics show Adobe XD layers panel and the difference to the header design when icons are not grouped and 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.

Featured images on mobile artboard are selected, Responsive Resize panel shows Manual is selected and Fix Width unselected

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.

Mobile artboard resized to mobile width, featured images resized accordingly, Responsive Resize panel shows on the right

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.

Website design demo asset shows gallery images in a Repeat Grid, green handle on the right is selected to expand gallery

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.

Before and after state of the mobile web design show header elements not to scale on the left; resized to scale on the right

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.

You may also like