3.2 The “Responsive Resize” Function
The “responsive resize” function is Adobe’s newest addition to help the process of responsive design along in XD. However, it might not be quite what you think it is. In this video, we’ll cover when and how you should use “responsive resize” to best effect.
1.Introduction1 lesson, 00:49
2.Responsive Refresher2 lessons, 15:28
3.Responsive Design in Adobe XD7 lessons, 43:13
4.Breakpoint Artboards7 lessons, 25:05
5.Conclusion2 lessons, 08:05
3.2 The “Responsive Resize” Function
Hey, welcome back to Responsive Web Design in Adobe XD. In this we're gonna check out Adobe XD's responsive resize functionality. This is a tool that you can use to help you speed along the process of adapting new content from one artboard into the next size artboard. So let's take a quick look at what it does. So I'm just gonna draw just a regular square, then open the right side by here. You'll see that we have this responsive resize sections, and it's automatically turned on by default. So the first thing that you'll need to know, is if you wanna turn it off, just click that little toggle there to turn it off. So to show you what it actually does, I'm going to switch from automatic mode into manual mode. And in here you can see that what we have is basically a system of constraints. These constraints are pretty much the same as constraints that you would see in other software, if you've worked with constraints before, it's really not that different. So in a nutshell, you've got constraints that control how far the object is from the edges, so that's these ones here. And you've got constraints that control the width and height of the object. So, you have the ability to fix the width to a set width, or fix the height to a set height. So the easiest way to communicate what these actually do is gonna be to show you with some example shapes. So, here we go. For example, we've got here two objects that both have responsive resize activated on them. And now if I shrink down the parent here, you'll see that the object on the right stays on the right. Or if I shrink the other way, the object in the left stays in the left. So if we go into the responsive settings for each of these by hitting Manual, you can see here, this one is being told to maintain its position relative to the right-hand edge. And this one is being anchored on the left side.. Both of them have fixed width and height. And you'll also notice that these constraints were automatically applied. The object on the left was automatically told to anchor itself on the left, and vice versa with the object on the right. And that automatic application of constraints is what makes responsive resize different to constraints in other programs. In other programs, you need to manually apply constraints depending on what's appropriate for each object. But with responsive resize, XD will do its best to try to guess which constraints are appropriate for different elements. But sometimes it's actually gonna guess wrong, and when that happens you're going to need to turn off responsive resize. So just bear that in mind that if things are not responding how you expect them to, you might need to either go in and change these constraints, or turn off responsive resize all together. All right, we'll have a look at another couple of examples to show you more about how to work with responsive resize. I talked earlier about the fact that you want to have flexible columns wherever possible. And you can actually set up your artboards in XD, to simulate flexible columns, which is something we're going to go into more later. So I wanna show you how responsive resize operates in relation to having those flexible columns. So by default what we're looking at here simulates having a single column, so the dark rectangle inside a parent container. Now, when I resize this element, put responsive resize on, everything resizes quite well. So we've got basically the same as a flexible percentage based div in a website lab for example. Where it doesn't work so well, is if you wanna have true columns side by side. Now with responsive resize switched on, if I shrink things, you're gonna get this issue where the boxes are protruding outside their parent element. So if you wanna have a layout like this where you have two boxes inside or however many boxes inside, and you want them to stay flexible, you want them to retain the ability to be resized. Then you actually need to turn responsive resize off like I have here. With responsive resize off, then when you shrink the parent, you can see that the internal shapes are shrinking down as well. And with that, you can simulate having those fluid with columns. Another thing to consider when you're setting up for a fluid layout like this is, how the box is going to respond, if you resize the whole artboard. It's probably gonna be working towards is artboards, where everything inside them can respond when you shrink the artboard down. So right now if I turn on responsive resize on the artboard itself and shrink things down, so you can see that our little two-column layout Is shrinking down nicely, but that the amount of space on the left and right is also shrinking. So you can see here this amount of space is being preserved. That may be fine, depending on whatever you're wanting to do with your layout. You might want to have spacing that adjusts along with the size of the parent. But if you don't want that, then what you can do instead is turn on responsive resize on the element like I have up here. Go into manual, and turn everything off except for the anchors for the left and right side. So what that says is to preserve the amount of space that's on the right side and on the left side. So now if I resize the artboard, Now this container is shrinking down and its internal columns are shrinking down, but it's keeping the same size spacing at the outer edges. So that may be something that you wanna do when you're working through creating your artboards. Now, one of the things you might need to do as you're going along is to vertically shrink some of your elements. So you might need to vertically shrink elements like images, for example, so that you can maintain their aspect ratio as their width is going down in your design. So with this example here, I just have a rectangle with a little place holder image here. And at the moment if I resize this image, then the little thing that I have got inside is shrinking down as well. And that's gonna happen whenever you have any object that's nested inside the object that you're shrinking down, so that's with responsive resize switched off. This is an example of where having it switched on can be really helpful. So this example, I have responsive resize switched off. I'm just letting it automatically apply the constraints that it wants to apply. And now with this image, if I shrink it down, then the internal object is keeping it's size and shape. And then there is just one more thing that I wanted to show you, and that is that right now responsive resize doesn't work on the symbols. So this is just a couple of objects that I've converted into a symbol, so you can see these little symbol arc on here shows us that this is a symbol, not just a regular group. But if I try resizing the artboard now, you'll see that that symbol doesn't respond in any way at all. And it won't matter what I do on the symbol level, I can turn off responsive resize on that symbol. And then if I shrink the artboard it's still not gonna make any difference. So what you actually need to do is ungroup the symbol, so that you end up with the same shape, but no longer in a symbol. You do that by just right clicking and choosing ungroup symbol, and then when you resize the artboard, then that shape is gonna respond just like any other shape in your layout. So for the moment that is probably gonna slow you down a little bit. The whole point of symbols is that you can reuse them across multiple artboards. You are gonna have to regroup them for now, if you want to use responsive resize on them. But Adobe have said that in a future update, responsive resize is gonna work on symbols, so you'll just have to hold tight for a little while to get that functionality. All right, so when should you use responsive resize? So you should use it at the artboard level like we have here, so that you can shrink down an artboard and have all the content inside respond to it. Similarly to how when you resize a browser, you can have the content inside respond. You can also turn it on when you have an element that you don't want to change size when the parent changes size. And another great place to use it is when you have an element that you wanna anchor according to one of the edges. So you want it to keep it's position relative to one of the edges. And you wanna turn responsive resize off, when you want to simulate a fluid width column. All right, so that is the essentials of how responsive resize works. Now you know what we're doing as we use it throughout our output correction. And process and speaking of artboards, the next thing that we're gonna cover is how to use artboards in XD in the context of responsive design. So we're gonna step through that in the next lesson. I'll see you there.