FREELessons: 19Length: 2.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.8 Layer Resizing and Constraints

I’m sure that by now the concept of responsive web design is very familiar to you. Responsive web design focuses on creating layouts that adapt to whatever devices they’re being displayed on.

Sketch actually has some useful features that will help with this, so in this lesson we’ll talk about resizing layers and layer constraints.

2.8 Layer Resizing and Constraints

I'm sure that by now, the concept of responsive web design is very familiar. It basically boils down to how layouts adapt to the various devices there, being displayed on. Now, sketch actually has some very useful features that will help us with this. So in this lesson, we're gonna talk about layer resizing and layer constraints. So let's begin. To kick things off, I'm gonna create a simple button. All right? So I have a rectangle here. Let's make this a little bit bigger. And let's put a text inside it and let's increase the font size a little bit. So align it to the center, group this up, and now we have a button. Now, let's say that we want to resize this button. So we'll select it, and let's say we wanna make it smaller. Well, look what happens. The button background does get smaller, but the text gets smaller as well, but it goes on multiple lines right now. And that's not something we wanna do. What we want is ideally keep this text in the center of my button here without resizing it. So how can we do that? Well, we gotta go inside the group, we have to select the text. And we have to pay attention to this section here where it says resizing. So here we have a couple of controls. We have what it's called pin to edge. And this basically means I can pin an object to a specific edge when we resizing the parent. So in this case, if I'm gonna resize my button this way, notice that my text stays in the middle. But if I'm gonna select it and I'm gonna pin it to the top, and I'm gonna do that resizing again. Notice that now, my text stays pinned to the top and I can resize it from both directions. And it's gonna do the same thing. Same goes if I'm gonna pin it to the bottom. Resize the parent and now the text stays at the bottom. And this is the same thing for when we wanna pin it to an edge, like left or right. It's gonna have the exact same behavior. And you can even see a preview of what that will look like here. But coming back to our problem, how do we keep this in the middle and not resize it? How do we keep the text the same size and in the middle? Well, we have to go here where it says fixed size for now. This line in blue tells us that the fixed size it's set vertically so its height it's fixed. Notice that when I'm resizing this, the height of the text box stays the same. Now to keep the width's fixed size, all I have to do is check this bit, the horizontal line. Make it blue so now, My text box stays the exact same width. Now, these, what I just showed you here are called layer constraints. And so you can add certain constraints to layers to affect their behavior when their parent is being resized. And there are tons of uses for this kinda behavior. For example, let's say that we have a typical header, right? And I'm just gonna quickly design something here. And I'm gonna put a text here that says logo and I'm gonna put some menu items. Okay, so let's group these up. And let's put this right there. Now let's group these up. And now, look at what happens when I resize my desktop. Well ideally, we would want this header to expand its width or contract its width along side my parental which is my outboard, so the way to achieve that is to select my rectangle. And I can say, pin to this edge, pin to this edge, and then I can select my group and do the same thing. Pin to this edge and pin to this edge. So now when I resize my desktop, My background resizes as well, now to fix the logo, make sure you check that and select fixed size here and also pin to the edge here and pinned to the top. So now if I resize my header, the logo stays in the correct place. We'll do the same for the menu items, we'll pin them to the right side this time and also to the top. And also, these will have a fixed size. So now when I resize my desktop, Notice that all the items stay where they should. The same goes for this. We still have a problem. We need to keep a fixed height on my rectangle here. And also let's select the fixed height on my main group. So now, let's say we still have a problem there. We have to pin this main group to my desktop, to the top. So now, it stays exactly where it should. So this is a very helpful for when creating responsive layouts, because you can quickly resize some art boards. And if you're doing the layer constraints properly, the elements will move by themselves to their correct position. You don't have to go into each art board and select each layer, and move it independently. It all happens automatically using layer constraints. Now the title of this lesson is also layer resizing. So let's quickly talk a little bit about that. You already saw me using or resizing layers. It's really simple. Let's say this is a layer, right? The way to resize it is to grab any of these handles, either on the sides or on the corners and drag them to their new dimensions. You can hold down shift, to scale them proportionally, or to resize them proportionally. Or you can use the width and height properties from the inspector here on the right side. Now, this lock here will basically make sure that's the dimensions are proportional, see? So when I'm changing the width here, the height changes automatically, but when I have this unchecked, The height can change independently from the width. Now what's interesting about this inspector, is that you can manually type the values but you can also use some keywords to scale an element in different directions. For example, if I were to change the width here to 500, this will scale from the left side, right? But if I were to say 400 R, it's gonna scale from the right side, so the R, stands for the right side. Also if I change the height, let's say to 400, this will change by default, it will scale from the top. But I can say for example, 300 B for bottom, and it's gonna scale from the bottom. So if I wanna take 50 pixels off its height, but from this top part here I can say minus 50. Or actually was 300 minus 50 bottom, right? So it's gonna take 50 pixels, but referencing the bottom part. And it can also scale from the center or the middle, right? So we can say 400, Or let's say 300 C for center. So this is gonna remove or scale from each side, left and right. Or you can say for example, 200 middle, and it's gonna scale from the top and bottom. So that's pretty cool. Now, to wrap this up, I wanna quickly show you the difference between scaling and resizing. Because what we did here, this right here is called scale. All right? But we also, excuse me, it's called resizing. But we also have a scale option right here. So there is one big difference. The resize will only affect the width and the height of an element. The scale will also affect its stylistic elements, like stroke. So to give you an example, I will make this Border a little bit higher so we can see it, let's say about 10 pixels, okay? So I'm gonna duplicate this. So I'm gonna resize this using the handles. To about this big, but then we're gonna select the same element and I'm going to scale it until it's width is 331. So scale 331 and hit okay. So these actually have the same height. The only difference is, by using scale we also affected this stroke, or the border width. See, now it's 22.52 width while this one stayed at the original 10 pixels. So that's the main difference between resize and scale. Scale will also resize a layer's property. And that means corner radius, border thickness, shadow size, even, and it's gonna do that automatically. All right, and that concludes this chapter about sketch fundamentals. But we're not done yet because sketch is a very complex piece of software, so starting in the next lesson, we're gonna learn about shared styles which is one of the key features in this app, and a huge time saver. So I will see you in the next lesson.

Back to the top