Figma: Master Autolayout | Bruno Sáez López | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
3 Lessons (49m)
    • 1. Course intro

    • 2. AUTOLAYOUT - Navigation menu

    • 3. AUTOLAYOUT - Card

15 students are watching this class
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


Figma released a completely new version of Autolayout (so this tutorial no longer is valid), you can check my new tutorial here: New Autolayout v2 


Do you want to know how to speed up your workflow working with Figma? Then you should defnitely know how to use Autolayout! Autolayout in Figma helps you for example creating responsive buttons that resizes automatically depending on the text you insert. Use nested autolayout elements to create consistent designs and help you to make changes to your designs faster. Autolayout will save you tons of time once you start to use it. In the class we will do two designs, a menu and a list of instagram/twitter cards style. You don't need to have any previous experience with Figma. With this fast course you can learn a little bit on how Figma works and learn about Autolayout too.

Meet Your Teacher

Teacher Profile Image

Bruno Sáez López

UX/UI Designer and Front-end developer


Hey, I'm Bruno!

UX/UI Designer with more than 20 years of experience currently working in a big data company making complex products simple.

Figma, Sketch and Adobe XD are my favourite tools.

I love going to the mountains and record music.

If you like my classes follow me to be updated when new content arrives!





See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Course intro: Hey, welcome to these fast course off mild. Try out. You know how to make responsive bottoms inside. Hickman, do you want Oh, speed up your or pro while working with the stool. And you? The answer is yes. You have to see this course I'll talk out. It's a tool that allows us to make responsive the science inside Fichtner as well. It always toe maintain consistent and uniforms the science regarding toe spacing. And this dude was showing off elements. And for Suri settle that makes your workflow in Sigma the supercluster, maybe, I don't know, 5% 10% pasta. So in this course, we're going to see a couple. Six samples have to be signed many and hopefully sign Twitter or this time beram kind of car. So you weren't there saying to improving your work? Olympic Ma, I'm pretty sure this course I's gonna be perfect for you, so I'm gonna you actually sign? It'll be. Data products are trying to make things difficult. Approach a bit simpler. And I hope you're going through the glass. OK, see you 2. AUTOLAYOUT - Navigation menu: Hey, welcome to these short cores about mastery. Now try out. We are going to learn everything we need to know. Toe were without layout and safe sometime working Wi Fi HKMA. And that will make us do better and more uniformed designs. And I have three other day navigating through Reville I five. We found these Ah, nice menu here and I thought it was It's a good that sample toe to replicate with out try out. This is a dribble shot from Kevin Duca and it's prick. Also, let's come to Fatemeh and I have it here already replicated as well in these in these sessions we will replicate these Ah, interesting car how to make this card. And as you can see, it's ah responsive. When we delete these Ah, the car gets shorter When we delete this, the battle, as you can see stays in place. And, um, it's rece isis itself. So the same thing we can apply here if we delete this being battle because we decide at the Berrien we just want I don't know the date instead of the place or something. We can just do it and at the same time we can have like Ah, Margene like And at the same time, we can have, like, the same s basis all around our elements. Okay, you can see here have 32 but step by step. Let's start. We're going to start with with these, um, many here because it's simpler than than this one. He here we are going to use a lot off nested, um, out of the out. Outlying out. It's ah, priest. Ah, pretty nice feet. Er fit my house included to make designers life easier. So what I'm going to do to replicate this part here? That it's ah, working as you can see, Let's we can without light out you can change the place off the elements and or Imadi another worry and you decide you want more space between these elements? Yes. Come here into all Try out and you can just adjusted. Okay? I'm going to live these into 16 for now. And what we are going to do, it's create ah re tangle like this. He doesn't matter the size Later on, we can change it picked this color. I have already created these cholera styles for this esprit. Well, I think I don't have actually this color. So I'm going just to remove the feel after another feel and then select this color and audit us, Um, a secularist style. And this is going to be Ah, let's call it black. And this black is going to be our our background here. Okay, so for these, its previous straight forward, we are going to create these three circles. First, let's say they are 16. Let's imagine we are working with an eight pixels create so everything is multiple off eight. In this case, I'm just going to go here and select these colors. Makes three circles three circles you can duplicate. Ah, your items like person Common D or controlled the in bc and or just dragging, impressing the old key. Okay, so we have our three bottoms and we can do something here that this is start to Messer and how and what the stands to do they have and everything, but we don't need that anymore. Without ally out. When you select the elements, you can see here the outside layout panel popping up, so we yes, press plus and it seems nothing happened. But now we have some control over the over our, um, element, as you can see. So in this case, if we I'm not going to apply, they pick celebrate for days because this is kind off from the u y of the browser, simulating on everything. Not in this, like these elements. Okay, so I'm going to live these like that for now. Then we're going to create the logo. That's right. Okay, so I'm going to put this in white so we can read something and let's put this into black. And let's say this is instead of black and going just to go with both Okay, So, Well, I'm going to live this so we can feel some difference. And then I have a black in here to what icons, Which is pretty cool because you can find a lot off icons. It's called quantify, and I just said for all your icons here and these one, it's pretty similar to the one we we we saw in the example. So I'm just going to bring it here and change the cooler. You can You can things the core here, and yeah, I'm going to bring it here. I'm going to make a group, so I don't see these frame name here and you can see now seeing sees a group it doesn't. So the names and that's induced distract me and what we're going to do here. It's the same thing we did before its creator notoriety out to separates these two elements , or recently and you could say OK, but But why not to do it like manually like I can't Yes, that and just make it. Make a group in something. Yet that's true. We could make it that way, but but But at the very and it's if you want to be consistent and change some values in many updates at the same time, it's going to be easier to make it without a way out on something interesting. And I think this is the kind off a back here with Fatemeh, and I'll try out its Sometimes If I select two items, I can see the outlying out because I just selected the text on the background and out trying out this present. But if I select this icon and this text outside out is gone, but don't worry, this is kind of a back off Sigma. Because if you press, um, dry click over here is the still present. Okay, you can add it here. And at the same time, I It's a good practice to know the short cuts off the things you use the most in this case at out or ideologies. I think I used a lot of times. So it's a good practice toe. Know that if you pressed sift a you are goingto make the same thing as we press here on its ah prequel shortcut. So I'm going to press sift a And now it doesn't seem that we did something we talked before , but yeah, now we have control over. Um, you know, the distance between the icon on on the 100 on the title on the text off the off the brunt . Okay, so this is pretty straightforward, as you can see, um, we can see this shape. The sea is kind off. Um, we are kind off having here. Let me just because I think I have some things that are gone. Yeah, I want to. As you can see, it's interesting to have your layers be civil. I'm going to look this so we work here and what happened? Okay. As you can see, I started to drag things and everything got inside the ah, the outer lying out here. So for this particle, our case, where we are going to do is big. This I'm going toe rename this to bro, sir. So we know the things that we have, this is going to be our background. I usually put it like BG and I'm going just toe break thes these again so we don't have outlying out anymore. But we have fun to now. I'm just going to put things out. Ah, we don't want, um, the browser because it's it's speaking there. This is the outdoor that we made for them for the title and therefore the logo and the logo is the stock claps and everything. So I'm going yes, to boot the background outside and again, we have our Ah, yeah, we have here our logo, then our browser. So I'm going just to put it here and the thing Now it's Ah. As you can see, it's putting the names because we because I took all these things out of the mainframe and it's making, like, kind of weird things. So I'm going just to collapse this and put all this stuff inside again. Okay. What's going on? One? Yeah. Huh? Sometimes working with this can be with the layers. Can be tricky if you don't have it named. So this is going to be our logo. Okay. And and now we're going to start to create our A so you can see our, um, minimal menu items. And this is going to be fun. So I have another planning here for I comes to so I use always the same. I kindof icons. The same. My compact. So is this design is consistent. So in this case, we're going to look for home. And we are going to change the color or toe White later on. As you can see is not wide. Why this kind off? A great. We'll go over there later. We're going toe. Create these since he's more complex component that this we're going to start creating this and this is white. So that's what what we're going to do. So now we're going to put that here. Our test is going to be search, and this is too big. So we're going to put it on 18 pixels and this is going to be yes, regular, not bold or anything. So we can just place this stuff there and then pick us. We see a rectangle older, and it has some border radios over there, too. So we are going just to try toe. Emulate that. Let's let's say, is eight okay? It doesn't matter. Like their own. We contained it. If we feel it needs more rounding and on the field side, we're going to select this because I have it from ah, from the when I was making these two to prepare it. So what we do here instead, you could bring forward toe, put it on the on top on, or as you can do as well is yes, the oppressed like cut and paste. And it's going to paste this on the top. So I usually use that because for me, this, uh, I'm not too familiar with these circuits, and sometimes they don't work for me. So, uh, but it's but it's good enough. So what I usually do to make these, um, to make to make these out. Try out. We can just press this selective three elements and press Plus. And as you can see, uh, these elements is going toe toe get short. These these background, we don't have it, We don't We don't want it to be, um, like, responsive. This is cool for buttons because the background increases their its size when we write something, but in this case, we don't want that. So for these, we are goingto make like a nested outlying out. I'm going just to remove here the antibiotic, and I'm going to put this background bigger again, as we have in the example. So for for this particular many white and what I'm going to do is create an outlying out for those two element, the icon on the decks and way are going to do it now. And we have, like, 16 which is perfect because we were working with a pizza waiting to pay about two. It gives the number 16 and what we are going to do now it's select this and apply outside I out to these pieces, okay. And you will see why I do these. Um, because now we can have control over the size if we decide that we want these to be like, I don't know. Maybe in this case, let's go with instead off night piece of grief with a four big celebrate so we can put here some some parting in the Ori Central Party. And as you can see, um, in this case, yes, we are going to war with 16 and in this case, we don't have horizontal elements inside, so we don't need to put some space there. So we have our first element, and we can create a component here. But since I don't have three icons as components, I'm going just going to duplicate this, okay? We can just duplicate this stuff and or I'm going just to do one other thing instead, off duplicating everything from here. I'm just going to change this element, and I'm going to put here the contains the the opacity of the background. 20 No, sorry. I m okay. I'm just going to remove the background. Yeah, that's better. So later on, we cannot. We cannot the background again here, for instance, and it's going to be with the border radios and everything okay on these elements, they are They are with the white, and we are going to change it with this. Great to that I have here. And you can select the whole element and then override the colors here on this Quiet is going to be override. We've this great I had previously created. Okay, so now, yes, I'm going just to duplicate son Adam. And so we have these four, uh, just to put this up and I'm going to out somebody radios here too much what we have from the left. Something around that 10 is good. And we have our selected item. And then I have this and I'm going just to add the icons. And now we're going to see ah, out of the out working pretty cool. We'll see now. So I'm going toe for the search icon. Double click. And then we think this for white and what I can do. It's drug inside our outlying out. You can see you can position the element whenever you want. You can move it around. You can put it on the at the end and is going to be perfectly aligned and with the same space here on and in this case, what we want is yes, to get breathe off The house contained these white collar again for our great color. So it much us and well, these instead, off search is going to be home. Uh, this is going to be called I'm going to take till the names and this is going to be news. And I'm going to set for more icons. So it seems this again toe wife. Well, actually, it's great. And it is going to eat five and we Yes, put here. So we have are many of. But if you want to move their things around and you want to change section or all the stuff can be, uh, kind off all that all the time mastering well, you conduced the tidy up. You know, this tidy up, um Ah. Feature that FEMA far hasn't even changed these 40 years. And these, But for me, it's easier toe use out. Try out. So you select these items. And as you can see, you have they have all the same respects. You could say that if you select Ah, all the elements out at the same time seems they they share these outlying outfitter inside of them. You can you can change it at the same time. But I like to as well toe another outlying out. So we are kind off nesting, are out trying out. And so we have control over the airspace off it off all the elements at once. So for this case, we are going toe for the 16 pixel greed, and we almost have it. Another thing you can do is if you want toe, have all the elements separated. The same with the same. You know, with the same space. We can even nest again. All these three elements are there in this case and going to rename this frame seven. It's a good practice to rename things in this case. Ah, we're going to call them, um and why Tim's Ah, this is the local. Yeah, And this is our browser. Yeah, we got it. So I'm going just to ally in these to the left. It doesn't matter, because when I put if we yes, sweets on out, try out here. You can see everything gets ah, lying to the left and separated the same with the same. Use it with the same height or with the same spacing. All right, so for this particular case and going to separate everything like 32 Orwell twenties. Ah, yeah. I don't get sick. Skimming good. It's 24 actually, 24 multiple of eight, and yet we we kind of have it. The good thing about this out elegant feature is that now we can move these things around. And, you know, if you need to change these, um, these elements, you can guest put this field here and and change these great color toe white, and we have the selected component. Okay, so that's the way off working. It seems that maybe you are loosen a little bit of time at the very beginning, shaping all these stuff together by that Avery and I recommend it because later on you, which you will save a lot of time. For instance, if you want to What? Some menu items here to just duplicate the like, this layer this, um, men whiting here dragging the old key. And you can create what? This It's out. But we can put it again so you can create a lot off. Ah, many white times, as with drugging, and it's going to be aligned with the same. Um separation between items. So it's a pretty cool feature, okay? And if you decide later that you don't want the I the icons there or yes, wanting to the right whatever you you can guess go head, undo it. Okay, so it's a pretty cool feet. Er, let's bring again our search here. So I helped you like these making these out tryout menu and let's go with this kind off in stock around car or tweet card or whatever. We're going to use the same techniques here. We are going to nest a little bit more, so let's go for it. 3. AUTOLAYOUT - Card: So now for the second part, we're going to replicate this card here. And as we saw before, the cool features it has is that it's kind off responsive to all the things you put inside . So if you might let see 1,000,000. Well, I'm going just to leave this there on duplicate this part mining. We have, like a prototype for mobile phone application about tweeter or kind off. Whatever you're trying to make here, Well, what we can do, It's, Ah, nest outlawed outs here. So we apply again the Outrage blouse Sign here. Now we we can just select the the separation between the cards with this school feeder, but it's cooler, even if you we insert some texts here that usually in your prototypes, everything is not one line titles can be. And as you can see, uh, as these car increases its size because of the text, the's one Ah, it's going down. It's like moving itself so we don't have to be measuring again. Ah, the individual elements. And at the same time, this is pretty cool bits because if we change here, the image or whatever we have like the same product in in 10 minutes. It's not going to take more time. So I have this playing call and a splash. Probably you know it and let's to art. Well, it's all right. And so yeah, let's Ah, let's make these these card. Let's see how it's done. Okay, so for these first, I'm just going to duplicate the background. You can guest go here that me and group this you can select, um, again. I You can just select kind off a gray light grey for the background that's created rectangle at some borders on it. Let's say 10 Danny scooped. And then let's put the background in white and we're going to start with this part over here, or we can start with the bottle. Let's start with the bottom. Okay, so for the bottle, what I usually do, it's Ah, I paint a rectangle. It's a these one on things. The call or toe. The color we want want it in this case is going to be this kind of client blue at some border radios. Remember, we can say this later, so this is yes, for starting to to design that part. Then let's out some text in this case is going to be with me. Let's see Nieto White Let's put it wherever we want. It doesn't matter really matter right now and then we're going to art. Um, feather icon. Let's see Twitter. Yeah, Good. So I'm going just to put this into white core again. And this Twitter is a little bit so big. So we're going just to recite it to hit in pixels. It's all right again. I'm going to group it so we don't see this text here. And what we can do now is select their three items and go again. This victim about that until I got this appear. So remember, you can just press here with their right click and go toe us out. Try out or gas breast. Sift a where in this case, I'm just going to press it here. And as you can see what everything is resized, you can control all the aspect off the battle. Okay? And this separation between elements, which is pretty cool because we can have these separation off 10 for instance. And these put the separation to 32. If if we want and yeah, let's do this. But this is too high. This is toe too big for me. So let's change it a little bit. Is going to be 16 10 and 10 and they're in the height we get from all these. As you can see, it's 47. But imagine you want to control you might and you want to control the height off your bottoms we got because all your bottoms in the design system or your you like it imagine it's, um again, this is out off there off the frame. So no, imagine you want to put in a specific height for this element. You can do it. As you can see, there is this control. We have used these controls a lot, but we have induced these ones in these one. What it does is out of height. Um, the height is based on the on the on these vertical parting. We are inserting here. So as you can see, if I put this, this height obviously increases. But imagine we want, like a fits high. Imagine our bottoms are 50. OK? Because if I put here 11 it's going to be 49. But if we go toe 12 it's going to be 21. So we might. Didn't you want you want exactly at 50? You don't want 49 or 51. You want 50 so you can do it. You can just override this sitting and you can change it to fix height. So you go here and then you press 50 and you have your still working out. Try out. But the height is fixed. Thes doesn't work anymore, as you can see. Okay, so that's a cool feet, er so you can override these this part at the same time, there is something we haven't talked about, and and we have seen it before, but I haven't talked about it. It's ah, when you make an outer layout component or group or whatever, you have the option here option or a centaur Burtka. Usually the figure my it's super intelligent and knows what to do when you select barrios elements. But imagine where you can You want to change it because you want your icon on the top and in the text on the bottom. So imagine you want to make a battle like these of something like this. You can just press vertical and the same thing we may before. Like changing the element. Um, the elements ordered, you can make it here and something interesting I haven't talked about. Um, neither is that you can position elements like this. This panel usually is for aligning items between them. And in this case, when you have a not a large out component here, if I pressed these elements, they are going to make, um, the behavior off the element inside. Off the out, try out. All right, for Let's seem practice. If I press her line left, it's going to, well, a lying here with this element, if the same thing. If I buy their or putting the center again, these arrows here is to move the elements inside the outlying out, up and down. And if we ah, we see what's going on here in the layers. Let's see this. This is going to be our icon. And as you can see, it's the text here and the icon here. So it's kind off in a reversed order. And if we press here up well, so written down as we can see, the icon has gone, um, on on to the top of the loyalist if we change it manually, as you can see, the these order effects how the outlying out, interpret, interpret, interpret eights them the position of the elements inside the A and the outlying out. So I just wanted to make that, um, toe let you know how this works. We can come back again to our horizontal in these gays. Let's go with 11. It doesn't matter if it for this particular case if we have 49 on its yes, for so you know how it works. So we have the s and it's pretty cool because this is cool, because usually we are us. The designers always like metering here, like I want 30 big cells. So but And we are with their with these rulers the whole day. And when these moves like 10 pixels again, we have to be like, how much and change it again. And this pretty time consuming, frustrating, boring, and I'll try out makes things much easier. So let's continue on going to create a re tangle for the image is going to be a obvious thing, going just to use again the honest plus black in to insert some cool photos in this case, let's go with the nater. Beautiful. Let's at some border radios. Some trick I have here for the border radios here, outside, with views like then. And if you use the same amount inside as you can see, it's going to be like like here, inside is is too much. So you can see it, right? That it seems like that don't fit even if they do, when you separate it, you need less border radios for your, you know? Um, yeah, for your inner elements. Okay, so something around that maybe seven, maybe six. It's It's better. He seems more natural anyway. Ah, we can adjust this to try to make it kind off. Same there. Let's our title for the title we have to assume in one is Let's let's copy and paste this text So I don't have to invent any other crazy test here. What happens? What I did here, I don't know what's going on anyway. Maybe it's Yeah, I know what's going on. Yeah, So Okay, so I'm going to live. These are today's I'm not going to make any further adjustments. So later on, we can see something that can happen to us when creating this component. Okay, so I'm going to do it. But on purpose, I love it. And now we're going to create our avatar. So for here we go again, toe want us. Plus, there are other plug ins for in 13 a lot ours and poor traits off people. But this school. So now we're going to duplicate this text to put our name and Jane ZOLL. Ah, sifter. And we're going to put it like blue, like as we did here and we're going to change. The is a little bit. Put this down. 14 is fine. Again duplicate. Same thing for the name. Let's pick Thescore and is going to be private. And we need an icon forties. So I'm going to use my beloved plugging Ah, further icons forties. It is going to be like being Yeah, this one group it. I don't know what's going on here, so I'm going to rip it. Yes, And since the goal Oregon too much our agree and we have it indecent is going to be like 16 pixels. Something around that. So again what? I So we have all our elements into place but everything It's free. Ah, we could start designing these, like aligning all the items here into the left and then measuring here. How Hamas distance and how much system between these elements. So But we have out tryout toe help us doing this stuff, so that's what we're going to do. So for me, the first thing it would be toe making out, like out here, remember, sift a And now we have this control so we can just put it into into the eight piece of grief if we want or whatever you're doing. I haven't some issues because all the elements are placing itself outside my main. I have this huge huge our border here and all the elements. Somehow they're putting outside the out, Try out our war. I don't know why. So, anyway, and what I like to do here as well it's to select. We have these outlying out. I'm going to start to rename things. This case is going to be location and this is the name, so I don't need to ally in it. I just go toa alta layout and then add it and everything gets align perfectly. And as you can see we have nine. And again if we want it to be a pizza. Great. You just go here and put eight off separation. We could go go higher. Or if you feel it's too much, we can go. Maybe with for something like this. It's up to you, your designer I and then what I want to do is to, and these is going to be the name, slash location and what I want to do. It's to make another outlying out here. This this is called nesting. I'll tell you have nesting or nesting out tryouts. This is going to be the avatar, plus name plus location. Okay, so in this case, we can again go here and all right. 16. It's free goods. It picks. Agreed. It's it's ah, adapted to it. It's good. So we have two options here. Some options. We have our bottom here. I'm going yes, to call it button. We have our rectangle with this hour photo, and we have far background and instead off. Let's call it the year or whatever you want to name it and we can do something here, which is ah, off everything to the outcry outlets sell if everything, Let's get it crazy and again out. All I got is gone. But remember, sift eight and we have everything without trying out now. As you can see, we have all our controls. We can handle the horizontal partying here We have our vertical parting here, so let's say we want into 32. Let's say this one as well. Like 32 in the separatism between items. Let's say we want 32 2 It's too much, but just for the sake. So we see these compared to this well, this is not bad for the title. For me is to separate it from here. And you know, I don't want thes element to be so, so, so separated so and as you can see this text its ally into the center, I want to tell him to the left so we can go here. But if I try to move thes element here up a so you can see I cannot I can put it there, but I don't worry there. I just want to be on the left and be closer. But I cannot do it with this whole Alitalia thing here. So what I'm going to do. It's instead off creating the whole out. Try out with all the elements like free. I'm going just to break this totally out that we made and what I'm going to do is select in these two elements, okay? And I'm going to create at first outlined out. And this is going to be the image. Well, the photo plus the title. And what? Why I do this Because now I can control these specifically Ah, and And I want to align this. No, I want to align this item on the left off these health dry out. Okay, so and now let's say we wanted to 16. These feels much better down there. 32 separation we have before the rest. I think it's It's all right. We have 32 here. And now what? Yes, we can activate again. The l try out Ah, frame has created here. So now Yes, I want the ISS. What is his friend? All right, this is another thing. So yes. Now we can select the tryout and and see what's going on here. So, between elements, let's say we want 32 again. So we have everything in 32 but now our title, it's well, position inside the layout. Try out. Okay, so and But what happens if we if I increase this or my gosh, you know, it's Ah instead of that this text spaces free, so we need toe, put some boundaries to it. And for that, what we do is there select the text here and we increase this till the end off our outlying out. And now if we right, it's going to be responsive. Okay? There is another way to change this, and it's on their text properties. As you can see, there are those three, um, setups for the text. This is the set up we had before, like running wild. If I right here, it's going toe increase and make were things is the one we want for this particular case, it's called out of height. What it means. It's ah, I set up a maximum with and when the text found find a limit. It's going to increase in height, all right, but nothing with. And there is this other one that it's fixed site, and if we right, we are not going to see our text But usually you want toe, uh, these for these particle. Our case or normally what they want is maybe toe let your test be free on the vertical space. Okay, so that's why were we have done so And now if we write more things here is going to toe get bigger. Consider. So again, let's make imagine, you are making like, imagine you are making like, an application we thought off to eat and everything you can you can do here a couple of things first is create a component or if you want toe later on, you want to make, like, overwrites all over the place. But I'm pretty sure you know how to make components and everything. So I'm not going to be entering there right now. But it's a good practice. I'm going to do it. You create these as a component in the in. This case is going to be called cart and what I'm going to do, it's ah, duplicate this cards as Eastern says Okay, I'm pretty sure you are familiar with that. Seems you are here and what we can do, it's create another outlying out and again we can again Ah control our spacing. Let's say 32 it's fine. And remember that the great thing about this it was if I delete this text and I changed his text and everything, um, is going to be fine. So that's insert some photos here? Yes, for the sake off our visual pleasure. That's up some plants. Well, not the best. Not the best anyway. But you get the point. And what's the nice thing about if putting these as a component, imagine I'm tired of this blue and I said, Okay, I want to change these flu for another color. So everything is going to be replicated here, or you might end. You are tired off thes bean icon. You can just come to the master component, then the lady it and you have only the name of the city off. You want to change it. So it's a good practice that your main component you created us there a za component and then create instances for duplicated data stuff. And the good thing is the outlying out. Keep some working, even on the instances. So you don't have to worry about creating this us a component. So I hope you like it. I helped you learn everything about how tryout you can be. You can be nesting component and out Tory out forever. I mean, you can complicate yourself as much as they pollute needs. So that's how it works. And if you have any comments or if you want to Ah, but your designs, what you have done with with that, don't hesitate to make it, put it on their discussion. Um, on the discussion, comment and yeah, Thank you. Thank you very much for your in me.