Nesting Auto Layouts Solution

[00:00:00]
>> Let's go build this card together. Was kinda start from scratch and just walk through it even though it stepped out a little bit. But I think it's still helpful to kinda go through it and see it in action, right? So, we'll start with a frame, I'm gonna hold Shift to give it some kinda standard size 400 by 400 seems good.

[00:00:19]
We didn't really talk too much about the ability to set like a stroke. That's just the kinda side and edges here, right? You can see this is gray but if I chose a different color, you kinda see, that color there as well. We kinda mentioned before this workbook came with a Drop Shadow that we can just use, but we can set that as well.

[00:00:41]
And then changing the border radius. We can either if you wanna just see what different border radiuses are like, you can grab it and kind of turn it yourself. You have a lot of room to work with. Let's go with eight. Like I said, you could if you hold Shift, it'll go by 10s.

[00:00:58]
Whatever feels right to you, like you don't have to implement these designs exactly the way that I am, it's more about the technique rather than the actual specifics, of like well your border radius was actually 10, so you get five points off. No, that's not how this works.

[00:01:14]
So we've got this in place. And like I said before, the closer you can get it, you don't at any point have to have it exact, you don't. But the closer you can lay it out before you apply the auto layout, the easier your life is, the less you have to do later.

[00:01:28]
And it's like sometimes it's easy to get it right the first time. So let's go ahead and we'll give this a I don't even remember exactly what it was. I'm assuming it was about 48 though. Like I could go in there and measure that back one pixel. Here we go.

[00:01:46]
Now I'm just gonna type it in by hand. 48. Cool and then it's roughly I might give that one a stroke as well mostly to have there's no way to do as far as I know just like a bottom border. So I usually what this is kinda as you can see, we get the effect that we're looking for here.

[00:02:06]
That's not true. You can do all sorts stuff with unions and subtraction but like easy, right? And like we are clipping the content. So like I don't have to match up the border radius there because like anything outside of the frame is clipped. So I'm getting the effect that I want.

[00:02:23]
This isn't the actual implementation. This is again, a representation of what we'll implement as engineers. But keep in mind that like you like yeah, this is what it looks like. There is a middle piece as well. So we can go ahead and add one more frame in there.

[00:02:37]
And you can see I missed a little bit, but I can also just grab the top and snap it into place. So now we've got the general kind of like cheeseburger structure of our card component, right? We go in there and add in some text as well. So we'll say like, title.

[00:03:00]
Center that and I'm gonna say it's got an x of 16. And then we'll go ahead and we'll just make a copy of that over here. What I normally wanna do what I normally do cuz I'm It's tricky as I'll put it over on the edge and like we saw in the very beginning I will then go ahead and subtract 16, right?

[00:03:25]
And let's go ahead and just do one more now that I have that as a guide. I'm gonna hold Shift so it keeps the same vertical axis here and then align it with the Center for these two actually I'm also gonna say I missed it. I'm gonna say that they should be aligned to the right in this case, and now we'll just give this like $1.

[00:03:57]
What else do I have in here? That was down there? So put the artist title up here this time. All right so we've got the basic shape in there. The other thing that we don't do at the middle one year. One of things I also do a lot of times pretty early as name stuff appropriately because it's like really helpful sometimes especially when you have a lot of color to everything you just name it, so we'll call this one.

[00:04:22]
Bottom bar. You'll notice the text fields automatically just get the name of whatever's in the text field. This is great as we're making one off components, but a one off, yeah, components. They're gonna be components in the future, I spoil it for you. Like eventually we'll make reusable components where it won't just always be $1.

[00:04:41]
A lot of times I'll give it like some name that makes sense. We'll call this one top bar. And so that C frame 13 which should be the middle, I accidentally nested inside. So one way you can do is just in this outline view. You can just move it up like this as well.

[00:05:00]
And so now it came out from a child have that bottom frame that was cut with the clip contents. Now it's actually just appear with the other ones. So we'll call this one content as well. Cool. So now that is the layout of a car component. Now like I said before, you could drag in an image from your computer.

[00:05:21]
And the nice part is when you make these reusable components you can just like slap another image on it on each given instance and it will be totally fine. We can start with a default one. I could grab an image. I'm just going to right now just fill it with like a gradient or something you can fill with a color anything you want.

[00:05:38]
So go here, you can just literally drag an image from your desktop into sigma you can choose any one of these let's go with a diamond gradient this time and we'll say that this color should be Cool some version of that. In there as well, I like the other one that I did for but like live gradient dean is not a thing that I plan on doing today.

[00:06:03]
Hopefully like that as well. And there's no auto layout to this at all if we stretch out anything, it's just sadness all the way around. But there are a bunch of pieces here. Now we could grab the frame as a whole. We can auto layout it. And now will automatically just kind of work.

[00:06:20]
I'm probably going to out of the box, say that like it's hugging the contents. I don't know if I really want that, right? Cuz this doesn't work the way that I wanted. So what we'll say in this case is that it should be a fixed width and then each of these Should Grab that they should fill the container.

[00:06:51]
And so now almost easy to fix tight I didn't set. In this one, you should be fixed and that one should fill. Okay, so we want the top of the bottom to be fixed. And we'll say the center one, fill whatever's left over, right? So we'll go ahead and we'll drag that down.

[00:07:14]
And you can adjust this any way you want. You see that like these are now set to whatever I tell them to be. This one is going to take out whatever's leftover, right? Very similar to how you might do it in flexbox as well. So say this is 48 again.

[00:07:30]
I'll probably change that in a second. Now each one of these can also be an auto layout as well. So Shift A you can see the bottom says Auto Layout added. In this case, I wanna say that you should start with your alignment here and we'll center it.

[00:07:46]
But it's still hugging the contents. So we'll also fill the container as well. And we'll fill the container and in this case, let's do it space between. So like there it set a margin between these two that just happened to fill up all the space. But if I dragged a third item in there, it wouldn't have worked the way I wanted it to.

[00:08:07]
So now theoretically I could grab like another piece of text here. Go in there, it'll be that if I do it again. They'll start to automatically spread everything out just like it would with a flexbox. So if I really wanna be like extra like obnoxious about the price, I can just put it in the box nine times and it'll workout.

[00:08:31]
Versus this one, it's aligned to the right with a 10 pixel margin in between them. So if I drag one in here, you can see that it behaves differently down here. So you can begin to compose various different auto layouts within auto layouts, but this will all respond as it changes and grows.

[00:08:51]
If I make this a lot longer I don't have to readjust anything, everything takes care of itself.