Responsive Components with Auto Layout

[00:00:00]
>> The next kind of newer feature in Figma then takes this with one or two additional features. We're gonna take the idea of auto layouts, we're gonna take the idea of min and max width, and then we're gonna take kind of a new layout feature which is this like equivalent deflects wrap, right?

[00:00:14]
That's gonna give us some additional abilities to create responsive components. But we use in our design, so let's take a look and jump into that. So I'm gonna do this Tarantino style where I'm going to show you the ending first, we're gonna see how we got there. What we want to build is a component kind of like this, you're like, yeah, cool, it's a card, I've seen a card before leave me alone.

[00:00:40]
But wait, there's more, I expand it, okay. You're like, whatever, man, haven't you shown me like six of these? Look at that at a certain viewpoint with it changes the layout, right? And you can see that we've got this it's bottom section here that kind of stays consistent, we've got kind of text that kind of reflows.

[00:01:07]
And then at a certain point, our responsive design breakpoint hits, right? And we can have it in different shapes, and I think it's got a max width of 1920 cuz I got carried away. But maybe it should be less than that, but it's got a min width, it's got a max width but it does kind of reshape and respond as you can put in different viewports.

[00:01:24]
And this is again super great because like the ability to use one component multiple places in a design means that you will have consistency when you go to implement it, right? It's one of those things that like anyone working in a design, having one component they can use across different view ports and have it be responsive, makes their life easier.

[00:01:47]
And then for you as the developer, makes your life easier too. So I can keep, I joked with windows before, when you're checking in responsive design, you just do this over and over, over again, I can keep doing this or we can look at how to. Should we look at it in a minute, we should look at it in a minute.

[00:02:03]
Okay, so I've got all of the component pieces and parts, and I'll give you a spoiler alert now, you're gonna do it when I'm done, so pay attention. [LAUGH] Or you can just ignore me, whatever. So we've got all of the pieces and we wanna figure out, how do we actually implement that design that I just made bigger and smaller repeatedly while I was talking.

[00:02:27]
Cool so let's go ahead and let's try it out. So this is a section so I can't turn it into an auto layout if I wanted to, so let's go ahead and kind of like give ourselves a little workspace over here. So we've got, let's actually draw ourselves a new frame.

[00:02:46]
Doesn't really matter. We'll go ahead and we'll drag the image in, we'll start out by making that an auto layout frame. Now, at first I don't need that much padding Let's give it like, I don't know 16 feels good. So at this point, it's hugging the contents, instead of that we're actually going to say, fill the container, which makes us now a fixed width.

[00:03:17]
Cool, so now you can see we'll at least expand to a certain point. And then this actually has a min and a max width, because as I was undoing design, like they vanish when they leave an auto frame, auto layout frame, so I forgot to take that off.

[00:03:38]
[LAUGH] Right, and now they're back that they're in here. So spoiler alert, we can set a min width to 268, a max width to 640, right? For the frame itself, again, I just, through implementing design after design after design. I always think about 375, which is like iPhone SE, which is usually the smallest viewport that I tend to have to implement for.

[00:04:07]
Let's give this auto frame a min width of 375, which means we'll never hit the lower bound of this image, so you can could raise it, it also doesn't matter, right? Cuz the parent can't get any smaller than 375, which means the image will never hit that 268 min, but it doesn't really matter.

[00:04:27]
But it can get bigger, and you could choose that I should have a max width at some point, like in the exam one I had 1920 because that's usually the largest design that I get. But like one would argue for a card like this Because you should have columns at some point, right?

[00:04:41]
But that's an implementation detail. Cool, so we've got that in place, so now let's drag in some of the other parts, right? That's going great, right? So we can drag in this scan even better. So clearly, we can turn off clip contents for a moment here so I can see everything.

[00:05:07]
Okay, so one thing we can pretty much figure out is that you've got some amount of a flex direction. Now we are gonna change this to a wrap in a second, but we do know that these are almost in every iteration of this stacked on top of each other, right?

[00:05:21]
And so these two become a frame that then get an auto layout where we'll have it become vertical. Now clearly that does not solve all of my problems for me, but it gets me Be part of the way there. So then the trick now is we turn on this wrap setting, right?

[00:05:43]
And, look, we're starting to get a sense of that card. Now we do need to change the height to hug contents, and we're starting to get the beginnings of this here. And so it will wrap now, the interesting part here is that the image has a max width, right?

[00:06:04]
So it is set to fill container, but at a certain point, it stops obeying that fill container rule cuz its max width takes precedence, right? So it'll keep growing, it'll keep growing, it'll keep growing, and then it'll stop. Right, cuz it'll have hit that max width, which then kind of gets us to this mode here, right?

[00:06:27]
So that's how you create that kind of like flipping effect here, the other thing you'll notice about wrap is that before we had one gap between, now we have two. We have one for the kind of, the gap between rows and another for the gap between the columns, we've got a vertical gap and a, horizontal gap.

[00:06:50]
So you could theoretically we could say that that's 16. If I wanted more space in this mode, I can say this is 32. Doesn't seem to be much of a difference, but cool, this we wanna say, this is also gonna be fill container, this probably needs a min width as well.

[00:07:25]
So I could say 3 75, I said these are 16, so I could say 375- 32 These will also fill up their container. Because it's, again, it's a nested auto layout, cool. And we'll actually have this one, hug the height and we'll have this one hug that's hugging.

[00:08:01]
I need that smaller one. All right, so we start to get that effect, cuz at one point they each have their minimums that they need to be. So at one point they can't both fit in there, so it flips over and wraps And then we've got that bottom bar there, which as you can imagine is just another auto layout, there we go.

[00:08:30]
Cool, so let's see what we do here, what I'll probably choose to do here is kind of start to lay them out like this. Because I know that these are like kind of one component this would be a div of some sort in HTML. Like when in doubt, you're like, I don't know where to make the frames and what to do.

[00:08:48]
Just look at it like you would look at a React component or HTML or whatever, right? That same intuitive sense that you have for implementing it and code, gives you a competitive advantage when it comes to implementing these designs, right? So we'll give that an auto layer of frame, and then we've got that date.

[00:09:17]
We can kind of give that Wrap it in a frame, make it an auto layout as well. Okay, so in this point what we wanna do is let's just tweak this a little bit, horizontally center it, let it be auto. Cool. So we've got all of that in place now, and then I'll probably wrap this all one more time in a frame and make that an auto layout.

[00:10:00]
Right? So we've got that. We don't necessarily need all that space. A little bit more of that. Yeah, sure make it eight. Cool. We'll give this whole thing a fill of white. We'll give this earlier whether we made And finally, surrounded corners because why not? I meant to do that for the whole thing.

[00:10:47]
Cool as I get a little bit. That's when I should doesn't need the padding anymore and looks like we've got Then something similar to what we had before. And again now this is totally responsive I can put it you know in a more if I put this give it a min min width to on this frame here.

[00:11:21]
So now I can put this in a mobile layout, it'll look right, I can drag the same component into the desktop layout. It will look, there's some little teensy tweaks that I need to do, like that and stuff like that. And you can dial it in exactly the way you want it, but generally speaking, like we've got the general.

[00:11:43]
Yeah, probably a little bit of men gaps here to tweak but we've got the idea of the wrapped component that we can use across all these different implementations. And this means that things will be consistent, it also makes the job of the designer once they have this in place a lot easier.

[00:11:57]
Cuz now I can tell sometimes I get designs where it's like you bespoke made five different views are, right? As an engineer that hurts me, right? Cuz if I bespoke wrote the same code over and over and over again instead of writing a function, it's the same basic idea.

[00:12:13]
We don't code up five different viewports, we tend to implement breakpoints in CSS, and the same idea works here as well.