Contact List made Auto Layout - Figma Crash Course

[Music] hello my name is pablo stanley and this is part of a crash course on figma's auto layout in this lesson we'll create a context list simple right oh but what happens when the text grows into two lines how can you adapt it to different screens well without the layout we can do all of that first we'll create an avatar image then we'll add our data in an action icon on the right then put it all together in a row and create a list but how is it going to be responsive don't worry we're going to solve this without the layout are you ready let's get started okay let's take a look at what we have here we have a list of cells a list of rows in each one of them has two lines of text an icon on the right and an avatar on the left so all of this is one single outer layout but inside of it has another outer layout for these two lines and then to make the list we have to make another outer layout of the whole thing all these cells are filling the container so if you stretch it you see how they turn into one line or they turn into two lines if you shrink it down so okay let's get to do it so i have some elements here that i'm going to be using for this practice i have a title a subtitle and an icon the first thing that i'm going to do is trade out the layout of these two lines so just select them and then press shift a for outer layout and then here i'm going to see the different settings that i have i want to change the spacing between them the padding between them to be 8 pixels maybe four pixels that's a little bit tighter a little bit better and i'm going to leave the padding around it at zero now i'm going to put the icon over here i'm going to select these two and i'm going to create another auto layout so press shift a and now i create a new outer layout i can change the spacing between these two let's change it to 8 pixels it's a little bit too tight but we're going to fix this later another thing is that i want this icon to be centered so i'm going to select this frame and i'm going to say that it's a line in the center i have my elements here now i want to add an avatar on the left so for that i'm going to open the blush plug-in i'm going to open this and then i'm going to go to the date flow collection the default collection has this little avatar illustration that i can use so i'm going to actually it's a little bit too big so i'm going to turn it a little bit smaller maybe 40 pixels would be good 40 by 40. 40 by 40 that looks a little bit better now if i want to i can just randomize the style of it or i can just change it to whatever this one with sunglasses looks pretty cool i'm going to close the plugin and i'm going to start playing around with this so now i have this and i can put this element i'm going to cut it then i'm going to select this frame and i'm going to paste it inside right now it put it all the way to the left so i can just rearrange this here you can see that it's arranged all the way to the top and i'm just going to move it over here and now it's moved to the left okay so all the elements on my cell are ready now i want this avatar to be inside a circle so i'm going to turn it into an auto layout too i'm going to press shift a and then to this one i'm going to apply a fill i'm just going to apply a white fill and i'm going to change the coordinate radius there you go i can also apply a stroke i'm going to apply a gray stroke maybe two pixels and here you're going to see that the image is here in the center but there's also some padding around it right now it's eight pixels so it's making the whole circle a little bit too big so i'm going to make the avatar a little bit smaller i'm going to go to 32 pixels that's looking a little bit better the cool thing is that this one is also now to layout since it's an outer layout i can adjust this this padding around it i can make it a little bit bigger a little bit smaller i think 8 pixels is good but it's good to know that you can apply auto layout to these kinds of things too and then create layouts like this that are pretty cool so i'm going to change the name here just really quickly avatar it's really important to always name your layers correctly so metadata and then this one is already called right action that's actually pretty good now that everything is together i want to turn it into a component since i'm going to be reusing it multiple times so i'm going to just go over here create component i'm going to change it to cell or whatever you want to call it row something line and i'm going to just put it over here this one is going to be my original if i need to make changes which i'm going to totally do i can just do them here and see them replicate over here for example if i want to change the direction of these two i can just do it really easily because it's an outer layout and it's also a component and i can see it replicated in other parts okay cool so now i'm going to start duplicating this little guy going to be command d command d command d i just duplicate it multiple times and now to this whole thing i'm going to apply another outer layer so press shift a and it for me it just like i made it for 5 pixels just go ahead and change it i'm going to put 8 pixels between them that looks pretty good and now to some of them i'm going to change the background to be like a light gray so i'm going to just change the fill to be a light gray just to make it a little bit different one line from on the other and now since all of this is an auto layout i can also apply a background to the whole thing so i'm going to apply another white background and i'm going to add some padding around it over here just a little bit of padding maybe some corner radius and look at that or list this is starting to look really good now i'm starting to see that the spacing here is not the best so i want to add to all of these i want to add a little bit corner radius and maybe i want to go over here to my original cell to my component and i want to add some padding on the sides i'm going to add eight pixels on the left and eight pixels on the right and also just the icon now it looks a little bit better it doesn't look as tight so that's actually pretty good also also we're going to add four pixels on the top four pixels on the bottom now it looks like the spacing is a little bit too much too much white space between them so maybe i can remove this spacing between the lines let's go to zero maybe four pixels four pixels that looks pretty good now let's see what happens when i stretch it not the best results so i want this the contents inside to stretch when i stretch the whole outer layout so to do that i need to change all of these to say that they are not hugging the content but they are filling the container so now when i stretch this they're starting to stretch right and that's because the outer layout is stretching but the contents not really so now i'm going to go to my component and i'm going to say that the elements inside should be a space between not packed but space between now i'm going to go over here test it it's just starting to look good but the element the text in the middle is not really stretching it's just adjusting it's just like centering itself so i'm going to go and select these two and i'm going to say that instead of hugging the contents i want to fill the container okay they're starting to fill the container now i can see it they're starting to fill the container but what happens if i add too much text not the best results i wanted that if i add a lot of text it breaks into two lines so i'm going to go and select these two and i'm going to say that they don't hug the content but they fill the container look at that now they're filling the container so whenever the container ends it breaks into two lines pretty pretty cool stuff so again you had to select it's not just the parent but also the children have to be fill in the container then this one says its own outer layout it's also having to fill the container of the rest and now why is the icon all the way to the right well since this one is filling the container it's pushing everything inside to the sides it's just trying to fill the container so that's why this one is remaining on the right because this one is pushing the content to the right if this one wasn't fill the container it was just like a fixed width it would this one would just be all the way to the left but let's just say that it's filled in the container since it's filling the container it's just pushing the contents to the right now let's use another plug-in i like using this plug-in content real and with this one it creates random content like lorem ipsum that you can use on these kinds of things just so it looks not as repetitive it looks a little bit more realistic so i'm going to select all the titles and i'm going to select this one that is full name then i'm going to select all these subtitles and i'm going to say i don't know let's add a u.s full address there you go look at that since some of these addresses are a little bit longer it broke them into two lines but that doesn't matter because we have out the layout and it worked just perfectly now i'm going to do the same with these avatars i'm going to open the blush plug-in and all these doodles i'm just going to change them to something else i'm just going to select all of these i'm going to press randomize and just randomized them into these really cool doodles this one is a little bit uh it's actually pretty cool but i wanted to look similar to the other ones the long hair is pushing it away so there you go look at that looks pretty dope right now if i want to i can also add a title to this list so let's say that it's called directory now i can just drag it inside here and it's just going to be on top i'm going to change to make it a little bit bigger i have a heading style here that looks pretty good now something else that you can do if you are like me you will want this title to be aligned to the circles maybe it's not the best but i don't know i want it to be aligned to the circles since these circles have some padding then this directory is a little bit too aligned to the left so you can just press shift a and add an outer layout to it too and now since this one is its own thing you can add some spacing and padding around it so like you you can say hey you know what i actually what if you wanted to be aligned to this that would be a little bit weird but if you wanted you could do that with the spacing with the padding that this outer layout allows you to have but i actually want it to be eight pixels eight pixels and also i want to have its own padding just so it's a little bit separated from this and just i don't know it looks a little bit nicer with that white padding around it and also if i wanted to i can say that it fills the container now it's filling the container and if i had i don't know like another one with two lines a really long really long line okay that's not really doing it and that's because this element is also not fill in the container i have to change it also to fill the container and now it breaks into two lines but i only wanted to say directory so that's okay but it's good to know this because you want to prepare this for any use case so you prepare it and now you'll be ready this you can use it for a really long text or a short text and it will not break well actually it will break but into two lines okay so that's it for this lesson there are more lessons about how to layout so just keep watching all those videos thank you so much

Channel: Sketch Together

Views: 22,708

Rating: 4.9765167 out of 5

Keywords: ui design, ux design, user experience, tutorial, walk-through, how-to, graphic design, user interface

Id: 4RnfHGghZks

Length: 12min 37sec (757 seconds)

Published: Tue Dec 01 2020