From the course: Sketch Essential Training: The Basics

Adaptive layouts - Sketch Tutorial

From the course: Sketch Essential Training: The Basics

Start my 1-month free trial Buy for my team

Adaptive layouts

“

- [Instructor] Let's talk about adaptive layouts. At the end of this video, you'll be able to create layouts that change when they're resized. What happens if you want to change something based on its contents? What happens if you want things to behave dynamically, depending on what the contents are? I have two screens, here, they're going to contain exactly the same things, but they're going to behave differently. First, let's create a component out of the bike description. I'm going to select the price, the description, and the title and create a symbol. Here, I'm going to call it Card and it will have no layout. After I've created this, let's test it by changing the content. This is some new content. You can see that the size of the component remains unchanged. We can also test the Button text, here, by adding a new label. And, again, the content of the button remains unchanged. What happens if we change tactics and create a component with a layout? I've selected the same things, I'll choose Create Symbol and this time, for Card2, I'm going to add a top to bottom layout. Once I've created that, let's test what happens once I change the content. This is... You can see that the price has come closer to the single line that we have within the content. If I grow it to three lines, what's going to happen to the price at the bottom of... You can see that it changes, which is ideal for an interface where you might be pulling content from different sources. What can we do with the button? Let's create one that has a left to right layout. I'll set the corner radius at eight, the height at 56, and I won't worry about the width yet. If I take away that, change the fill, too much, then I'm going to add a bit of text. Let's check, it's 20. We now have 16 pixels on all sides. I'm going to create a new component, a new symbol, and this time I'm going to give it a left to right layout. Once I've created it, I'm going to add the same text, Add to basket, and you see that the size of the button grows in line with the size of the text. Now, adaptive layers don't only apply to components, you can apply them to a whole art board. What happens if I try to grow the size of this art board? Nothing, the art board just grows without the content. Now, within the Inspector, I can choose this function for the art board or just content on resize, which means that if I grow the art board, all of the elements within the art board change, in specific ways, for the kind of content they are. Let's undo that. What if, instead, I selected all the content and fixed the size only horizontally, so that it remained centered as I grew the art board? When I choose the art board and grow it this time, you'll see that the content remains centered because I've constrained it to a fixed size and a scale from center. Let's change the constraint again. I'll take away the fixed size, there, and I'm going to pin, instead, top left. When I grow the content this time, things grow, but you can see that they stay pinned to the left side of the screen. If I change that setting and pin them, instead, a different way, perhaps right and bottom, then what happens if I grow my art board? Is that things start to move around in an unpleasant way. So try to use the constraints and the adaptive layout to create components and layouts that resize based on the content that you have.

Contents