By Dani Beaumont
Towards the end of last year, Adobe XD delivered Responsive Resize -— the ability to resize groups of elements for a variety of layouts. Now this features pretty fantastic, but it was incompatible with symbols or the ability to create multiple copies of content that can be easily updated in bulk.
With the latest release of Adobe XD, We've replaced symbols with components and components and responsive resize work beautifully together. Let me show you these two features in action.
I'm working on a design here, and I have here what's known as a banner ad or an advertisement that needs to appear in everything from a mobile device to a tablet and a desktop browser. It consists of pretty much all the same elements, but for each screen, I want to move the objects around and resize them so that it fits that screen more appropriately.
I've already gone in and done it for tablet and desktop, but let me show you how I did that. I'm going to come here to the first instance, which is the phone layout, and I want to just duplicate it.
When I select it, you'll notice that this is a component. It's a master component, and I can see that based on the triangle there on the left-hand side. I'm going to come on in and press and drag a second instance to duplicate it and I'll go in and give it a name just to remember what I'm doing here. I'll call it "Tablet". Now with that set, I want to resize the objects.
By default, responsive resize is not set to on at an artboard level. All of the content within the artboard is set to on, but the artboard is not. So, with this artboard selected, I'm going to come here to the Properties Inspector, and in the Responsive Resize area I'm going to toggle that to the on state.
Responsive Resize has an inherent intelligence that allows it to analyze a group of objects, and as I resize it, make some really good guesses about that resize behavior. I'm going to let responsive resize go ahead and do its thing, and I'm going to come here to the objects and just press and drag the group to resize it. Now for the most part things are working pretty well. The image is resizing nicely, the button there to the lower left-hand corner is staying fixed to that lower left-hand corner and it's not scaling. I hate when buttons are scaled; I like them to all stay the same size.
Unfortunately the travel logo is kind of traveling off to the right hand side a little bit and that's because it's probably set to something known as percentage based layout. It's not fixed to the left-hand side. In the words "the world awaits your arrival" is kind of traveling down as I grow the container, so it's probably also set to percentage-based layout.
The really nice part about responsive resize and components together is I don't have to undo and revert to my earlier state to make changes to what's just happened. Here I can come to my master component and change the responsive resize attributes for each item within the group and see those changes live in the instance here on the right-hand side.
So to do that, I'm going to come back to my master element — this guy right here — and I'm going to click in to select the individual objects. So I'll go to the travel logo first and click to select it. In the right-hand side here in the Properties Inspector, I can see the automatic attributes that were we're set for this object, and I can manually override them. So it's set to be fixed in distance from the top of the group, but not fixed on the left-hand side.
I'm going to come here and toggle that on and notice that the instance on the right-hand side automatically updates based on the change that I made to the master. I'm going to do the same thing for this little tagline "The world awaits your arrival".
I'll select it and I'm going to pin it not only to the left-hand side but to the top of the group as well, so that it moves up nicely. From here, I can come in and make my additional customizations.
So I like this text here. I'll come in and select it, but I'd like it to be much larger. So I'm going to move it over a bit and just drag to resize it. I'll change out the letting a little bit too about let's say 75 and move it over. I'm going to go ahead and move the button out of the way. So I'll bring that to the right-hand side and get my little tagline here lined up in relationship to it. And lastly, I'll come in to the travel logo, and I'm going to just resize it. All right much better. I've really quickly gone in and resize these objects. I can always go back to that master version change the image, change the font, change the color of the button — all of those abilities to override instances or retained — even when I apply the responsive resize feature set to that instance.
Okay, well, once again, this is just a very quick preview at two terrific features that come together beautifully in the latest release of Adobe XD. I encourage you to give it a try.
The responsive resize feature in Adobe XD offers the power to rapidly conceive, design, and test across multiple devices without having to rebuild each component from scratch or adjust every element individually. When you add components into the mix, it’s easier to update your designs to fit a wide range of different surfaces.
