Figma auto layout and responsive design tutorial

hi everyone and thanks for being interested in this tutorial about auto layout auto layout is i can say i can safely say that it's one of uh the most interesting features in figma uh kind of like uh call it special feature killer feature or you know as you want to name it but it's a pretty good uh feature or a way of building our layouts and elements inside our layouts sections screens and so on and making them behave in an automatic way okay that can make us uh or give us the ability to easily make changes and build them in a smart responsive way okay so that is actually the meaning of auto layout meaning automating the way that our layout behaves i guess that that is the meaning of it okay so we have here an auto layout and we are going to build something like that this comment uh element or component uh and we can easily as you see these elements are responsive and we can do it like a reply which indents inside and we can do this a reply of a reply and we can do this there reply of this one so you know we can play easily with the hierarchy of these replies these the way that these comment elements are laid out and one step at a time let's we will get to it later on let's start and understand how elements behave in an auto layout and i think that the best way to do it actually is um to just show it with simple elements to begin with and this will give us a lot of understanding of how actually elements behave inside an auto layout so i have here another screen a mobile screen and it doesn't matter actually mobile desktop tablet any other platform it really doesn't matter it's just to show how these how the elements will behave inside an auto layout i'm just going to throw a bunch of elements here okay and just give them different color just to make them look a bit different from each other and something very quick and easy like that okay so i'm selecting them all together and i can add an auto layout meaning i am framing them and auto layout by the way is a frame okay it's a frame with an auto layout behavior you will notice as i will create the auto layout that the icon of the frame is not gonna be like this hashtag okay uh it's gonna be uh different and you will see it in a sec so i can add auto layout in a few ways i can right click and click on add auto layout i can shift a either mac or pc it doesn't matter and i can click the plus button here which adds an auto layout so now we have an auto layout if you see the icon of this frame which hints us that this is an auto layout a vertical auto layout okay an auto layout can be easily turned into a horizontal auto layout which i will show here meaning if i will make this frame bigger once i can i don't know if it's big enough but anyway if i click here so you see the yes it is it's okay and you know they it's become a horizontal auto layout and a vertical auto layout which is pretty easy now let's look at all the configurations that we have inside an auto layout one sec okay so i'm clicking this auto layout actually i am selecting it and i see here all these configurations and let's understand what they all do this one we already understood horizontal and vertical so we got it we will see in a minute on a few minutes how uh it serves us very well to use it in different in a different a bit of a different situation um this is the actually the spacing between the elements in the auto layout so if i do let's say 10 so i make a small space between demos of 10 pixels and i will make it 50 it easily changes to 50. now if i am double clicking one of them i can easily change the locations of the element inside the auto layout by just dragging them up or down and when it's a horizontal auto layout i can drag them left and right as you can imagine we have this behavior already if you are familiar with it or not between two or three elements in figma that when they have equal space between them we can just select them let me make a different color we can select one of them and can just drag them and easily change even without any auto layout or any other thing between them but that's but that doesn't matter right now because this is our auto layout and this is what we are focusing on right now so let's give it a bit of a smaller space 20 and if i double click this element and i want to make it higher so you see that the other elements or the auto layout still of course respects the spacing between them and this is already the beginning of automating our layout the way that our layout behaves meaning we don't have to reconfigure the space or all the time know how many pixels exactly we had space between them and arrange it each time um again and again okay so that's something very easy and pretty i guess quick to understand okay and that is the way that we can configure it either by just um writing a number or we can actually make it bigger like that and just uh you know what i'll get back in a sec i will i will do the fixed behavior and the other spacing behaviors in a sec okay let me just uh go over a few more things um this auto layout as you can see i can drag easily an element out of it and i can push any element i want straight back into it anywhere that i wish okay if i duplicate now by the way the alignment in the auto layout is being done here as you see you have top left mid and right you have center left mid and right and you have bottom left mid and right right now actually if i will change it you will not see here any difference in i mean the only thing that you will see is this element because it's the only shorter one or the narrower one of all so that is the one that will actually jump between uh left center and the right okay so this is the way that we align elements inside the auto layout double click on this element if i duplicate it okay control or command d i just duplicate it it jumps and my auto layout grows okay it jumps down it adds another element which it doesn't matter which one of them control or command d okay it adds another element and keeps the spacing and the way that all this auto layout actually behaves okay now what happens if we want let's say these two elements um beside each other meaning we want here to have them one after the other and we want to keep the structure of this auto layout how do we actually do that so let's say that i click on both of them and i select both of them if i make them a group a frame or another auto layout to themselves okay so this auto layout will refer let's do them a group control or command g now this is a group inside this group i have these two rectangles you see now if i just select one of them see that now i can move it to where i want because auto layout refers to a group as one element inside it so inside this group actually i can throw even another element i can just drag it inside this group and when it's inside this group see that i can just move it and place it wherever i want because this group is a zone to itself okay it's one element inside this auto layout the other thing that i can do is i can frame them okay i mean it doesn't have to be a group i can just let's put it like that and i can frame them let's give it a frame selection and we can actually ungroup this group and these guys now are inside a frame now this frame of course i can make it let's see how they're configured this frame one second sorry okay that's a left and i can grow this frame here i can grow this frame you see like that and for the autoload auto layout actually the frame width and height is the definition of the size of that element of course i can play with how these elements behave inside this frame and adjust them accordingly to my need okay each case to itself another thing that i can do okay i can shift a or add an auto layout and look what happens now it's a horizontal auto layout before it was they were in a vertical position both of them and i could just give them an auto layout click on the horizontal and that's it and then i have them both side by side okay so that is a very easy way to do it now again if i want to have these two okay i can just shift a or click here to add an auto layout oh it doesn't let it here now okay i will just shift a and i made them an auto layout click here and now it's a horizontal auto layout if i want another element inside this auto layout remember that here if i control d if i duplicate one of the elements it just throws one underneath it with the same spacing same goes for here double click ctrl or command d and boom we have another one beside it so this is kind of like the general idea of how elements behave inside an auto layout and there is another thing that i want to show and make clear okay so this auto layout now you will see it's in a hug contents configuration meaning what does it mean hug content it means that it hugs or it's actually in the size of the elements the bigger elements inside it okay look that now i can just give it a fixed width okay i just stretch it okay i make it wider and now it's in a fixed width but you will see that you see it's fixed and that is the alignment inside of it so it is fixed but you will see that the other elements they are not stretching or being bigger with uh with uh the fact i mean they they don't refer to the fact that i made this auto layout bigger so if i double click this element now you will see that it's in a fixed width if i give it a fill container behavior look what happens now it fills the container because this auto layout is the container that have all these elements inside it double click on this one same thing now it's in a fixed width fill container now look what i can do even with these guys this is an auto layout okay these are the pink cubes okay pink cubes yeah so now it's in a hug contents and now i give it a fill container again you will see that actually nothing happened with these elements regardless the fact that i made it wider and give it a filled container behavior why why because now the behavior of the elements inside it is packed packed it means that it's stacking the elements one after the other or one below the other if i will give this auto layout a behavior of space between look what happens now it means that it distributes the elements inside this auto layout okay and addition it distributes them with equal spacing between them okay so now actually you will see that it's responsive you see when i play with its width when i make it narrow or wider so they respond to this you know making it uh narrower or wider and more than that if i will add more elements inside this auto layout you will see that it distributes each element that is being added to this auto layout it distributes and give them equal spacing between them and you see that now it's on auto okay it's an auto you see spacing between items is automatic the moment it will not will be automatic that means that it has a fixed width okay here i will give it let's say 10 you see so now it is not automatic anymore and if i wanna make this auto layout come back to be hugging its contents it means that here i can give it a hug contents behavior and you see it hugs the contents which is inside of it so this is how i can play with the behavior of elements either being distributed in equal spacing inside an auto layout or being stacked one after the other now let's say that i'm gonna have here three elements okay and i want these two to go to this side so i'm gonna click these two i'm gonna group them frame them auto layout them okay i would just auto layout them make them an auto layout and i'm gonna give this auto layout a behavior of space between and now see what happens so i have this auto layout which is actually one element inside this auto layout it's one element here and another element here another way actually to do it if i want to on a different situation we will see how to do it in a different situation if i give this one fill container notice that it pushes these two to the side it fills the container okay and minus of course the spacing between them if i will grow the spacing between them so this is the way it's going to be these two are not going to change because they are inside their own auto layout if i want to change the spaces between them so i can just give them let's say 50 and then they push this one to the side so the general idea is actually to know in each case what is the behavior that we are expecting from our layout okay and that's a very easy and comfortable way i think quite quite easy let's put it like that to understand it and this is the general behavior of an auto layout i think it's kind of like the base behavior of it now i'm saying that let's uh maybe start and build the actual element and we will see we will learn more how to use it while we are actually building it by the way another thing is imagine i want to show you another example imagine that we have a website okay i'll give it a 1920 by actually the height doesn't matter so much let's give it a 3 000 height and what doesn't change usually is the width and the height of course is according to our contents so we can actually have a header let's put a header here um for now let's give it kind of like a very light background not a very nice one but anyway it doesn't matter let me just give it this one a yeah i just want to see our header and now imagine that we can actually build our website in sections let's say that this will be section one okay section one and i will give it a bigger size yeah okay so that's a section one and let's give it um a color yeah section one can be white or you know what let's give it kind of like different okay so this is section one and this is going to be section two let's give it a bit of a different color here this is section two now i'm putting these in an auto layout the header i can put in this auto layout as well if i want to make it a fixed positioned one okay and if you're not so familiar with fixed positioned element in figma i suggest that you will see the tutorial about fixed position elements my other tutorial which is in this channel um it depends so if i want to make it a fixed position element i better not put it inside the auto layout but it's an easy decision which i can take later if i do or don't want it inside of it and by the way there are other kind of like responsive behaviors uh to get a better idea of it you can see another tutorial that i have here about constraints which gives you a good idea about responsive behaviors of elements within frames which is i guess if you haven't seen it yet i suggest maybe even you stop this one go and see the other uh the other tutorial which will give you a better uh idea a better idea about responsive behaviors and uh get back to this one just suggesting anyway so i'm gonna put these two uh in an auto layout okay shift a now i have here an auto layout i will call it sections okay i want another section i can duplicate it easily control d and i'm gonna have another section control or command and i'm gonna give it let's say a different color and so on okay so imagine that you can actually let's say that you can build different sections of your website let's say uh most popular think about like most popular uh let's say um products and uh most trendy products and so on you can build other sections here okay outside of the website and each time you want to add a section let's say um you can just design it here and if i want to add this section let's call it section 4 that's 14. it doesn't matter same same i can just push it either here or i can change its place to here or here and see how easily we can actually do it and i'm reminding you that inside each section you can do whatever you want you can auto layout the elements inside of it you can freestyle and give it any design that you want but it's still a section in the website of course i can make each section bigger or smaller okay by the way by giving this one you see here the constraints i'm giving it a center and here also a center that means that if i make this one smaller meaning to horizontal smaller and if i'm making it you see it all the time stays in the center so constrains also very important to understand and as i told you i have another tutorial on it so let's say these sections are great and if i want to have let's say uh spaces between these sections i can easily do that which right now it's on zero so i can give it let's say a 50 pixels you see between them and imagine if the background actually is wide and the sections are wide you can easily give it a higher or a smaller space between your sections so you can also plan a website and auto layout all its sections and build it very easily okay okay so now uh by the way i'm not sure that uh auto layout is gonna be just one tutorial i'm pretty sure actually i'm gonna do some more uh tutorials about auto layout this is the first one of them and i think that uh of course one tutorial to understand completely auto layout or like i don't know two um let's say to gain some experience with auto layouts so only one tutorial is not enough but anyway that's a pretty good start so let's see how we build actually something like this with what we have learned and see here okay we already saw here how the elements behave inside an auto layout and let's try and build something real so i'm gonna do another mobile screen and let's see how we build that i'm gonna do it really quickly take a circ give it a that's okay i think kind of like 36 by 36 is pretty fair okay and now i'm gonna use my content reel and choose an image to it just choose any avatar honestly it doesn't really matter and okay i'm gonna give it a white stroke why a white stroke because i want to add a shadow and i want this shadow to um let's do something like this good you see when i give it a white stroke then the shadow kind of like gives it a nice uh difference i think that yeah that's okay okay cool now we are going to give a name not that big of course but uh that's the general idea and i'm gonna give it a aligning to the left and the size of it is going to be like i guess 20 is good maybe even 18 that's enough and give it a medium of course you can choose any font that you want any design that you want you can make this circle bigger smaller with stroke without stroke of course feel free to do whatever you want i'm just showing you i mean like just to understand the logic and the structure of how it's built with an auto layout okay i'm gonna take these two and i'm gonna shift a and give them an auto layout behavior now you see that this one actually they're kind of like aligned to the top why because the default alignment inside an auto layout is a top left if i will give it mid left now it's okay we can easily change the spacing between them okay i can give it a bigger space or a smaller space very easy okay so that is one section in our comment um template let's put it like that or comment component as you want now by the way to give it just a name you can use content real if you knew or not just to kind of like throw names text full name let me see jane okay jane sounds good good so we have a name of course you can write anything you want uh and that is great now we're gonna have our text we're gonna add this in a sec i'm gonna show you how and i'm gonna show you another thing in an auto layout of how it's right to do it so i'm just going to give it a text i'm going to take lorem ipsum honestly some people hate it i don't like it always but you know sometimes you just quickly do a good job and i'm fine with that so sorry yeah let's give it like that and by the way okay now that's something very important when using a text box a text uh it's not yeah it's a text box inside uh or a text area inside an auto layout so this is very important see now that this is in a fixed size okay in a fixed size by the way if you will notice when i will add lines to this text area see that it doesn't respect the the amount of text which is in it it just stays in a fixed size in an auto layout this is not what we want okay in an auto layout we will use one second let me just fix it we will use um the behavior of a an auto height okay when i click this photo height you will see now what is that oh we still have a space here you will see that now when i add text to these lines you see now it respects the height of the text area and this is exactly what we want we can leave it like this for now it doesn't matter and now we're gonna have a like reply and it was written yesterday which is okay so let's give it a like kind of like what you have on facebook let me just give it a regular and this one will be yeah bold is okay um you can use either 14 or 16 depends you know in each font um i guess that yeah from 14 and up is okay i would either say 16 in some cases depends on the font and depends of what we want to achieve i think that here i did 16 let me see 14. that's the same thing actually okay that's okay anyway so i'm gonna put these two inside their own auto layout okay now we can call this one avatar plus name and we can call this one actions plus time we will add the time now double click on this one ctrl d we have another one beside it so i'm gonna give it a let's say regular and i'm gonna give it kind of like a grayish color and right here yesterday good okay so that's fine um and we will change this to rip light another thing which i want to show you i didn't show before but i'm going to show it right now as we are doing this one um look at that i mean i can throw let's say a button a text which i want for a button okay now this text if i add let's give this kind of like regular okay if i add an auto layout to a single element which i can and we didn't talk about also the padding i will talk about it in a second the padding of an auto layout you can add padding to the auto layout itself as i did here actually and let me show you you know what i will show you here i will get back to the screen and okay and let's see how uh it behaves with a padding okay so second yes so i'm gonna give this auto layout depending you know what i'll give it a color oh it has a color so i'll give it just something like that only that we can see it's padding okay because when it's white on white you will see it a bit less i guess and now i will give it a padding here of let's say 20 pixels so now you see it has a padding of course if i want to i will get to this one in a sec um i can choose different palette or let's say give different paddings uh on each side top bottom left and right so let's say i can give here 10 and i can give here 50 if i want to and i have a reason to it so why not that's okay so i can play with different paddings as i wish now this one which is an auto layout look at its configuration it is on fixed width if i give it now a fill container and i remind you that this is its container okay this is the container that contains this auto layout and i will give it now a fill container you see it aligns with all the other elements and now it's behaving as all the rest of them more than that i can even keep on designing it a bit if i want to i can give it let's say round corners so you see now we also have round corners to our auto layout and so on i can give it a shadow etc you can design it as you are designing a frame in general okay so uh let's get back to here and if i am giving this button okay an auto layout so it's a shift a see that in default it already gives it a 10 pixel padding from each side if i want to make it look like a button i can give it a feel let's say give it a background color i can give it different paddings okay i can give it a padding here of 30 and 30. okay and now i have it more as a button shape i can also give it round corners its height is 39 so let's give it 20 and now we have a round cornered button if we want to do a few buttons okay like chips for example if i double just duplicate it make them an auto layout and i can easily just duplicate control or command d i can easily duplicate another one and if i will give this one a shorter text so you see that it respects the size of the text inside this auto layout i'm reminding you that this is an auto layout to itself the only uh space that we have here is the padding that we gave it here i mean i can give it let's say 10 and 10 and then it's going to be like this of course it doesn't make sense design wise but anyway i'm just saying that we can if we want to okay so i'm just double clicking it ctrl or command d boom i have another one and i keep on so anyway so that is um and how to make a quick button with an auto layout let's put it aside here it doesn't matter for us right now we have this one in an auto layout and we can put all of these now okay we have an auto layout here we have this text area and we have an auto layout here i'm gonna select all of them and make them an auto layout shift a and now we have them auto laid out okay so i can easily if i want to change the spacing as you already know and we can do something like this now if i wanted like more of a framed comment okay second let me put this aside okay now our auto layout now is in a hug contents i'm gonna give it for now a fixed size it's fixed left is the alignment inside of it double click on the text area and the text now it's in a fixed width i'm going to give it a fill container so now it fills the container okay now this one can stay as it is this one can stay as it is and that's okay now see that if now i'm gonna make it bigger or smaller you see that it respects of course it can't be smaller than it is but it respects the height of the text area okay so it's already behaving in a responsive gray responsive way which is great now i'm gonna give it a feel let's do like as i did here now it has a fill i'm gonna give it padding you see now as a default because we did a few elements it comes with zero padding let's give it a 20 you can even give it a 15 that's okay good now i give it uh maybe some round corners a bit too much i can give it like that that is okay good so now we already have our comment build in an auto layout and it's great now i forgot on purpose this time i wanted to add this um this actual three dots menu icon i'm going copy it and just put it here on the screen now i can oh yes i wanna just put it inside this auto layout okay of the avatar name so i can just drag it and you see now it is here we want it all the way to the right side so what we can do is we can either both ways now to do it one way is just to stretch give it a fixed size okay these ones we can put them inside their own auto layout and we will give them a alignment mid vertical and now what we will do is we can turn this auto layout into a space between and it throws this one to the right end this is what we want that's one way of doing it sometimes there is more than one way of doing things now i'm gonna control z and yeah now we're back to how it was before now look at that i'm gonna give this one a fill container oh sorry i need to first grow it all the way here but you know what i'm gonna do it again i don't want it in a filled container no let's give it how it was on a fixed width and now i'm gonna grow this uh auto layout just stretch it all the way to here and now i'm going to give this one a fill container boom you see what it did it pushed this icon to the far end of course it is responsive i mean if i just do this you will see that it's behaving okay it's behaving in a responsive way and that is what we want so you saw now actually two ways of actually getting the same result okay in this case that's okay um so instead of doing actually another auto layout inside this auto layout we can just solve it like this which now it is great okay so all the left for us to do is we can just we can let's make this text a bit shorter and that's okay and i can duplicate it by the way let's call this one a comment okay now if i auto layout this comment shift a you see actually these are good this is going to be comments in having this comment inside oh what they are right here something in in thai maybe i'm gonna fix it now okay now if i will control d you see it throws another one below it and by the way look at that when i did an auto layout only on one element it already gave it a padding you see it gives it a default padding when it's only one element okay i can easily just put it on zero if we don't want this padding that's okay and i can leave this padding depends on the case depends on your designs depends on what you need okay good so i want to make it a bit wider these two in this auto layout i'm gonna make it wider and now it has a fixed width these ones this auto layout i'm gonna do film container now this one is needs to be also you see i mean let's fix it one by one and see exactly how we'll make it uh as we want so we gave this one a field container and this one now we will give also field container this one is already in a filled container so it pushes it all the way to the end this one the same thing fill container and this one as well field container boom we have it amazingly aligned and behaving exactly as we want now if we want to indent this one meaning like it's let's say replied this sorry we will make this now this happened because this uh this auto layout is aligned to top left i will give it aligned to the right now and then you see we can indent it quite easy of course we can also easily change the text here to a shorter message you see it behaves amazingly responsive now i can control d and duplicate it i can make it a reply of this one you see see how easy now we can do it and play with it and ctrl d i can change its place easily to here by just dragging it down and now we have a comment a reply to this comment a reply to the reply and another reply to this comment amazing look how easily so we invested time little time short time just to build this element in a good auto layout and very responsive in a responsive way and now see how easily we can make changes in our in our layout and this is exactly what auto layout is for okay you see so uh i guess that for now it was a pretty long tutorial and i guess it's quite enough um i hope it was helpful and that you have learned and and took from this tutorial whatever you came for uh i hope so very much and of course i will be very happy if you can press the subscribe button and be aware of the next tutorials that i'm gonna do on auto layout and thank you very much see you in my next tutorial thanks a lot bye for now

Channel: Yariv BE

Views: 322

Keywords: figma autolayout, figma, auto layout, figma tutorial, responsive design, ux design, figma for beginners, mobile design, ui design, design with figma, figma autolayout tutorial

Id: aj0McHNCeVA

Length: 47min 54sec (2874 seconds)

Published: Sat Oct 23 2021