Figma: Autolayout v2 (the new version!!!)

1. Introduction: Hey, welcome to a new tutorial about the new auto-layout in fema. Fema has released recently in a completely renewed auto-layout version. So we are going to talk about it. Because if you have seen my previous videos about auto layout, now, it doesn't have anything. It's anything compared to the previous version. So it's good that we start almost from scratch. So we will be seeing some interesting features with these new outer layout. We will learn to make these tooltip. For instance. You see that you can make it bigger and you can position the elements, you know, the deep. You can position it whenever you want. The same thing we will make in this button, which is a responsive button. It applies the same methodology as, as this one. And we will be seeing like a new feature that auto-layout house these kind of super responsive designs. And, and how these can be translated later on to to kind of perfect goat with flexbox. Using flexbox. And as well we will be seeing how to make these responsive website, for instance, high half, kind of copy these OPO website so you can see that it's fully responsive. You can see the elements on the header, they are moving. And when it comes a time when it changes to kind of the mobile version. And you can see it down here too with photos and everything. Everything is kind of adjusting. So we will see all these things during our tutorial. So if you are interested in using these super cool revamped fitter about fema. Come on a journey into these fast tutorial. 2. 2 autolayout: Hey, thank you for you in me, in these Fostoria. So first we're going to see what are the difference between the all auto-layout. Penelope, If you have worked with it, if not, you can just move on a little bit farther and skip this part if you are new to auto-layout. So for the all workers or auto-layout, we have before a couple of bananas here. If you have the burden, you have these auto-layout with, where you could choose the, if you wanted the element's position vertically or horizontally. And if you wanted like without a wave, or if you want, if am fixes width and then add the padding outside all the elements and the vertical Pauling and of the outer layout and the separation between elements. And this was for the child. So you could you could position the tile on the left, on the center, on the right, and other tiles positioned differently. Now, this has changed a lot. We then new auto-layout banana. Now as you can see here, we have the, for the patent, we have almost the same elements we have before. Like if you want it vertically or horizontally. This is like this. And then we have diag, the separation between elements, which is kind of similar to this, as you can see, is the same icon, just raw data. And this is the bugging, which is this justi tube goes both, these two here, then and then. So now we only have one, but we have these new one, which we will see that you can choose between different plug-ins for each side. For it, you can put a different budding from the, for the top and different buying for the bottom. So now it's more flexible. And as well, these elements, these icon will bring us a popup that will allow us to position elements to the left, to the right, and so on. We have these new penknife here with, which is kind of working with constraints. We will see it so, but it caused new elements, this hot contents, fees with and everything we will see about it. But this is kind of new for the parent and for the tile. Instead of having this like this kind of alignment. In positioning icons. Now you have the resizing options as well. So we are going to see it in details. So let's go to the to start with working with it. We're going to start with the bottom, which is more simple down, make an adult it. So we're going to chain later on, we will make the tooltip red. So let us start with the bottom. So for this, what I am going to do is yes, creator rectangle and Azzam stroke to it live, let's say three pixels give it some border radius is going to be pretty straight forward if you have already worked with it. So let's put like a white background here. I'm just going to copy and paste that this, okay, so this just a random texts. It doesn't really matter. I'm just going to bring these elements out. Like make a copy of it. This is the, our regular icons. If you hope, I'm going just to use this cool blue and I use in all my tutorials, it's called failure icons. So you launch it and you can insert the arrow. So for this, I'm just going to insert this one and create a component of it so it's easier to work. Well, create a component of it. And just position it around here. It's okay. I'm going to bring this again. Further icons. I'm going to choose this several on down we have here. So this is pretty cool. And I'm going to create like component is going to make the same thing again. Alright? Okay, so I'm going to copy and paste it so it's in the frame. And well, we have our three elements and you can see if I write here, nothing happens is yes, they are independent elements right now. But if I select all of them, of all the elements, okay? And you can see I don't have any Auto Layout menu here. So what I do is come here, Right-click and breast as auto-layout, I usually use yes, the shortcut Shift a, which is for me easier. So let's press here, bomb, and now we have our auto-layout down. So this is going to be responsive. We start to, but we can see our elements are not aligned. And we can see now the new Properties panel here, auto layout. You can see the elements are positioned in the horizontal element in the array central I'm axis direction. And we can change that if we want these kind of weird button. It's, it's like a face almost. So auto-layout detects automatically when you create it. When do you apply it? We tried to figure out what do you want to do. So in this case, it's kind of perfect. But we see this text is not property alone. Ok, so we are going to try all these things here. So what this does it apply separation between the elements. Ok, so if you wanted like that or if you are working with an eight pixel grid, you could just apply like an eighth. Or the, if this is too tight, you can just go with 16, which I think is quite good. And as you can see here, that the padding around items is mixed. Okay, so when we created, when our tryout created out our button, our arranged all our button. We had like different padding for the top, for the bottom four from the left or from the right. So it said like mixed. If we put like 0, we will try to equal all the bodies around. We can see that now our button. Obviously has 0 padding surround all the, all the container. But this is what, this is not what we want. We could apply like similar padding. Imagine we are working with the 16 pixels grid, so we want to apply like 16. Or if you are working with a four pixel grid, you can go to 12. This is looking pretty good to me. But imagine you want to put more padding on the top. How do you do it? Well, you can do it here, separated by commas, but this is kind of, this is kind of weird. Do so another panel, new panel we have here, its alignment on padding. This is the one we want to use. Imagine we want on the top 80 pixels, this is going to be huge, but imagine you audit or imagine you want more padding to the left. So for this particular case, let's add it to the left. So this is pretty cool because now you can control the paddings independently. Thing that before you had to be like making tricks, adding transparent the spacings, making weird things, making really dirty stuff. But now with this new auto-layout, it's easier to do than ever. Okay? So we want to apply the same body into o, our surroundings of the elements. And what we want here, these texts, as you can see, is not property align. So what we want is to align our elements to the center. And now you can see that this blue stuff allow us to align the inner elements to the center, to the bottom. The thing compared to the previous auto-layout is previously, I could position this element to the top, these aligned to the bottom and these two center. Now it works like a hole. So if you, you can only position the elements up, in the center or down all of them. You cannot choose which one do you want, up or down, you know? So there are tricks to make it work. But I'm the workarounds. But now it works like a whole, OK. Another interesting thing here is if we resize this button, you can see that all the elements are moving at the same. They are like packed on the same way. Okay? This is where it's called packed here. If I say a space between, you can see that the elements that are spacing evenly. So this is great because it, it's like websites work when you are coding in them in HTML and CSS. This is what it HTML and CSS does. So before their behavior was kind of different on how a website works. So okay, we have our button. This as you can see now, we have like a fixed button, but we don't want this. What we want is to make it responsive again. So for that instead of fixed, you can see here it's saying left. But At the same time in same fixed. So what do we want this to hack contexts, hack contents. What it does is make the, this element responsive to the content it has, okay, so in this particular case, I think it's pretty good. Okay? So that's how our button, and this is our first approach to it. Okay, so now what we are going to make the tooltip for this, we are going to make almost the same theme as we did with the, with the bottom. I did, I do this because it's kind of tricky to make the tip. Okay, so for this I'm going to apply again a pixels. Here. I'm just going to apply a black. I'm going just to draw a triangle here. I could draw it, but with this, I'm fine. Let's rotate it. Put this into luck. Apply some border radius to be nicer. Let's say four. Whoa, this is too much. Maybe 22 is good. And this is too big for my tastes. So let's make a little bit shinier, okay, same thing. I'm just going to copy and paste this text outside of it and position it here. Okay, so now same thing as the button. Everything is independent. So for this particular, for this particular tooltip, we want to make like to separate two nested auto-layout. Okay, so what we want this to create to these two components, like auto-layout and then joined to the party to this tip here. So I'm going to press right-click and add auto-layout. So now is responsive to the things we are writing, which is great, what we want. But you see that the deepest not moving or if I want to position this t, If I have to do it manually and this is kind of, you know, not so, not so good. So what we are going to do, it's to your Into the party these deep. So for that, we select our previously framed is, I'm going to name these Tooltip box and these Polygon and just going to name it like tipped. And what we want here is our Tooltip box and our team to be joined together. So what we do for this is an alkali out, okay? And you can see our deep it's kind off nowhere. Yes. We can position into a center to the right and to the left, but it's kind of shitty. So four days, what I am going to do is create a frame inside this. Okay? I'm going to create a frame, inserted frame here, and I'm going to put the TP inside the frame. So. Now I have the deep super up. I'm just going to put it down. And let's say I want to put it there. Where do the, this frame trick, because we need some spacing here on the left. So what we can do its position, our element, our tip there, and then put it here. So the frame is going to allow to, to gain some space here and to remove these TPP, that's, it's like overlapping here. So this is good, is going to be our deep, okay, because this is the good teeth. Okay, so now we have our deep with our tooltip, sorry. Okay. And with this tooltip now, yes, we can control our, you know, how the deeps move moves. Okay, so this is pretty, this is pretty cool. Same thing as before. We can control the separation of the tooltip. But in this case we wanted like at 0, if we make these kind of weird thing in horizontal spacing, we don't want that. We want to be vertical first east, this element, and then the tooltip under, under the tooltip. So we have our two elements. And the good thing about this is the tooltip booths, okay? Within this width is responsive with a text. So we do this. And then we just want to always position the Tooltip on the centre. We come here and then we position it here. Okay, so we have two things already. So let's get started with a little bit more complex staff. Here, half a set of cards, nothing too. We're at. But you see here that they are completely responsive. Images are responsive. The texts are responsive. Imaging. We have like a higher text box here. It behaves like the website when you are using flexbox in HTML and CSS. This is the behavior they have, N as well. You can change their behavior here on the elements. If instead of put few container, I just say huge contents. Sorry Huck, convince. You see that it behaves like, behave like with flexbox. So this is great for four. Go busing your designs from fema to HTML and CSS. Now it's much, much, much, much better. Okay? It's more complex to use auto layout now, but makes it more complete. So we are going to, to replicate this to how to make this perfectly responsive design here. Ok. So for this, I'm just going to copy all the elements I have here. Because I don't want them to make it again. So let me just drop everything and Ungroup everything. So everything is kind of separated. As you can see here, I have everything separated so I can move everything around. And, and if E1 is going to happen because everything is separated. Okay. So imagine you have the saboteur name, location, this photo. With photographs in this case, it's important to set to feel or two feet depending what feed field works good in this case. Another important thing is, well, I'm going to draw the car behind this. So send to back. Let's say this is white. I'm going to add a little bit of background here so we can see what's going on. So just pick this background, all right, and then apply some border radius, let's say eight, let's save them. So what we want to achieve here is we want to control this spacing here it might enjoy working with an eighth pixel grief. So let's say I have this there and thus there and there and everything. So what I usually start to do it by grouping things into in auto-layout. So for this, I'm just going to press auto-layout and you'd say, wow, but this maybe is too ridiculous. You can just adjusted with this measurement tool here. Person ought. I like it to do with auto layout because it's, it's more, it's easier to me at the very end. So I can go here to eight pixels. And for this particular element, I'm going to add another auto-layout between these two elements now, the texts and, and, and the location and the elements. So, yeah, let's go with auto-layout. And why I do this, because I can control better the the distances and to be more consistent between a spacings with a spacing of things. So in this case, eight is too tight, so I'm just going to leave it on 16. And I say, OK, now I want this auto-layout thing, this name and location to be on the center. Okay, so what we do for that is come here and just select here the center. Okay? Now we have our photo here. We have our title, and we are kind of good to go to just we, we have loud like our vertical m elements here, right? So we have this component, this photo, this title. So we are going just to press here out auto-layout to see what happens. Bond. It's perfect. I mean, they, it has detected our spacing more or less, so I want to make it like 24 of spacing. We could go farther here, okay? But for this particular case, since I'm working with AP, mental eight pixel grid, I'm going to put like 424 pixels here. But I see something I don't like here. I want to this, instead of being 24, I want it to be tighter. Maybe eight pixels of 16 pixels. What, what can you do here? All right, you just select these two, these two elements, the title and the text. And what you do is you apply another outer layout. Okay, so you add another outer layout for these two elements. And now you can control the spacing between these two, which is great for this particular case. Let's see, 16 is too much. Let's go with 88 maybe is to type, but I prefer eight, Daniel. So I see now that here even, even even I like it, but I think we have more spacing on the side that on the other thing. So I'm going to apply 32 to our car. And imagine you want more padding on the top on and the volume. So here what we are going to do, it's both 4848 for instance. So we have our, our paddings, 32 on the left and 5248 for the top and develop. This is pretty cool. Okay, so we have our first car. I'm going just to name it card one. And I'm just going to duplicate this card. Okay? So they are huge, but it doesn't matter. The important thing is that you get it. So we have our three cards here. And as you can see, they are set up. Well, we have seen what this can do. But let's see are constraint and resizing. This is pretty interesting stuff. So now this element, this card, it's set to hack contents. We could, so it's responsive to two. As we arrived, you can see it increases. Okay. It's set to hack contents on the horizontal axis and as well on the vertical axis. If we set these two fixed, what we can do now is to change the the width of the, of the, of the, this outer layout component. But it's not working as you can see, anything is moving, anything is resizing. So why is that? Because our style elements, they are set to face width. Okay? There's something we haven't touched previously, but now we are going to touch it. So if you want this to be responsive. Okay, so let me just do this. What we want is to set the child elements to two different configuration settings here in resizing, ok, so instead of fifths, what we want is to be like filling the container, okay? We have like an imaginary space here, which is a budding. And what we want this, if we make it bigger, that padding is going to be the same. But the elements are going to be resizing its themselves till they feel that padding. So for that what we are going to do, it, instead of be fixed to our actual size, we are going to set this to feel container, okay? The height we can, we can set it fixed or set to feel container too. And this element, you see it's set to had contents on the width and in the vertical side. On the vertical side is good if we put this life hack contents. Ok, and this one. But this, what we want here is to feel container to. So when we stretch, it is going to to, to maintain that padding and when we bring it up and make it bigger, is going to maintain that buy in to so it's going to get increased. Let see if this is moving or what is the, what is doing, okay? Our image is working good. It's like increasing and just going to delete this one, these two, ok. So you can see our images is responding, but the rest of the elements are not. So what's going on here? Because we have this field container here, so this is good. But we have to go to inside of another outright out. So this is the title and the deck. So we know we are working. And now if we double-click again and we select the title, we can see that. Now we see what the problem is, is that our title is set to a fixed width. So for that, what we want is to feel container, to set this to fill container and this instead of fixed width, this is the text. Go to fill container to. Let's see how it's responding. Now our car and now our card is responding brilliantly is what we want. Well, I'm going to set this instead of, sorry, let me just undo this. What we want is instead of fuel container, I'm going just to fix the height so it doesn't get so stressed. So it maintains the height. And something is not working here. So what we want is on the yeah, this is good. So we saw what was happening here. My container, my main container here on the left, on the, on the horizontal axis, is set to fix because we want to resize it manually. But here it was set up to be on top, not to scale or not too hot contents. In this case, we want hot convinced they have mixed like the previous control constraints and precise and they are making here kind of a weird thing. But now what we can see is our element is working in. If I have more texts here, I duplicate it, and I increase this a little bit so we can see our car. This is working pretty good. Okay, so what I'm going to do is make like a pretty decent card. And what I'm going to do again is like duplicate discards. Discards. All of them are working pretty good. Okay, are responding. Alright, so what I want now, it's to put these three cards between a container and AF, auto-layout to them. So they are they behave like a hole. Okay, so for that, I'm just going to up the auto-layout. And now you can see we, if we do this, anything happens, even if all of them are inside an outer layout. So we have our auto-layout and now we see that anything is happening is not working. We don't have anything responsive here. Well, the cards themselves are responsive, as you can see about they are not acting like a hole. So what's going on? Let's see. We see here that we have like mix budding. I'm just going to adjust this to 40. So everything, it's it's some, it's similar. We can see that we can adjust this to, okay? So this is the space between elements. So the thing that we want is that these elements feet on all peak, all the space. So we no longer one. This, you see here, if we get these budding bigger, the elements are getting out outdoor our main shape. And so for that, what do we want? It instead of being backed the elements, what we want is the space between. So now you can see this is now set to auto. So now the elements are going to take the, this space, this space that we have three. And this is not going to allow us to, to change it. We can just set this again to a value and then is going to be like 20 pixels here and 20 pixels there. But if we wanted out, oh, we come here to packed instead of, but just set out to space between. And now what is going to do? It's effectively set the space between the elements. But you see that the elements themselves, they are not responsive. Why is that? Let's see what's going on with the with the tiles. Okay, we see when we select the style that it said to fits with, okay, so we are going to change this in all the elements, a set, this one. So we see what's going on. And we are going to change this to hack contents, okay? And we can see that it's making weird things. So we are going to undo and then we're going to set same thing as before. The field container, okay? We have seen that we didn't change the, this is set to a fixed width so you can see we can resize it. And the other ones are going to adapt in height and width to the, to, to, to pick the space available. Okay. So this one, I'm going just to undo again. And we are going to set all of them to feel container. Okay, so now we have life. They are filling the container and what's what's going on here is that, yes, now they are behaving like they are supposed to behave. Imagine you want more in between these elements. So the only thing you have to do is just go ahead and pump it up, ok. So as you can see, it's a little bit tricky to be playing around with a space between. Then here in the psi elements, put these two f_0 container and you can play around with it. So for instance, you could want like this in fist width, like something like that. And those are going to be responsive. So this one is not going to change when I, when I move it, but the rest of them are going to be responsive. It depends of of the, the effect you are seeking. Ok? So if you want these three cards to be the same, this is the proper way to do it. Let me just put this instead of this width to feel container again. Okay? So they behave like responsively. Another thing important here to take into account is, as you can see, if I do this element super, super large, those elements, stick here. What if I wanted them to to, to build larger, to increase sighs automatically? Instead of here Boolean hack contents, do yes, put feel, fee container. And what it does, it's, it's, this is going to try to seek all these n. We can put the same thing here in Philly container. And, and now if I just did this, you can see this is pretty responsive. And you know, it's going to pick the height of the larger element. Okay? So it's up to you. How do you want to work? So we have seen everything, how to, how to make like from a simple button with just a simple auto-layout here with nested outro layouts for our tip and our tooltip. And here we have like a more complex version and we have worked with how these fluid container words, hack contents works. How content is that if all one, which increases its size in height or height or width and width, fixed width and as well, these pact and a space between inversions. Ok, so let's jump to the last time and final exercise here. 3. 3 responsive: K. So in this part we are going to see these, how to make this responsive design. We saw on the previous, on the introduction. As you can see the menu when it comes to point, it behaves like a mobile version. And you can see that the text is adopting and the images are, are adopt in and as well. The, these images down there are kind of making a breakpoint maybe is to a saturated. But you get the point right. What we are trying to achieve these targets to achieve here. At the same point, I like to see you, I would like to, you to see that here. You see that we have like a responsive menu as well. And then it breakpoints bond. And then we have our hamburger menu. Okay, oh, our hamburger icon there. So how to do this? Okay, so I'm just going to duplicate this. And, and that's going to destroy or everything I have done here more or less. Okay. So I don't have any auto-layout anymore. And here I have on an auto-layout, the media's break, everything. I'm not going to make everything from scratch. I mean, these are regular text. These are everything is kind of regular urges, the squares, icons texts. So you know how to do that already. So I'm just going to pick this color for four there. And what do we have here is the as the background for the menu and icon and regular text. You can see it here. Ok, so for this, what I am going to do to make this menu select all the items, not, not the background, just the items. So remember you can just drag, select everything and with the Shift key, then you deselect the element you want. So now you see we have everything selected. And again, what do we want this right-click, Add auto-layout or shift a. And we have our auto-layout there. Okay? So here we have seen that you can control the spacing between the elements by default, I'm going to set these two. I don't know. 72, which is a multiple of eight and feels good to me. I'm going to align this to the center. And you can see that the text is aligned to, in these auto-layout, that text is aligned to a dopant I wanted to align to the centre. Okay, so let's align it to the center. And at the same time, I want these elements to behave that when we are stretching it, that element, all the elements a stretch and go to the center. Not, not, not, not go to the left, just, just to the centre. So that's why I'm putting this as well. Okay. So I'm going to have this background and add another outlet out. So this is going to be the tile. Okay, so we have it. And now we have like eight pixels between. This is not important actually. And we have like mixed paddings here. Okay, it's good. 1919 to 211. It's, it's fine. And something important I want to do here is when we select this, it's, I want the elements with. Well, this is, this is not important, but something important here is instead of part, what I want is the elements with a space between and you don't really see the difference here. What if, now we do this? We can not notice the difference neither because we have this setup to hot contents. And if you haven't to hack, what it means is if I increase this, this is going to be increased. But for this particular case, what we want is to set this whole header to fixed, okay? To be fixed and to be pinned to the left. So when we are resizing is going to be B on the left and the I V elements are going to be a stretched out. Let's see, something that's not working here. Okay? So now instead of fifths, we have to put it fill container. That's something you are going to work with when you change something on the bar and then you have to change it on the child to. So we have now, let's check again. We have like a fixed with four of header, which is something we want. And our tile has a field container. So it's going to maintain the space on the, on the sizes on the different sides. And let's see how this works. Now. You see it's doing it. All right, but it's keeping this margin here and this, this margin there, which is kind of cool off what we wanted. But what we want as well, it's to go from the left and to, and to the right. So let's try with left and right. It's keeping moving on the left. So for this particular element, what we want it, I could do an auto-layout with diesel element. But for this particular case, I don't want it because I want these to be responsive like this. Let me just, so if you see the elements are taking this space and maintaining this space. But that's something that then these elements are like, you know, like at the esteem between them. And to do that, we cannot do that if we put those two elements in the same auto-layout. Because auto-layout sets not auto paddings from for the two elements. Okay? So, so in this case what I want is to make a group of this instead of an outright out. So this is going to be called a header. Okay? And let's see how this behaves. Well, this is looking pretty good to me, but that's something here that it miss is missing. Here I have fix fits higher width. And instead of back, I want to put a space between elements. And let's see what's going on now. Now the elements, as you can see, they are really, really, really responsive. Okay? And something I did means to do. Something happened here is to align these elements to the center. Okay, so we have our header and now we have here like a text. And you can see I have put this desk with a fixed width but with different heights. So if we keep on writing here, is going to give us another line. But you see that this had to say this is not coming down these background. So what we need to do for that is to select those two elements. Again out on auto-layout. Now everything is in place. But what happens if I do this? Again? Nothing is responsive. Fear it's responsive if I arrived. Now is not. Why is that? Because as you can see, outer layout has changed the behavior of this. So I want to be, to have to go to have like a fist with this element. I want it with a fixed width. Ok? So for this element, I'm going to select it and I'm going to sell it to sell it to fix width. Since our auto-layout already has here a padding for the form the left, we are going, we have to make some adjustments here. So let me just put a hundred and one hundred. And then I'm going just to adapts is adjusted manually. Okay. And this, and this, everything has changed again here. Well, OK. So this can, so I want these margins to be on output. So something was wrong here that it was pushing. The DevOps was, was pushing. Ok. So if I do this nothingness responsive yet, but now if this element instead of fist width needs to be on field container. So now we can play around with, with, with this N. If we do this, nothing happens again because we have to change this to. It's not working this width container, Okay? And now it's working UC, so both elements need to be set to fill container, okay? And this element to fist width and then all it on the left. Sometimes it's going to take you a little bit of back and forth going and coming here to Fisk had Cortes what you where you want to align things to the left, to the right, left and right. Ok, so for this particular case, we want to be aligned to the left and right. So when we recite this, It's, as you can see, is working, but we didn't do this with our header, so we need to put left and right. So those are the bins. And what it does is that when you resize your frame is going to make the elements to be resized from the left and from the right. So it takes the buy-in you have and then adjusted for this, we see that our header is working in, our menu is working. And and, and you note that notification is working. Okay. So I'm just going to add the s, This photo, a couple of pixels here. And these are simple texts. What I usually do is make as well like an auto layout of them. And I'll tell you about default aligns everything to the left. And what we are going to do is come in here and align it to the center, okay? And the spacing, the spacing between the elements where I want this eight pixels. And I'm just going to bring this a little bit up to, let's say 488, it's 46. Okay. So we have our image here. I'm just going to adjust it to the size and is set to feel. So let's see how this image behaves. When we, the AI behaves well, we see everything is moving but our test is not. So what are we going to do here? We are going to put this instead of aligned to the left. You see that the text is staying on the left. And it became these, these space between here and is not moving. And we wanted to move to the center. So we are going just to between these two, the sender, okay? So now if we remove it, you see it's superb. And is doing what, what do we want? Okay. Well, this is just a photo. This Dido, nothing fancy here. Something that I want to do, it is to make an auto-layout with these three images here. And well aligned in the center. I'm just going to align because I've been moving my IV movie Maya are worth so much that. It no longer has a normal width. Anyway. It's, it's OK. And these elements, I want to make an auto-layout with them too. Just because I feel like to keep on practicing how to position elements here. And you can see, and you can, this is great for controlling your spacing. As I say. I know I repeat myself a lot, but these things are important and I see too much separation here. So I select these two elements and I'm going to make another outlier out. Why? Because I want to control that particular Bayesian and I want less space here. And let's say I only want eight pixels, okay, so this spacing is eight and from here to there is 24. Okay, because we have, we have it in another auto-layout. I'm going to align these elements to the center as well. So when we resize our arbor is stays, stays on the center. So I'm just going to do this. And for this I'm just going to do the same. I'm going just to bring it to the centre. So when we arrange them, when we resize our, our, our work, let's see how this behaves. Everything is staying in the center and this is, this is increasing. Its, its, its height, which is cool. So we, what we want here as well is that this element is start to be resize like, like that when we make them smaller. Okay? So for that what we want, it's, we enter on the tiles and you see that it has fits with. So we want to fill to change this to feel container. Okay. And the feed side, we want them as well to be not a face height but to fill the container. Okay, so we have all in field container and fill container. What happens if we resize this? Let's see what's going on and nothing happens. Why is that? Let's see what's going on there. Okay, instead of back, I'm going to big like a space between. So these elements takes all the spacing. Unbelievable, okay? Me inside this element. And now you see again that we have the spanning set to auto. And here we have our element beam to the center, which is cool. And, and what we want here, it's maintain the left and right by the end of the page. So instead of center, we're going to put these two left and right. Let's see how this performs. We see that the elements are moving, which is good, but they are not escaping. So when we select again the element, you see when, when do you, when you tax something, next time is kind of change. So for this, we are going to set this to feel container instead of fixed. Feel container and Finkel Dana, everything is now set up to feel container. So if we change this, now you see that it's fully, fully, kind of fully responsible. Responsive, sorry. Okay. Everything is super smooth now and everything is going super fine. So what I'm going to do is yes, duplicate this and make a mobile version of it. So for this, what I do is yes, two-sided all 380 or whatever, that size is perfectly fine. Okay. Many ways enamored. As you can see, these texts is too big. Well, not to be bought. Yeah, well, it's two week actually. So I'm just going to change kind of fast. These 424, this is going to hang the desk going to step down to 18, and this is going to be a step down to 14. So we have like more. And I'm going to align these to a center. These, I'm just going to adjust it there. And these 40 is going to be just here. So we have that. And for the menu, what we are going to do, it just open a little bit our, our how to say it, our header. And I'm just going to delete all these elements. These wants to, and what do we want? Easiest to insert. And yes, one, these two to be a little bit here, since we have this space between here is if, if I add elements, they are going to be, you know, like say bar eight evenly. So for this particular case, I just want the in. Oh, not this one. I want feather icons. And let's set for a menu. Cool. I'm just going to group this. And I'm just going to bring this up, put it here, group it, and just change this to white. Not too much complication here. And I'm just going to delete this bac. Okay? So, so we already have our header. And now we are going just to make these tinier. So everything fits C 240. And these images, instead of, this is a nice feature. Instead of aligning them on the horizontal direction, let's put it on the vertical direction with auto layout. And we can make this bigger and then expand this section. We can even make it wider given the whole, given something like that. And let's align everything to the centre so fields better. So we have our mobile version. Dan as well. And let me just rename these to mobile, but I'm going to put mobile too. So and desktop too, because I already have the same names here in. I wanted to show you this plugin. So let's see how this works. Well, this is not working. So, so what we want here, it's instead of half contents. Yeah, I made it here and auto-layout. We don't need it actually. Oh, no. Yeah. We don't need it. Yeah, we did this. This it's enough. So what do we want this big these texts outside? I made this mistake of of making the assassin say auto-layout the background and the density is, this is not necessary at all. So what we want now is in the constraints, put their background image to the beam, to the left, to the right. So when we make it bigger, you can see the, you know, the images and getting bigger. So that's what we want. So now if let's see if it works. Yeah, it's working. But these team is not working at all. I mean, I have to increase this sum for another dad. And when we come to more wire, so it's come a little bit down here. There are ways to weave auto-layout. We could like make these more efficient. I mean, when, when these when these component, it's not so high, that leads element comes up. And then the when, when, when this goes down, this goes down. But for this particular element, I don't, I don't really need it ran out. I does want to show you that how a blogging works and how to make kind of a responsive designer here in Fiqh. Mad at, that works pretty good. There is this plug-in called responsive. Its use is pretty simple. What do you do? Do you select the, the responsive designs you have and you select them as input frames. Those are going to be your, your, your main designs, let's say. And then we need a responsive frame. So I'm just going to paint here a frame. I'm just going to put it on 111000, one hundred forty nine hundred hate. Well, the heat is going to be like the mobile version so we can see what is going on. And this is going to be our responsive design. And we just add their frame that we have selected the responsive we added at responsive frame bomb. So we have already here I've designed, but this will work. Let's see. So I'm going to make a little bit bigger this part. So now what we do this, we can see that everything is kind of changing. You see, it's doing it, alright? And we can go till their mobile version and everything is behaving as expected. So this is a pretty cool way to make lag responsive designs. Of course, maybe another breakpoint in the middle between these two would be desirable so the hamburger menu doesn't appear so early. But, and, and you know, maybe this doesn't need to gum so early. Neither. But you get ADI, right? So I hope you have learned all these, all these things about faeces. We'd huck contents, the space between elements and all of that. So see you on their final phase. 4. 4 exit: Hey, thank you for getting til the end. I hope you enjoyed these fast tutorial. Well at the very end was a little bit Standard version of it. But this new fake Mao auto-layout has a lot of options and it's a little bit tricky. So you have to work a little bit we did to adduce to two really, to really get over it. So I encourage you to make some of the examples we saw here. So I really think it's a nice practice to make these tooltip and a button and then gone to the cars and tried to make them a responsive and make the behavior you want to have. And if you have any doubts or your, or your prototypes are RN working or your auto layouts are and working as expected. Gas. Let me know in the comments and I will try to help. So thank you very much. And yes, if you are interested in more courses like these or tutorials like this, just follow me and I will try to get you update it, to give you updated with new tutorials. And and as well, if you are interested in seeing something that I don't have in the tutorials related to 50K Mao or to design. Just let me know and I will try to make a tutorial if, if it's treatable. So thank you very much for seeing this tutorial. Bye.