Nested Auto Layouts

[00:00:00]
>> So we alluded to nested auto layouts in our riff during auto layout part one, but let's kind of take a little bit of a deeper dive and do it in our nest. So I've got spare parts of two different ideas here. One is a nav bar, and the other one is what looks like those components that we're playing around with when we're doing constraints and layout grids.

[00:00:28]
Except with those, there's a little bit of work already done, there was some auto layout in place. With these, this is just literally all of the spare pieces laying around, and it's on us to kind of re-put it back together. So the plan action here is I'm going to kinda show you the process of using nested auto layouts to kind of recreate the photogram, which apparently was not taken, post, and then you can take it for a spin by creating a navigation bar or something along those lines.

[00:01:02]
And so there's some pieces laying around if you try out with that. But with that, there are a bunch of kind of nested auto layout components that we need to think about. So before we just start going and throwing it all together, let's talk about a plan of attack.

[00:01:19]
They are at least somewhat like, when I left the spare parts around, I did at least arranged them in an order that looked somewhat like what I intend to build. So we kind of pieces out kinda like the same way we would if we looked at a design and thought about the DOM elements or React components or a Svelte components or what have you components.

[00:01:42]
We've kinda got this top bar, right, but these two are kind of nested and related to each other. So I'm thinking right here this is one auto layout frame, right, that exists inside of one that has the full top bar of the image. We can argue whether or not the image itself is one.

[00:02:02]
Then we get down here and we have a very similar concept to what we saw before where we got three things that we wanna be able to slot a new one in or remove one. And so this feels like a little auto layout piece here as well that exists in a longer bar.

[00:02:17]
And then probably something similar here inside of the card itself, right, which is vertical as these things stacked together. I wish that was a picture of a hamburger, that would better illustrate my point, but that's not how stock art works. I'll also show you how to kinda generate sample content in a little bit as well as a little side quest, maybe when we have completed this piece.

[00:02:48]
But with that, we can start to assemble the various pieces. So we'll grab all of this and let's take it out of that section, just we can kinda see what we have and have not used. I left my very important screen name behind. Okay, so this is how I would probably go about this.

[00:03:11]
And I don't always end up with a situation where I'm starting with all the various pieces, but a lot of times, I do. In this case we can kinda start to select various parts and put them together, right? So we know that this is effectively one auto layout piece.

[00:03:26]
I'll usually start with the smallest ones and work my way out. So I can grab these two, I can just hit Shift+A, which both puts them in a frame together and also makes that an auto layout frame. And so we can call this one, Frame 1 is fine in context, but let me tell you how the story ends.

[00:03:46]
You've got to design with a bunch of Frame 1, frame this, frame that, and you can't make sense of anything. So we'll call this one User. I don't know. You know what's harder than live coding and live designing? Live naming things in front of people. All right, in here, it's got a space of 32.

[00:04:05]
That feels like a bit much. Let's try 8. And then we want to align it in the center so that we got the text aligned up with the avatar. I mean, so far so good, now that exists in context with this piece here. Now, you could argue should I make this an auto layout frame?

[00:04:31]
On one hand, you can argue no, because it's one thing, what are you doing, right? You could also argue future you might put future things in there. That's the engineer in your head talking, and you can listen to it or not listen to it. I don't really care.

[00:04:44]
We're gonna skip it just in the sake of like, I know that we will not be iterating on this forever. But if it was a design that you plan on using for a longer time, you could choose to look, he's gonna do it anyway. Make that a frame as well with the same kind of rules.

[00:04:58]
We'll make that right aligned in the center. We'll keep the value in there. We'll look at variables in a little bit. That'll show you how to use one valuable multiple places, so if you knew how to change the consistent icon spacing across your entire app, you can do that.

[00:05:16]
But we're not there yet. So we've got that in place, that's a row, it's aligned. We're given at this point no padding, I can choose to change that later. But at this moment that feels right. And now we can grab these two things together. And again, that becomes an auto layout frame.

[00:05:37]
And what's kinda nice is that I've mostly figured out what to do in this case. So we've got this frame, again, it's called Frame 1. Cool, and that actually made my vector a auto layout frame, which is not what I want. All right, so we'll go ahead and turn that back.

[00:05:58]
We'll wrap this one in a frame. So I'm gonna hit Command+Option+G. And now that's inside of a frame. And we can make that an auto layout. So now I can theoretically throw more things in there as well with the 8. That way, before each and every one of my street tacos was element inside of that frame that had the vector in it.

[00:06:18]
And that's not what I wanted. Cool, every time I just tried to make a ad hoc decision, I always regret it. So I'll hit Shift+A again. And now we've got these two together. And so you can see inside Frame 2, we've got the user, and we've got the frame.

[00:06:35]
Now things I hate about this, it looks fine, but that's because it assumed that since they were 211 pixels apart, that I want a gap of 211 between each and everything. I do not want a gap of 211 between each and everything. What I want is it to be auto.

[00:06:54]
So go ahead and we'll make that auto, which makes it fixed width instead of hugged, and then we will center it, right? And you can see that the iconography changes a little bit and some of them all collapsed together with a gap. They are literally spread out. So there's effectively a space between here as well in terms of the way they're justified.

[00:07:15]
Cool, cool, cool. And we'll say More Options. I don't know what to call this. Cool, so we've got that in place and then we can do something similar down here as well. So we'll grab these three and we will add them into an auto layout frame. Yeah, let's call that, Nope, I grabbed, let's actually wrap them in a frame together.

[00:07:41]
So Command+Option+G for me, or you can just literally choose to right-click the three of them, wrap them in a frame. But I'm learning that the just Shift+A on a vector will then, it tries to be a little too smart. Cool, so we've got that in place. We'll call this one Sharing Options, or social engagement, whatever you want.

[00:08:02]
Because it's comment sharing, I don't know. And, again, we'll wrap that in a frame, so we can do the same thing we did with those three tacos up there as well. Cool, and so we can grab all of these as well. And those are now in an auto layout.

[00:08:21]
All right, I need to wrap these on frames. That works with text and it does not work as well. So now it's in a frame that we've added auto layout to. Cool, and again, we have the same problems we had before. So we'll say auto, and now you can see that kinda space that is been added in there as well.

[00:08:41]
There's no text, don't make it seem that they're not aligned, because they're all icons that happen to be the same size. But future me is going to wanna make sure that they're aligned center. All right, finally we got this one, and you can be like, this doesn't need to be one.

[00:08:56]
I'm gonna argue that it should be one, for reasons I'll show you in a second. So say likes, this will be engagement. That sounds like a businessey term, right? Awesome, and so we've got all of these pieces involved here, but now we need the kind of larger piece as well, so I can select all of them.

[00:09:18]
Certainly look like a card. Command+Option+G to wrap it in a frame, and we'll say Photo Card. And now we add an auto layout to that. Cool, and so now that has assumed that we want to go, it assumes that we wanna have 24. We're gonna go 0. We can kind of adjust some stuff.

[00:09:44]
I don't know that if I want the padding in between each or not, but I can notice some things that are already annoying me. If I biggerize this a little bit, you can see that that's definitely not doing what I want in this case. So we'll go ahead here, and Instead of this having a fixed width, we'll go ahead and have it fill the container, right?

[00:10:06]
That's kinda like having a constraint, but less about being attached to both sides and more about just take up as much space as possible. If we put a second thing in this row or something along those lines, it would then share it, kinda like divs in a flexbox.

[00:10:21]
Here as well, we can do that. Awesome, and then we'll do it here, too. And what I'll do is if I wanted the likes on this side, now I can kinda do some interesting justification options. That's why I chose to put this text in a flexbox because then I can choose, do I want it left justified, center justified, or towards the end there, right?

[00:10:47]
Cool, so we'll have that in place as well. And then this is currently the fixed height, but really, if we double click on the bottom here, we can actually make it hug the contents, right? But let's see. Now, what do we do about this image? You cannot use constraints at all in an auto layout frame.

[00:11:13]
So you cannot mix and match. You choose one path. You can have an auto layout frame inside of a regular one that has constraints, totally. But I can't necessarily bind it to the size of the constraints cuz you'll see that, again, in the classic Figma fashion, it's just gone, right?

[00:11:31]
I happen to know that you cannot use constraints in auto layout but if you didn't, you think you're going slowly insane. So go ahead and we'll make that an auto layout frame, too. And this point, we are also going to fill the container. And let's actually fill it this way, too, so that if we choose to grow and shrink this, not dissimilar from what I had with constraints, right?

[00:11:59]
Now, then becomes a question of how do I wanna deal with padding. I have two options, honestly. And I don't really have strong opinions, so maybe if someone wants to vote for one, we can do whichever one. I can add padding, I mean, I already know which one I want cuz one's easier than the other.

[00:12:14]
I can add padding to each of these components here that I want to have some amount of padding, or I just put a gap and space in between each of them. Do we have strong opinions? Which one do we wanna do? Cuz I'm gonna do the easier one on the list.

[00:12:28]
>> Gap.
>> Gap, all right, and if I regret it, we'll change it. So let's go ahead and give that gap of, let's start with 8. Looks pretty good. Here's an interesting one. So now if I do the horizontal padding, right, then my image is also padded, right?

[00:12:54]
Which doesn't look that bad now, let's do it vertically as well. Doesn't look that bad now until I make the fill color white or whatever. Sure, that works. And we can kinda see that it's not my intended design. So that's not going to work. But, let's round the corner while we're here, though.

[00:13:23]
And we'll give it a little drop shadow cuz we're worth it. So we wanna get rid of this. Does anyone know what the answer is?
>> Negative margin.
>> Negative margin? I didn't think about that, let's try that out. What happens if I do? Yeah, this one we say, do 16 on the sides here or 8?

[00:13:46]
Let's do, No dice. That's also the gap. So, No dice. I can't have a negative number in there.
>> Uncheck Clip content.
>> That will show it to me, actually that doesn't even do it, but that's not gonna solve my issue. The answer is more auto layout, [LAUGH] right?

[00:14:15]
So, what are the suggesting? So instead of having a, we'll back to a margin of 0. And then actually, I could, this one's easy. We'll say this one gets the 8, right? So that looks good. And then the big question here is, do I do it twice? Or do I wrap it in another auto layout?

[00:14:37]
All right, and that one, what is going on? Click that, and then we're gonna say, Add auto layout to that one, we can give this one an 8. I could have done it each individual one, but if I know that the entire bottom section should have that. So basically, the top and the bottom are their own layers that have that padding, but then the image is allowed to go to the margins, right?

[00:15:05]
So the overall card has no padding, right? But each part of this should have padding, does. Could I have done it individually for each one of these as well? I could have, but I like the idea. If I decide to go up to 16, and I don't have variables yet, then I'd have to do it twice all over the place.

[00:15:21]
I like the idea that no, we have all the top content and all the bottom content in layers that have padding, and I don't necessarily need to do it here. So that'll work. And we have, Do you know what else this needs? We need to give it a, let's give it a min width of, why does he choose 375?

[00:15:50]
Because that is, I think, the iPhone SE in Chrome on the smallest responsive setting, and I've committed that to memory somehow, and that is now the number that I use. You could choose a different number, but you wanna know why does he picking that number? That's why. And let's say that the maximum width of this is 640.

[00:16:09]
I don't know, right? So now, it's got some constraints to, didn't mean to overuse the word constraint. Not constraints in the Figma term, constraints in the, just regular words, mean words. And we can also give that component a minimum height, at least, maybe a maximum one, too, let's say the minimum, let's say 240.

[00:16:41]
And we'll give it maximum height of, I don't know, 480 again. Cool, so now I've got a component that I can kinda use that has some kind of natural bounds to it. And we can argue that's maybe too short, but you can adjust the numbers yourself. But effectively, now we've got a card that really does look and feel like something we'd seen in responsive design that we implemented in code, but all in Figma.

[00:17:14]
And also it can bring this in to the one where I've got, it's inside the pay team. I gotta switch this one over in a second, but just in the sake of keeping it simple. I can kinda go through and see each piece, and this is in dev mode, tou can kinda get a sense.

[00:17:34]
If I click on each one of these, it gives you a lot of the answers around, this is spaced between in the Flexbox and it kinda shows you the pieces super easily. That said, one would argue that, I think with some of the stuff, once we conceptually understand the relationship between auto layout and Flexbox, you could probably also stare at the thing and get a sense of it as well.

[00:18:00]
And that becomes easier when either you playing the role of designer or in collaboration with the design team kinda get some of these patterns in place. It becomes a lot easier to get designs where the implementation is more obvious than if they were just strategically placed as well.