By Howard Pinsky
We're going to take a look at Responsive Resize and how we can help quickly transition your designs to fit the screen size that you need. Let's dive in!
Here, I have a landing page which was designed to be viewed on the desktop. So the various elements on this page are pretty spread apart and there's quite a bit of padding on the side. Traditionally, creating an additional version of this page for a tablet or phone would be a time consuming process. By default, Responsive Resize is turned off for artboards. This is to ensure that users can extend their work area without affecting any layers. But when the time comes, a flick of the switch will turn the magic on. Let me duplicate this artboard so we leave the original intact.
Now as I scale horizontally, you'll notice that many of the elements are beautifully shifting across the screen and the repeat grid is collapsing to show fewer cards. But, if you look closely not everything is behaving the way I was hoping. The larger images for instance aren't resize and correctly as the artboard is being pulled inwards. In this case, I'll want to check my constraints. Selecting both groups, I'll hop into Responsive Resizes manual settings and make sure that fixed with is not active. And now when I resize the artboard again the width of those images resize to remain on the screen.
At this point because there was extra padding on the desktop version, we have a little bit more than we'd like on the mobile screen. For the bottom cards, I can simply select them both and pull them out making sure to hold down my ALT or option key to scale them from the center. And because Responsive Resize is turned on for these groups, the images and anything within them move as they should. Now for the repeat grid above I have two options. I can either extend it to let users know that additional cards exist over to the right or I can jump into the grid expand the padding and then scale the elements to fit the screen.
Let's look at one more example, but going in the opposite direction. Here's a mobile app, that's currently optimized for a tablet's display but I may want to resize it to show off what it would look like on the desktop. Just like with the previous example, I'll turn on Responsive Resize and drag the handle horizontally. And as you can see it's doing a pretty decent job, but it needs a touch of help. In the trending section, I may want to restrict this to just two posts. So I'll start by ungrouping the repeat grid and then make sure that the width of both these groups is not fixed. This will let them expand nicely as I enlarge the artboard and then if I need to I can make a few minor tweaks. Finally, the two texts groups under the more new section needs to be adjusted. Turning off the fixed width and both the left and the right constraints will let me pull them out to fill the screen.
And that's a look at how Responsive Resize can help you quickly transition your designs to fit the screen size that you need. Stay tuned for more time saving videos coming at you very soon. Take care.
Quickly adapt designs for different screen sizes using Responsive Resize in Adobe XD. In Auto-mode Responsive Resize will predict the placement of elements based on relative positioning on the canvas, automatically resizing elements, and repositioning them for a larger or smaller design. All you need to do is resize the group of elements or artboard. In Manual mode, responsive resize can be fine-tuned by pinning elements to different positions, or fixing width and height. Responsive resize helps speed up your workflow for adapting designs for responsive web design breakpoints, or different mobile device sizes.
