3.6 Adobe XD Responsive Design
Welcome back to the course! In this lesson, you’ll learn how to create responsive layouts in Adobe XD. This is made easier thanks to a new feature called “responsive resize”.
Traditionally, to create responsive behavior in a design application, you would need to manually set constraints to objects so that when resized, they are repositioned and resized accordingly. This is very time-consuming.
XD will now carry out this process automatically for you. It will analyze the selected objects: how they’re grouped and how they’re positioned in relation to the parent. Then it will calculate which constraints to apply so that you get that responsive-like behavior automatically. Let’s see Adobe XD responsive design in action.
1.Introduction1 lesson, 01:20
2.The Basics of Working With Adobe XD4 lessons, 56:12
3.The Advanced Functionality of Adobe XD8 lessons, 1:13:40
4.Prototyping With Adobe XD2 lessons, 15:57
3.6 Adobe XD Responsive Design
Welcome back to the course. In this lesson, you'll learn how to create responsive layouts in Adobe XD. And this is totally doable thanks to a feature called responsive resize. Now, traditionally to achieve this responsive like behavior, you would need to manually set constraints to certain objects. So that when to the parent element of certain objects so that when that parent is resized, those objects are resized and repositioned accordingly. And this can be time consuming. Well XD will now do this automatically for you. It will analyze the selected objects, how they're grouped, how they're positioned, and will apply these constraints automatically for you so that you can achieve that responsive like behavior. So let's go ahead and see this in action. To demo this, I'm going to create a very very basic example. I'm gonna quickly mark up what can be a button. So let's properly align these, and let's group them up. And let's also give this a nice fill, and get rid of the border, and let's make this text white. Okay, so now you have a typical button, okay? So watch what happens when I resize this. See how the text always stays in the center and only the the background resizes? This is exactly what you want. And this is possible because I have a responsive resize On. So if I disabled this, you'll notice that when I resize this object, the text scales as well. And that's definitely something that we do not want. But when I'm enabling responsive resize, and I set it to Auto, everything works as it should. So let's analyze this a little bit and see exactly how it works. So if we go and select the text and we enable the Manual constraint. You'll see that this element has a fixed width and a fixed height. So that means when I resize its parent, which is this group, that text element doesn't change its size. It stays exactly the same. If we're gonna select the background here and we switch this to manual, you'll see that the constraints here now look different. It's fixed in all four directions, so that's a great use case for responsive resize on a simple element. But here we are talking about responsive layouts. So that means, that when I resize, for example this art board, I need to know how this button will behave. So what I'm gonna do is enable responsive resize on the actual art board. And you will see that when I resize it now the button kind of moves with it, but it doesn't change its size. Now I can change this behavior. So let's select this. We'll switch to manual constraints. And if I uncheck fixed width, you'll see that when I resize my art board, the button resizes with it. I can also affect its position. So I can say, okay fix left. So that means that when I resize the art board, the buttons parent element, the button is now fixed in this position. It kind of clings on to this left edge here because this is what I set in the constraints. And you can also see a pink line, you saw that? That's an indicator telling you that okay, we have a constraint to the left edge here of its parent element. I can also do this, fix right. So now when I resize the parent, Notice that the button stays in the same position relative to this right hand side edge. Same goes for top bottom. If I wanted to be fixed on the top, I would select this bit. So now, The button stays there. And notice the pink lines now show me the constraints for this element. Now let's look at a more practical example. Let's say that on this page I have a top bar, which I'm gonna illustrate with a simple rectangle that I'm gonna put right here. And just for the sake of the demo, let's give that a nice color and remove the border. Now inside this, I'm gonna add a piece of text here. This is for the logo. And I'm gonna add another piece of text here. This is for the menu items. And let's group all of this like so. So now, you'll notice that because I have responsive resize set automatically for me, XD is doing all the work. When I resize this bit, you will see that the logo stays in its place, the menu items kind of move with my artboard here. And the background resizes accordingly, and I can go the other way as well. Also, you'll see that when I resize the art board like this, That menu bar now stays in place, even if I resize it from the top. Because if we look at the constraints, it's now set to left to right, and to the top. And XD did this automatically for me. It calculated the position of the elements, how it's grouped, how these elements are positioned inside this main group, and it's automatically applied the correct constraints for me, which is fantastic. Now if at some point you decide that things are not resizing accordingly, you can always go in, you can select the elements that don't behave properly, you can switch to manual mode, and you can then edit the constraints here yourself. Also if for some reason you don't want our responsive resize to be applied temporarily, you can use shift and resize an element. And as you can see here this scales, but the responsive resize is temporarily disabled, okay? If I let go of shift and I resize this the same way, now it takes into consideration the constraints that are applied to the elements. So this is a very useful feature in XD because you might be designing a web page on a large art board like this. And then you would say, okay, well let's see how this will look like on mobile, right? So you would duplicate that, and if everything is set correctly, all you have to do is simply just resize it, and everything will fall into place nicely. Without this feature, It would be a process that looks something like this. So let's say that I'm disabling responsive resize. So I'm gonna select the art board, I'm gonna disable it here as well. So I'm gonna resize this, and then I've gotta select this bit, resize it as well. I've gotta bring in the menu items here. So it's a multi-step process without this option enabled. And if you have a big page, then you have to do these changes manually for every single element on that page. But with responsive resize it's just super super easy. Now with that said, you should know that this is not a magic solution to everything. For example, if you have let's say a grid layout, okay? And you're adding some some elements to these columns, let's say you have three elements here and you wanna create the mobile version. So on mobile version these elements will be stacked, okay? Well XD doesn't do that for you. So if you just resize it like this you'll see that these elements are kind of getting resized as well. So there are some things that responsive resize cannot do for you. In this instance I would have to make this a little bit bigger. And here is a great example of one constraints that wasn't applied correctly. So you saw when I resized this vertically, these elements are pushed down and I don't want that. So I'm gonna select them go to our Manual and I'm gonna set fixed top. So now when I resize this bit, they'll stay in their correct position. So now what you need to do is manually grab these and position them the in the way you see fit for mobile experience. And look, we also have a different problem here. Because of the way they were grouped, each of these elements has different constraints. So this one for example has top left, this one has top left and right, this one has top and right. So to fix this you would need to select each one individually and do it like so. And this one also has a fixed width just like the others. So now you can resize the art board correctly. So not a perfect solution, but a very good one nonetheless. Because it does save you a bunch of time on most layouts. And that's how we can create responsive layouts in Adobe XD. Now coming up in the next lesson we'll talk about Plugins. These are add-ons that extend the original functionality of XD. We'll see you in the next lesson.