Constraints Exercise

[00:00:00]
>> So your mission is to take this and this and make it behave like it should, right? So take about ten minutes, and then we will review it together. And if you want to, if you're kind of using the project file, this is currently hidden. If you need inspiration, if you need to cheat, you can go ahead and unhide this one and take a look at it, but then we'll implement it together in a few minutes and learn all about constraints.

[00:00:36]
All right, so our mission was to make this actually behave like a responsive webpage, and then also we had a second little exercise down there as well. So let's go ahead and try out all these cuz I think it's one of those things where the first time you do it, it's not super intuitive, but then if you do it enough, you kind of get the muscle memory, you just click around on a few things, set a few things, and you're good to go.

[00:01:00]
So you can follow along and watch me as I show off the muscle memory that I have accidentally earned over the years. Okay, so looking at this we've got, these will eventually be little fake Instagram posts. But let's start with the navbars first, right? So go ahead and write by default left and top.

[00:01:24]
So in this case I want these left and right. And we do actually want the top nav to stick to the top, regardless of what we do to the frame, and this will work even if I stretch it up. I was stretching that. Let's grab the actual frame, right?

[00:01:41]
The top stuff will actually, now my bottom bar is following it, but anything to the top will fall even when we stretch it up to the top. Cool, so let's do the bottom. That's the same idea of left and right. And we make the constraint at the bottom, right?

[00:01:55]
And now if I grab the overall frame, right, we're getting there. But things fall apart a little bit with these posts if I do this. So in this case, I got two options here. I could choose to scale them. Let's see what that looks like. And then if we don't like that we'll try something else, so it will scale.

[00:02:17]
It's not gonna work but That could be what I want depending on the effect that you're going for, right? It's stretching them out, but it's not necessarily making them, keeping the proportion, which is probably not the experience that we're used to maybe for a paragraph or something along those lines.

[00:02:38]
But for an image is probably not what I want. So we can go ahead and instead of scale, let's see what the difference is. Well, I can scale them both, right? That's also probably gonna be a little, it all depends on the effect you're going for, honestly. But that'll give me this, which again, maybe, and then the difference here where we say actually keep them towards the top, right, cuz they're not necessarily supposed to stretch even if the viewport becomes taller, right?

[00:03:07]
That's not usually how the web works. And then we'll kinda keep them, let's do a center in this case, right? And that's maybe what we might normally see maybe there'd be some responsive breakpoints that would go into two columns at one point, and if we did left and right it's gonna be very similar to the scale on this case, right?

[00:03:29]
But I think for the effect that we want, let's go with center. Cool, that feels like a very rudimentary web app. Awesome, and with this one, let's see. There's a few more pieces involved, but let's see how it breaks when I grab the overall frame. Nothing moves, and in a lot of ways, this is not dissimilar from what we had earlier.

[00:04:02]
So we'll grab this top piece again, this will, we will actually want the overall header in this case. So do that to left and right. Now we've got two pieces down here. So we'll go ahead and we'll actually say that this will stay to the bottom, and I think we want both of them at the bottom.

[00:04:25]
And that'll get us almost there, you'll see obviously the image is not set up for this yet. Okay, interesting, I need to take both, at least the middle nav with the bookmark and make that left and right as well. So let's go ahead and we'll do that. Okay, now we gotta deal with the image.

[00:04:50]
So with this one scale is again not gonna do necessarily what I want, but let's do it anyway to see. The problem with scale is it will scale literally and get all kind of distorted as well. So in this case, let's actually do left and right, and top and bottom.

[00:05:21]
And now it kind of keeps its dimensions a little bit better. You can see that it will fill the space rather than getting distorted as well. And that feels kind of a nice responsive component that we can kind of put into design and have it actually react appropriately.

[00:05:37]
Now that was inside of a frame then you can theoretically take the overall, eventually we'll get to the point where these are then components all the way down, right? We've got constraints on each individual piece of UI. We've got their place in the container, each piece, so as we go ahead and figure out all of the different breakpoints, because the one thing that I have learned the hard way particularly when working on implementing Figma designs as a developer is a lot of times you'll get the designs and they have 375 as your mobile viewport, either 640 or 768 for tablet, so on and so forth.

[00:06:16]
And you'll get the designs, and each one of those breakpoints looks great. You know it doesn't look right anywhere in the middle of any of those breakpoints, right? And so the ability to kind of test that out in the design versus the kind of back and forth of, okay, I did the breakpoints, and then it's very easy once you've implemented in code to take your browser, I understand that Chrome has those various response modes.

[00:06:41]
But we all know that the first thing anyone does when they see a new web page being implement is they take the browser window and do that repeatedly with it and change the width of the window. And that is sometimes how I end up developing to, what I'm actually writing the code, yeah, I'll stay in those different viewports.

[00:06:57]
But a lot of times you'll see all the various little intermediary phases where things overlap, the contrast isn't there so on and so forth, so getting this set up in your designs becomes super powerful.