By Dani Beaumont
With the response of resize feature in Adobe XD, you can resize groups of objects while maintaining their placement and scalability. That means you can spend more time designing, and less time tediously resizing for the screens and layouts you need. Let me show you this feature in action.
I'm here in Adobe XD and I'm working on a few device-specific layouts for a page I'm designing. I have the iPhone layout and, rather than starting from scratch for the next layout — my tablet layout — I'd like to duplicate this design and just resize the elements. To do that I'll go ahead and click on the phone layout, and I'm going to hit CMD- or CTRL-D to duplicate that second artboard next to the first. Now, I want this to be a tablet layout, so I'll rename it, and with it selected I'll come into the control panel and change the dimensions. Next I want to come in and resize my content.
So I'll zoom in a bit so that you can see a bit better what I'm doing. I'm going to start by default by just selecting elements in resizing the. XD uses amazing intelligence with responsive resize, and in general letting it do what it wants to do is often a really good idea. What I'll do is come on in and select the header elements and grab the little control handle here and press and drag it to the larger size. For the most part XD's responsive resize did a really beautiful job. It by default didn't scale the items, but it kept them aligned left, center, and right. You'll notice that one of the guesses was not exactly right and that's for my little carrier signal strength here. What I want to do is give XD a little bit of help to let it know how to align that objec. For that, I'll come in and hit CMD- or CTRL-Z to undo that change. And I'm going to select the carrier icon and that signal strength icon, and I'm going to group them together by hitting CTRL- or CMD-g. Having done that I'll select the header set again and press and drag, and the elements work really well. Next thing I want to focus on is the image text and this little Play button towards the bottom. Before I do that I'm going to come in, I'm changing this layout enough that I don't want to really rely on the existing design that I have here.
I'll start from scratch once I have my design set. With that done, I'll come and zoom back in a bit here and I'm going to select my scroll bar and just move that off to the right. Next thing I want to do is focus on this group, which is an image. There's a label or text that's here. And then I've also got a play button. So I'll select that set and I'm going to move it to the upper left-hand corner of my design, and just come in to resize the content. Once again XD does a pretty good job, but there's a couple things I'd like to override or change. I want the text to scale as my object scales, and I want my play button to remain up higher towards the location. And of that text object. Once again, I'll hit CMD- or CTRL-z to undo the change and I'm going to come in and click on that title over here in the Properties Inspector. You'll notice we have a new section for responsive resize. If I were working on something like vector content, I could disable responsive resize so that the objects scales proportionately the way it used to before we implemented this feature. I also can come in and change auto mode to a manual mode where I have total control over how the resize behavior happens.
I can decide should the text scale if it's not fixed in height and width it will scale. I can also decide if it should align or be fixed in location to any of the corners of my group set. I'll go ahead and let it remain percentage-based. I'll come into my 'Play" button and in the manual settings here, I do want it to be fixed in height and width and I'll go ahead and let it also be percentage based as it scales. I'll now select the group, and press and drag and I'm getting a much closer representation to what I wanted. I'll grab my text object and just center that up a bit here. In fact, I'll move it up on the screen, and make some room here for some controls towards the bottom. As you can see, I've only begun to scratch the capabilities of the responsive resize feature.
I encourage you to try this new capability yourself.
Using Responsive Resize in Adobe XD, designing for multiple screen sizes and layouts is as simple as resizing an artboard. With Responsive Resize enabled on an artboard or group of elements, Adobe XD will intelligently resize the content while maintaining the position and scaling of objects as defined in the Responsive Resize constraints. When Responsive Resize is set to Auto, Adobe XD predicts how elements will adapt based on positioning relative to other content. In Manual mode, an object's positioning and scale can be controlled using the Responsive Resize constraints, allowing pinning of elements, as well as fixing the height and width so objects do not scale.
