The Skill Behind Every AI-Generated UI

All right, in this video I'm going to demystify auto layout and how it relates to interface design in the context of front-end development. Because now that we are generating our UIs with code, if you struggle with auto layout, you will likely struggle with front-end development, and you will likely struggle with getting AI to help you with your front-end interfaces. So it's helpful to know how front-end works. I feel fortunate that I learned HTML and CSS and was very proficient at it before we're in this AI era, because now we're just trying to prompt and generate, prompt and generate, prompt and generate, and iterate and refine. And it's tough. If you're struggling, you don't know what to change. You don't know what to ask for.. And sometimes you can just be prompting into the ether and AI is like, oh, you're absolutely right. Let me adjust that. And it just doesn't come out right. So I think one of the best ways to learn front-end code and how it works is with Auto Layout because it's Auto Layout is literally based on how code works. So I've got some complicated, quote unquote, complicated screens here like dashboards. And you might think, oh my gosh, how would you ever you know, build this with auto layout. This one is— I think this is Linktree. This one is Mixpanel, maybe. And so what we have here is a number of nested containers, and usually there's about 3 levels is a good way to think about it. So for example, let's just go in on this tiny simple one. So we have a little icon. Let's just call it 24 by 24. Just going to make this very apparent so you can see it. Okay, and then we have this number, and then we have this text, and we have this container. So I'm just going to leave that there and make a copy out here. And maybe we'll just— so this one instance of this tiny tile is— this is kind of how it would be set up. So right now I just drew rectangles, but if we were going to actually make this in Figma, we would probably have a frame let's call it module. And this might be another frame called icon. This might be a frame called number. You could call it display, maybe some sort of abstracted name. And this would be text. For this one, I'm not going to worry too much about the naming, but we have icon, number, and text. And so if I wanted to put in an icon. Can I get a Phosphor icon in here? I can't remember if I had that plugin installed, so I'm just going to grab an eyeball really quickly. Clicking in, I'm going to drop this eyeball into this icon. I don't really need icon and eye, but I'm just going to leave it for now just so we can fully see that we have this set up. And I'm not worried about components or anything like that because I just want to show you how this is built. Okay, and then we're just going to use the number 14. That one's pretty bold. And I was thinking about using a little monospace font here because sometimes numbers can be nicer to be used with monospace. Maybe we'll go a little bit larger. This one's quite condensed. I'm not going to try to match it completely. All right, so I'm just going to put that in there and then we'll do views and maybe this one is just— so we got 20 there. This is probably Looks like that's about— looks like that's actually close to 20 as well. And so all of a sudden, okay, we can see, you know, that frame isn't going to fit this piece of content. And I'm doing this very slowly and very methodically just to kind of keep it very simple. And then we're going to build on it from here. Okay, so this Works because it is a fixed icon size. Okay, so that fixed width— you think about the, the 3 different options that you have with Auto Layout. You've got fixed width, you've got fill container, and you've got hug contents. So if I put, if I put Auto Layout on anything Usually, especially if the parent has it and then I'm trying to adjust what's inside, you can see I've got fixed width, hug contents, and fill container. And, and these icons tell you what you need to know about how this works. And I know that this is— this is, for some of you, this might be extremely simple and easy to understand, but there are some people that just simply have a hard time with it. And so these icons legitimately tell you everything you need to know about how this works. So this icon, it's going to be a fixed width because it, it's not going to change shapes like these icons in general, they don't change unless you are going to scale it. Unless when you want to, if you wanted this thing to truly get larger as the screen got larger, this would be Fill Container. And you can see because of the arrows, it's growing outwardly and it's got, is it going to grow or is it going to remain fixed with these hard edges? And hug contents means that this, this will not grow unless it is, you know, filling the content. So what I'm going to do, I think this is a great example here because we've got some fixed widths and we've got some fill containers, etc. And so let's go ahead and let's put auto layout on this icon, even though we don't really need to. We technically don't even need auto layout on this icon. This is— it's just, it's going to have a fixed width, and we can change that later if we need to. This number needs auto layout because— and, and we, we actually don't need this rectangle in here. What, what is better is to have this if you want to style this, and I am going to style it because it's easier to see, I want to put the style on the frame. So I'm going to do Command+Option+C off of the object, Command+Option+V onto this frame. You can see that for some reason we have this, it created it as an absolute positioned item, which means it will, you can just kind of position this anywhere. Position absolute in CSS language, that's where the— that's where that actually comes from. It means that it's positioned anywhere that it can go relative to the parent container. And so we don't want that. That kind of breaks— that breaks auto layout. So we don't want it to be like that. Okay, and you can see this one, if I start typing any number, nothing's happening because it's set to fixed width. So if I want it to hug the internal pieces like a jacket hugging a body or a shirt hugging the skin underneath it or, or whatever metaphor you want to use, that's going to have to be hug contents. Hug content. So now with hug content set This will keep on going, going, going. But you can see how this could cause a problem here. Hug contents is great, but it can cause a problem. And you can see that it's starting to cause a problem about right here. Now, if we change this to fill container, and we can't actually do that because Fill container really only works when it's an auto layout container inside of another auto layout container. So we've got to have like an auto layout container parent on the module in order for fill container to even be an option. So fill container is going to be exclusively for a nested auto layout container inside of another auto layout container. Fill container is exclusive to a nested auto layout container inside another auto layout container. You can call it frame, you can call it a container, you can call it a div, because that is a pretty stan— even if I open up the the inspector on actual, on Figma because Figma is a web-based application. So if I actually click on something, you can see like, look at all these divs, all of these divs short, I believe it's short for divider. I can't remember if that's what it stands for, but all of these brackets inside of HTML, it just means a container. It's just a container that you can attach some styles to and it holds stuff. And sometimes it has different, you know, sometimes interactions live on inside of one of these, or you can target individual divs with a hover or a click. And so divs are just containers, just the same way that we have frames. Frames and divs are sort of interchangeable. And so if I only have a text, if I only have a text block in code, you know, it might be a paragraph like this, or it might be a heading, or it might be a div. Either way, you can target the both the text, and if I wanted to wrap this text in an auto layout frame, then it's basically going to be something like this. So this is, this is how fill container works. You have two individual frames and you can see this one's set to fixed content. So if I set it to fill container, it will, and I can actually, you know, if I wanted to, I could put a little situation on here, but this is how it works. You know, fill container won't work unless you have that double stack, that fill container, which is exclusive to a nested auto layout frame. And these are just sort of the bare bones, like the primitive creation tools for building these flexible interfaces. You just simply have to understand this at a fundamental level to understand front-end code, to understand how to edit Claude or Cursor, prompts when you're trying to adjust. Why is the border not looking right? Why is this sitting over here? Why is it sitting over there? Because it, all of the front end is built on these primitives that all, that can get very messy, especially when Claude or some other agent is just littering the code with a bunch of class names. And class names are, you know, are the style on these. Okay, the width is 363 pixels. Tailwind is a very popular CSS framework that most of the, most anything that Claude generates is probably gonna be using Tailwind. You don't necessarily have to go deeper and learn all about CSS and all about how CSS changes the style of HTML elements and how does a browser work. Deep do you need to go to just be like, okay, I accept the fact that the base pixels in Tailwind are 4 pixels. I don't need to know why, but that's just how it works. And I accept the fact that all of the Tailwind class names are going to be multiples of 4. Sometimes you just have to accept the fact, like, this is just how it works, and that's as deep as I need to go with my understanding. I truly don't think you need to go much deeper than that. Unless you're going to be rewriting browsers from scratch, which I don't think many of you are. I'm definitely not going to do that. So anyway, I'm going to hit Shift+A on this module, and that will turn it into, you know, an actual auto layout container that is set to fixed width. I, I could, I could do hug contents and that's fine for now. So let's just continue building this out. We've got this icon, we've got this number, and we have this text. Same thing with this. Like, we could put, we could put auto layout on this and do hug contents. Again, we got to make sure this isn't set up to absolute positioning. Hug contents is great., but it will break. And there's a, there's a subtle distinction here. Earlier when I was typing this, these numbers, the module was not moving, but you can see now it is because I set the module to hug contents. If the module, if I just adjust this and go flat or static, it's going to automatically change it to fixed width. And now all of my hug content pieces are not going to work very well inside of here, but it would work if I'm going to go hug contents. And sometimes you might need that if you have some sort of layout that needs some horizontal growth. But the fact is, on our phones, having things grow horizontally is not always ideal. And usually there is a fixed viewport on the left and right side of your phone. And growing vertically is usually more desirable. So how do you do that? All right, so, well, let's just assume we're going to have a fixed container. This is just a very easy way to do this. Now, it doesn't have to be an iPhone, but let's just, for the sake of doing this, let's just say we're going to have two of these. So even if I wrap both of these modules— and actually, I'm going to create a component of this just so I don't have to duplicate anything. And then I'll put these here, and I'm going to wrap both of them in an auto layout frame. And I've made this frame— let's, you know what, let's just— I'm going to keep with the same exact style just so we can just see what's happening here. Maybe I will— let's lower the opacity on this so it's not as hard to see. So let's say I want to go 24 on both sides, and let's say I want to have a 24 gap in the middle. Now you can see there's a lot of interaction there's a lot of hug content stuff happening, a lot of fill container stuff happening. So, but hug content is good for like a vertical growth, for example, on our— and now that I'm using instances here, I don't really want to adjust this. I want to adjust just the main component here. So let me go back and put in, all right, we got 14 views. Sometimes what I like to do is put in like number label and then come in here and change the content to a few different things just so it's a little bit easier. 28.6%, 28.6% click rate, because you know, some of these are going to be longer than the others. And now what I'm going to do is I'm going to select both of these instances inside of this, and I'm going to set them to fill container, and they're just going to take up space inside of their parent. But what if I wanted, you know, what if I want click rate to keep, you know, to stay in place? Well, hug contents is not going to work. It will work if we're going to use something like this and we want, you know, a center-aligned button and we want this label to grow from the center and maybe we want a corner radius and maybe we want this to be, you, you know, more of a button style. So if we wanted a button to grow from the center and we wanted to have like a, you know, an expandable type of situation, then hug contents could work for this. Okay, so this is working the same way now that this one is working. With hug contents. But when you're in a fixed container, even if you had a really long button, eventually the hug contents is going to not serve you well. It could be worth treating it the same way that we're going to do this other one. I'll just— I'll keep this here just so we have this. But pawn. But what we're really going to want to do for both of these is we're going to want to set them to fill container. Okay, when it, when it fills the container, it will, it will stretch out to respect the container bounds. It is respecting the 24-pixel margin around everything, or padding, excuse me. And so you can see, actually, that one's— I don't know how that changed to 22. But what's, what's nice about this is you can see that the fill container is sort of allowing me to adjust this auto layout. And it's like, it's working nicely. Now look what's happening here. This is another sort of gotcha that sometimes happens with text fields. Because you think, oh, I've got, I've got all these set up as I got this fixed container. This one is set to, this one's set to hug, which it really needs to be set to fill. This one, I accidentally changed the ones inside of here instead of the main, but you can see like what, what does happen if I keep pushing this. My main component looks fine because it is set to fixed width, but these are set to fill container inside of a screen. So we have to also, in addition to adjusting the frames inside of here, we also have to go into the actual text labels and make them fill container as well. And so when we do that, everything, even the frame and the text itself, is, is filling. It's almost like wearing a shirt and a jacket. So if your jacket was set to fixed and your shirt was set to hug, it's not really that possible for it to happen. But that's sort of the idea, that I have two layers on, and both of them need to be set accordingly to, to kind of like grow with the content. So now that everything is set to fill container, I can adjust the padding here. And you can see the main component looks a little bit weird, but you can see how this works in the instances. So I'm going to go back and sort of adjust this back to 24 by 24. And the reason this got weird in the main module is because the fixed width just changed. So we can just kind of set this to whatever we want, whatever makes sense. But just know that what's kind of nice about this, like if we wanted to do 3, I could just hit Command+D and they're going to like all change because they're all set up properly. Okay. So I'm going to just hit Command+K on these and use them as my icon group. And then inside of my icon, I'm going to place an instance of the, the eye. And now that gives me sort of like an icon slot to now go in here and Oh, I gotta change my main component here. So now I'm gonna bring this in here, delete that one, and now these others I could update the mouse pointer. And if I wanted to do another one, I could update this one to be the percent. I actually did these wrong, but let me just fix that. Percent. This one is going to be mouse pointer. All right, so we got 14 views, 4 clicks, 28.6% click rate. All right, something, something else has happened here, and I want to— I want you to understand like why this is breaking. Because so far we've only dealt with the what happens on the, the width, not necessarily the vertical. So you can see right now this one is set to fixed width, fixed height. This container right here is set to a fixed width but a hugging— it's a hugging height. So this one's set to hug contents on, on, on the vertical. So it is hugging the contents, but this, this actual— these actual instances of the actual file here, they are still set to fixed height. So there's, there's the width you have to worry about, and then there's a height you have to worry about. And so if we change this to hug contents, that's going to grow. It's going to grow vertically, and it's going to keep growing vertically because that will always be set to hug contents. And so you can see how the hug contents works a lot better for vertical content because you can scroll. And this is— this isn't necessarily something that you have to set up in HTML and CSS. Like, this is just how it works. Like the content grows inside of HTML. And it's not very common for content inside of a div or paragraph tag to just— it's not going to bleed off outside the browser, it just naturally will wrap left to right and grow. And so really just setting it up this way is, is just enabling you to set it up the way a browser naturally reads this information. But when you start introducing a bunch of class names and a bunch of frameworks and you layer on you can see how much, how many small rules we've already layered on just onto the icon. Okay, this one's fixed width, this one's fill container, this one's fill container, but also it's fill container on the horizontal but not necessarily fill container on the vertical. Like we had to go in and actually set it up where this one is now hug on the vertical but fill on the horizontal. And then the same fill on the horizontal and hug on the vertical. So we're setting up this little tiny piece and this, you know, we might realize like, oh, actually it looks way better to have only 2 wide. And, and so we might actually only want 2 in here. And, and some of that will, will, you can kind of see how this is, this has got, okay, now we can't just have everything scrunched down into something unreadable. There's got to be other rules. That prevent it from getting too small. And so if we pull this out and we see, oh, there's— these are now 184 pixels wide, one thing we can do now is we can say, okay, that's a pretty good minimum. Let's go in and grab both of these instances and say, you know what, let's put a minimum width on these of 184. That way, if I go and I put another one of these in here, it's not going to affect these others. And so I did not— let me, let me actually go back. I think I can also go and put a minimum width on this actual main component here. That way, when I do put it in here, you can see like it's still going to be the the same width versus on the individual instance. And so this is also something in code. Sometimes you have to make decisions about, do I put these rules on side of this component, like inside baked into the component, or is there a layout rule on the parent container? And sometimes that determines how you might structure your React components and where that actual source style information might live. And the more you know about how this is embedded into the code, the more you'll be able to affect the overall look and feel of the actual site or the components. And so, all right, so now if we wanted to, I'm gonna, I'm gonna pull this out here as well, but I want to also point out we can just add this little wrap functionality onto this one to make sure it goes around, but it's like, oh wait, now I don't want this one to be so big. I can't have this like, you know, super, what if we just removed all this? Well, I'm not gonna Worry about that yet. Let's just look at the selection colors. I'm just trying to like slowly reduce the amount of red because it's a lot to look at. Okay, so now you might be thinking, I really want this one to stay right here, like how can I do that? Well, we have a minimum width set but we don't have a maximum width set. So what if we went here and we said add maximum width? The maximum width— like, I basically just want this thing to stay 184. But, but again, you know, if, if you wanted to move some of these down and you wanted to move them around, that's why sometimes it's not good to bake in like minimums and maximums like directly into the, the root component, because I might actually want to be able to change minimum width to be, you know, zero. I might want that to fully fill the container. I don't know if I can actually do this. Remove min and max. All right, so this one, these have— I mean, you can see even I, I know this very well. I could deconstruct it, rebuild it, but even now in this moment, I've gotten confused about what's going on. So I get it. I get the frustration with Auto Layout and, and with dealing with front end because it's, it's not super duper easy to— like, there's a lot of variables here, and so it can cause some frustration. And so I think it's important to like only, only kind of create those, those strict constraints as you need them and sort of like remember it. And so I'm sitting here wondering, like, could I do that? And I'm wondering why is, why is, why is that not letting me? Like sometimes with code, this is easier because you can say like span 2 columns. You can just say like span-2 if you have, if you're using Flexbox or CSS Grid and it is faster to do this with code. It is faster to do this with code, but it's not faster to do this with code if you want to adjust it and make it look good and you don't know how it works. That's the disconnect. Code makes this faster, but if it doesn't look good and you don't know how to tell Claude or whatever what to do to fix it, it might wrap it in something else and it could just inject a bunch of random code that might make you struggle with your layout. So I think what I'm doing here is fiddling with these pieces of information. And it legitimately is faster to deal with this in a code state. But in order to learn this, I sort of have to go through this painstaking process of being like, ah, ah, oh, okay. That's, that's why this is not working that well. And so it's just like an interesting sort of conundrum here with wanting to go fast, but then feeling frustrated that I can't make it do what I want to do. So the same way that if you're going to learn a bunch of skateboard tricks and kickflip and jump down into the bowl and do it, but if you don't know how to ollie or you don't know how to ride your skateboard without falling off, you're not going to drop into a 12-foot bowl and start doing, you know, 360s and handstands and all that. Like, you have to go learn the fundamentals first. And ease your way in. And I know that AI and building things with Cloud Code and everything makes you go quicker, and that's fine. Have fun dropping into the bowl. But if you do that without this, some, not all, but some fundamental knowledge, you may, again, this is heavily asterisked, you may not make it look or get it to work the way that you want to because your own knowledge is limited. And you can, you could legitimately say, hey Claude, this is happening, this is happening. What can I change to make just the number, you know, scale properly? And it might figure out what you're asking, but sometimes not having the knowledge makes it where you don't even know what questions to ask. And so I just want to, it's just my attempt to give you a little more knowledge to make you a little bit more comfortable knowing how this works and knowing how to both tinker with it on your own and also tell AI what to do, how to build it. So let me just get back into this here. Let's see, what else do we want to do here? You can, you could kind of see, you know, like Okay, what if I wanted to build this dashboard as it is sort of listed out here? Let's put Hug Content on there. You can see like basically this entire section in here is likely, you know, it's a div and a viewport with a bunch of smaller divs and viewports built into it. And so I'd have subscribers and earnings, and let's just keep this at Hug for now. And let me go in here. I'm trying to, I'm trying to keep these outlines on here just so you can more easily see what's happening. And what I'm going to do here is I'm going to reset these instances just so it shows the outline. So we got click rate, we got clicks. I keep doing the wrong icon here. And we've got subscribers and we got earnings. $0 earnings. Come on, we got to do better than that. All right. So just in the interest of making this a little more rounded out, Let's go ahead and add these to our little icon collection up here. Turn these into— and the other thing that I really like to do is just go ahead and use icon/current name, and that will just make it a little bit easier for you to adjust these in your actual So it's like, oh, everything lives under icon. Sorry, under the folder icon. And then I've just got access to everything here. It's just a little bit tidier, a little bit more of a tidy way to keep track of this. All right. I'm going to delete this one out of here. Okay. So we actually have, we've got our modules. Here, and every one of these is currently set to like 184 minimum width. Actually, it's set to fixed, so we could do fill container here, and that way— and let's also go ahead and let's remove— let's min width is just like, let's just remove it. From these. That way we just have this like stretchy container. Okay, so if we're gonna, if we're gonna like, you know, build this dashboard out with Auto Layout, we're also going to need— okay, we got lifetime totals here. Just temporarily make that one a little bit bigger. And so even this and this together can be another auto layout container called lifetime totals, or, or whatever we wanted to call it. It could just— lifetime totals is probably not a good name for it. The best name is probably like module row or something that's a little bit more abstract. That way, if I turn this into a component, I could put other stuff in here and the abstracted name would allow it to be more flexible and scalable for the future. But you can see like lifetime totals, it automatically set it up to be fill container. And so that's kind of nice. So if I, if I start making this smaller, you see lifetime totals is also scaling properly. Whereas if this was set to hug contents, it actually wouldn't scale down properly all the way. And the same way, if this was set to fixed container, the actual text field, it also would not scale properly. And so being able to, you know, have more content that stretches out further, that is going to determine be determined by whether this is fill container or not. And you might not want your text to go out that far. You may want to set a maximum width as a style choice. And, you know, maybe that maximum width is based on, you know, 2 modules or whatever grid you're using. And so then you could have like, you know, content that's in here that's perfectly lined up with your grid and there's a max width on that one as well. But again, That's only if you want to constrain the text width, and in this case it's a title. I don't necessarily think that we do, probably not going to have a bunch of stuff in there. But now we can adjust more cleanly, adjust maybe a 24-pixel gap here. You can look inside of here, we have 24, we have 24. We could very easily go in here and adjust the gap to be 12, and we, we'd be guaranteed that everything's gonna be a little more flexible. And this kind of gives us an interesting way to play around with styles as well. You know, you can very easily start to adjust the style of something if it is set up properly in these panels. So I could go ahead and like, what if we, you know, what if we did a 24 corner radius on all of these modules here? You know, that automatically changes the style, and you can tell that I changed it you know, from that hard edge down to what it's looking like here. And if I wanted to go further, you know, I could remove the red strokes. I could make the background gray. I could try out dark modes, add color variables. But the important thing is that we built it from this like primitive foundation. And now all of this is sort of working as you would expect it. And so that is going to be, you know, how you would start building out a dashboard like this. Some of those same principles are going to apply to like this last 7 days toggle there, for example. That actually is what you would need to use Hug Contents for. So let's just call that pill and let's say this is last 7 days. I'm just going to like max that out. We'll do— what do I want to do— 16 and 8. And we want this text to be hug contents, and we want the pill to be hug contents. That way If we wanted to say last 7,549, actually, hold on, let's— pill, for some reason that got changed. Oh, you know what? The text resizing block got set to auto height instead of auto width, and that's what just adjusted. So there's like, there's all these little variables inside of Figma that can totally mess you up, but you just have to, you have to go through and analyze the text properties, the container properties, then the other container, then the other container. Because you can see like even within this one, we have, we have one layer inside of a module. And so that's two layers inside of a third container. Inside of a fourth container. And then if we were going to put this all together, it will be inside of a fifth container. And so all of these rules sort of like apply to everything. And we, you know, like, especially on, on this, if I just remove that, you can see that, you know, most of the time, you're not going to want your title kind of like hanging out that far. And so that might tell me, oh, I actually need to make the padding here, I need to make that 0 so that it fully expands. But inside of the actual container, if I were to wrap this in another container that is more like, let's just say like middle, let's just call it middle or main. Main content. Now you can see my main content, it also has padding built onto it. And the default Figma is like 10. I don't love that they put the default to be 10 here. Maybe you can change that. And so let's, let's just do like a— let's do a green fill and stroke. And this could be fixed width, but it could also be stretchy depending on the screen size. Like most, most layouts are just going to be— most of them are going to be stretchy so they can fill out the full width. So you can see we have a lot of stuff going on here. We've got the module row inside of the main content. We have lifetime totals. We have these modules. We have these individual modules inside of there. We have these other small layout, but they're all sort of working together. So you could make this bigger. You can make this larger. You could even get in here and start scaling these up if you wanted to like play around with the design and you could bring your other module here and you could, let's say you wanted to combine the content here that's separate from the icon, then you could be like, what if we did, what if we started, what if the icon was like way up there versus, you know, tucked really tightly? And so, This completely changes the feel with a little more negative space, maybe a little more emphasis on the number. Could be cooler. It kind of depends. But once you learn how everything is sort of structured and works, it makes it actually easier to start kind of manipulating some of this stuff. Actually, let me— I'm going to leave that one. I'm just quickly changing the style here just to make a point. Get rid of the stroke and we'll make these white. Select all that, get rid of that, get rid of that, get rid of these. Maybe we add a little shadow here. All right, so now I can get in here on this module level and be like, you know what, what if it's, what if it's 12? Is that better? Like, what if they're, what if they're overlapping? Is that kind of cool? No. So it, when, when this is all set up, it allows me to sort of like tweak and, and play around with this a little bit more. You can play, you could play with like line dividers, you could play around with modules, you know, maybe it does have a stroke, maybe, maybe it looks like that, you know, there's a lot of things you can do. And again, you can, you can do that from the module level for the style, but having this set up right, and understanding how it is properly set up, I don't know how that changed. Fill container. Once these are set up and you understand how they're set up, it gives you more superpowers to know what to change and to know how to change it. So I'm actually gonna— I do want a little tiny stroke on here. I think it'll look a little better and sort of match what's going on there. And remember, you know, we, we're playing with with our own design here, you know, theirs is more like this, and they actually do have quite a bit of a bolder, possibly bigger number. But again, you know, if I wanted to change just that number, if the auto layout is set up properly, it'll just scale. And you can be like, oh, actually, if I, if I do want to go with a much bigger number, I can't go with 5 tiles wide, so maybe Maybe I do want to go with the bigger numbers, and in order to do that, our minimum width is going to be, you know, 320. And then we'll have to figure out, you know, how does that affect the rest of the layout? And so that could be, you know, a better— this might be a better solution instead of how, you know, is views, clicks, click rates, subscribers, earnings— is that all, you know, the right amount of information? And so you can start to weave in and out of like, is this important? And if so, let's make it larger. And how will that affect the layout? Oh, we need to set a maximum width. And so like all of the important user information and the UI is all sort of merged together. And when you start generating this with Claude code, you could see how you can get out of hand pretty quickly. Now again, could you just say, hey Claude, make the numbers bigger? It'd probably do it. It probably would. But if you understand how it works, it'll give you more flexibility to change it and manipulate it how you see fit. If you don't understand how it works, you're just going to have to accept whatever it gives you, and you'll have to, you know, prompt it. You'll have to just keep prompting it until you can get it to give it what you want. But if you know exactly what you want and you can begin to discuss things at this primitive level, it will just give you more power. And so learning Auto Layout and learning how that works, I think it's still relevant because knowledge is power. I'm just kind of messing around now. What if this was like all caps and smaller? Icon. Normally I would, I would actually just go in and change the actual color, but in the interest of time, I'm just gonna use opacity on that layer. Actually, is it not adjusting? All the others. All right, so there we go. That's, that's part of this dashboard. You can sort of see how this starts to work together. And even just using these same principles for this one section, building it block by block by block, this will help you understand how, how the rest of this can be built. I could— I can pop this in right here, and then this could be— this could be like an action row, and maybe an action row has a lot more space above it. Or the module row has a lot more space below it. Maybe the other one makes sense. Maybe it makes more sense to have bottom padding on the module row. And that way, if I got ready to put in another row of things down below, you can start to see how, you know, all of this will sort of play out. And you see, just because I— sometimes when you're moving stuff around, it just gets set to fixed content. And you just got to go back and be like, actually, that needs to be fill container. And now it's back. And so you're not going to, you know, to be able to fully get all of this fully, fully, fully locked in in just a Figma frame, I don't think. And it is easier to lock all of this in in code. But it is just such a fantastic way to visualize and to tweak things and to fine-tune and granularize the controls and the colors within an editor like this, and then send that information into your, your development effort. I'm trying to get these to kind of waterfall with that. So you can see now that I set the, the minimum width to 180, you can see they're not getting like as tiny. And so there's so many ways you can play around with the layout by setting minimum and maximum widths and rules for, you know, how things are going to like rotate or whatever. And, and also if you see this and you're like, actually, I'm playing around with this layout and it just feels like there's too much. Maybe that's too tight right there and you're like, actually, you know, maybe the bottom padding needs to be 48 and that might make it look a little bit better. So yeah, there's your, there's part of your responsive dashboard and you could imagine the same way for creating this one. We'd create that, we'd create that. We'd have— we'd continue to build it and build it and stack it and get it to work. And then we would possibly build another one. And you can see like these two modules are very, very similar. Really, they are exactly the same thing except for their internal content. And so I can see these two pieces of internal content would need to be separate instances. But this external container could be the same that pulls in different pieces of internal content. And, and exactly the same is true for this and this. All of these on the outside are, you know, a module that exists, and then we've got 1, 2, 3, 4 individual pieces of content and the way that it lives inside of there. And so it's like, you know, this mini system. So this might end up being in there. If we took that one out, that would be fill container. If we make that fill container and we make these go horizontal, 24 gaps, you can see I'm kind of like, you know, crudely doing this for the next two, but you can start to see how this works. All together. So this is going to help you not only inside of Figma, but also just understanding those building blocks when Claude Code generates something. This will help you out. So I hope this is helpful and thank you for watching.