The XD team trained an algorithm using thousands of real files, to help designers resize groups responsively. Turn Responsive Resize on and off via the Property Inspector, and resize groups or artboards. XD will do 90% of the work, and you can fine-tune the behavior by applying constraints manually.
- [Instructor] One of the biggest challenges for designers today is resizing elements. So let's say you have your mobile design and you need to change it to a tablet design or website design there's a lot of moving around. You have to move elements, you have to resize elements. If you're using Photoshop you have to spend a lot of time manipulating pixels. If you're using other tools it helps a little bit, but you have to spend a lot of time setting constraints up for it. And that's a very painful process. So over a year ago we decided to do a better job.
So what we created is an algorithm that's trained by hundreds of real files and at every iteration we're improving its capabilities. So let's see that in action. So here I have a mobile design, the status bar, just a set of groups and rectangle here, some elements, some vectors. In order to go from this size to this size, the normal process would be copying, pasting, and if you use the old default behavior, this would just distort everything.
It's gonna be a mess. So when the algorithm is running and that's the default behavior, and you can see it is running by looking at the property inspector, as soon as I select a group I can see the responsive resize is on. And then I just resize it. So XD will look for groups, it will look for positions, and you help you with that. So let's see another example here. This is a card that let's say it needs to grow, right? And if I select this group and I click there it's already on.
I can see XD does a good job. But XD will do 80% of the job. For the last 20% you can go inside and define some constraints. But you don't have to spend everything. So, let's learn how to do that. So what I want here as I make this change I want this 1600 to stay fixed to the left. So what I can do is I can double click to enter this group, and I can go to the property inspector and say that instead of auto we're gonna do it manually, and that guy needs to stay fixed to the left.
So again, I'm helping the algorithm here. And now you do all the rest for me. Moving forward, let's say I have this tablet design, and now I need to create a mobile version. And look how many elements I have here. I have a lot of different elements. I can copy, paste to create the mobile version. Then I will position. And because responsive resize is running I just resize it. And look at that. It's gonna do a great job there. I'm gonna center a little bit, and I can even enter to make this a little bit narrower and also this one.
So with six clicks I was able to go from that entire design to a mobile version very, very easily. So here's the calculator example. Imagine if I had to define constraints as I have to do in other tools today to every single dax here or number here, right? In XD I can do it because responsive resize in this special algorithm will help you get there. Moving forward, let's say I have this mobile form and now I need to do a tablet version of it.
I would duplicate this. And you saw before that anytime you have a group selected responsive resize is on by default. You can turn it off if you want. But if you look at the artboard level, the default behavior is off. So if I resize this I can just play with the artboard. If I want the artboard to be responsive as well I have to select the artboard by clicking on its title, and then I click that to activate it. Then I just resize. And again I still do 80% of the job, and I can go inside, and this is a mix of rectangle and text, and XD is doing all the work for you as you resize.
A little bit more here, let's say we're using that design that we're doing throughout this entire course. I'll go from mobile to a tablet version, a wider version, and I'm gonna select the artboard. Responsive resize is on. And one thing that I'd like to highlight here is that this guy is repeat grid. So technically I don't want this card to grow horizontally and be too wide. I want to work almost like Pinterest and other apps that have columns.
So as I resize this XD will do that work for you. But I spot a problem right there. This label should stay there, linked to the symbols. It's moving. So how can we help XD get there? So I'm gonna click on the two elements and then I'm gonna group them, command g on the Mac, control g on Windows. Same thing here, I'll group them. Now that they are grouped I just resize, and XD will do the magic for you.
So it can make things grow. And the last thing is if you have, let's say, a web design and you wanna go from website to tablet, again, you just select that artboard as a whole. And you resize, and XD will do 80% of the job, maybe 100% of the job in some cases, to help you there. Even the image is adapting to help you there. So this is responsive resize in XD. So now you can go ahead and resize your websites, your mobile designs, very easily with the help of responsive resize.
- Understanding all tools in Design mode
- Bringing files for Photoshop, Illustrator, and Sketch
- Working with text, vectors, image fills, and masks
- Repeating elements with the powerful Repeat Grid tool
- Resizing multiple elements with responsive resize
- Using the new Assets panel to manage symbols, colors, and character styles
- Sharing symbols across files, with text and image overrides
- Creating and consuming bitmaps and vectors from CC Libraries
- Extending the power of XD using great plugins