We designed a header for a mobile web page that we want to use as the basis for different device layouts. We then used Responsive Resize to re-create the artboard for tablet and desktop sizes. With Responsive Resize enabled, XD helps determine how elements should scale and align in the design.
It’s important to experiment with how to best organize the layers on your artboard before you use Responsive Resize. You can also use a combination of the automatic and manual settings to resize and pin objects in your design.
Below is the result of our tests. In some cases we left objects as individual elements; in others we grouped them in different ways. What worked best for this design was to group the icons together, and then group the logo with the set of icons. With this structure, the Auto setting worked well to fix the logo and icons to the top left and right of the artboard with a fixed height and the appropriate spacing between elements.
Notice how the pink resize crosshairs indicate how the objects are positioned relative to the edges of the artboard.
With our base design complete, we copied the elements, pasted them to a new tablet-sized artboard, and turned on Responsive Resize. Then, we disabled the manual settings for the large logo and tagline in the center of the design, selected all the elements, and dragged to fill the new artboard. As you drag your own design, notice what scales and repositions and what doesn’t.
Our settings worked well for this design. We just needed to manually adjust the large logo and tagline.
Responsive Resize helped us quickly reuse our mobile app design to create layouts for tablet and web.
Adobe Stock contributor: Weidong