KILLER Auto Layout Tutorial in FIGMA

there are three critical things that you need to understand about Auto layout in order to use it efficiently number one you know how there's typically a bowl of leftover Halloween candy that stays around for the next few weeks well that's sort of what I've got here in the form of design assets so first off we're going to start really slow and keep the pain to a bare minimum to apply Auto layout to any object simply select it press the keyboard shortcut shift a you need to remember this anything we type our background will expand the way we would expect the first critical thing to understand about Auto layout anytime we want objects to move around on the canvas based on the content inside of a frame we're going to have to use pug contents and this is great because this is the default setting for all new auto layout object now let me show you one quick little Pro tip about having specific elements override hug contents so if we want to keep these little decorative textures on the left and right as a part of the button we'll need to use absolute positioning we're going to do that by clicking this little icon and then adjusting the constraints we'll make sure this one is set to the left I'll make sure the other one is set to the right now if you run into trouble with background layers covering up your text you'll either need to adjust the layer order manually in the layers panel or adjust the Advanced Auto layout property called canvas stacking to determine if you need first on top or last on Top This doesn't really matter it's more of a personal preference now that this is set up as a fully functioning Auto layout button let's pop in a few icons and see how we can expand this functionality once these are in place we can adjust the space between properties to keep the distance just how we want we can do this on the canvas by clicking with our mouse cursor and dragging or we can click the space and manually enter a number in this little text field right or my personal favorite we can manually enter a number in the properties panel the only caveat here is that if these options are not showing up for you you do not have the parent Auto layout frame selected so that's hug content but hug contents alone isn't going to keep us safe from the pain of Auto layout for this next example we're going to have to use the killer combination of fixed width and fill container which is going to be our second and third most critical pieces to understand it's important to remember that these are most often used together this is where most of the auto layout pane comes from fixed width for the parents and fill container for the child you can think of this like a water bottle the bottle size is fixed but the contents fill the container right here we've got two small pieces of text that we're going to apply Auto layout to we'll select them both and hit shift a nice and simple Auto layout now in order to adjust the vertical position based on the length of the text above we're going to select this text field and this Auto layout container and once again hit shift a we're going to do that to create another Auto layout frame that contains both of these objects remember how I said hug contents was the default well that's not going to work in this case even though our Auto layout direction is set to Vertical as indicated by this little icon and we can adjust the space between these two objects the parent frame and the text field inside are still set to hug content so if this text gets changed to anything else both the text field and the parent frame will expand to accommodate the content size that's great for these little pieces down here but not so much for this text up here the first thing we're going to do is manually resize the the parent container this will automatically set the frame to fixed width anytime you manually resize an auto layout frame it will change to fixed width every time you can also manually change this in the properties panel but most of the time you'll be resizing these frames anyways and that will automatically set it to fixed width so now even though our parent container is set to fixed you can see that the text inside the parent container is still set to hug content so if we start typing the text bounding box is going to continue to expand as we type beyond the fixed width parent container and that's not what we want to make sure this text stays right where we want it we're going to select the text layer and set it to fill container now this functions exactly as we want it to as I type the text field grows in height and the smaller pieces at the bottom are getting pushed down so remember this two-step process number one you're going to set a fixed width on the parent frame number two you're going to set fill container Honor on the child frame remember the water bottle analogy fixed whip container and fluid content fills that container still with me here okay good because we're about to crank up the auto layout pane to a maximum before we begin I've got a really big disclaimer if you are in the experimental phase of your design project you do not need to use Auto layout or any of the things that I'm about to show you if you are unsure about your layout or your component design I would highly encourage you to use as little Auto layout as possible in fact when I was designing these original examples I did not use Auto layout I only added it after I was happy with the final layout if you use Auto layout too soon you may risk killing your creativity and I'm not exaggerating when I say that okay in this last example I want this name text field here to push down all of the content below if it's longer than one full line and I want the subtext here to do the same exact thing I also want the body copy to do that here as well in addition to those three things I also want this knife and the skull count to grow horizontally to the left while also affecting the width of this subtext now if this seems complicated that's because it is it's also why I urge you not to use Auto layout until your designs are near completion and you actually need it if you're going into production mode or going into a design system phase or you're just trying to figure out what happens when this content gets shorter or longer those are the scenarios in which you might need to use Auto layout so to put this all together I've got all my little elements scattered here all over the canvas so it's really important that we start by creating some simple Auto layout frames first we'll start with these icons and the numbers by selecting each one and hitting shift a now we've got two Auto layout frames we're going to select both of them and hit shift a again now let's select the subtext and our icon group and create another Auto layout frame if we really wanted to get fancy we could create an icon play sort of component and random text field and turn that into a nest component and then use instance of those components with icons and takes override before we begin the Auto lab process but that's a whole different kind of worms and it's an auto layout video and not a component creation video remember everything will be set to hug contents until we change it so that's what we're going to do now first let's pull this parent frame out to around 390 pixels to emulate the rough width of an iPhone this will change the horizontal resizing on the parent frame to fix and since we know we want the width of this subtext to be dynamic and fluid it must be set to fill container these items were spaced pretty far apart from each other when we added Auto layout to them figma calculated the distance and used that as our space between values but we want this text field to take up as much room as possible without running into the icon so let's select the parent frame and set the horizontal spacing to 16 pixels so we can test out our handiwork by manually resizing the frame or by typing longer numbers by our icons or we can also type longer subtext to see how things resize when we run out of space sometimes it can be really helpful to put a temporary fill on the frame so you can more easily see the boundaries of that container okay now we're going to combine the name and the auto layout frame that we just created by selecting them both and hitting say it with me shift a so let's select the name and the nested Auto layout metadata and choose fill container let's also reduce the vertical height to zero for now we'll add some temporary frame fills while we stress test the auto layout boundaries by manually resizing and typing randomly now let's select our title frame and the body text and hit shift a once again we're going to add a little fill just so we can see what's going on let's set up our body copy to fill container so it goes all the way to the right now we're going to select our two smaller buttons down here and hit shift a we'll call this CTA group now we're just going to drag this into the existing Auto layout frame the thick Blue Line right here will show us where it'll be placed and you can always change this location by playing with your layer order just like all the other times we're going to set this Frame to fill container notice that the buttons did not move when we did that all we need to do is change the alignment of those buttons in the property panel we'll just go with top Center alignment so now if we stress test our Mainframe frame now you can see that the title is not working correctly that's because we didn't go back and choose fill container when we added the body copy every now and then when you change parent containers the children will change as well so you'll always need to go back and check them so to run a final test on this whole group let's create an iPhone frame and pop the content inside of it you can see right away that we need some padding on each side so we can select this entire Auto layout frame go over here to the properties panel and add 24 pixels of padding to each side because we've got everything set up nice and fluid frame by frame all of the content will adjust automatically finally we can pin this content block to the left and the right using the constraint setting in the properties panel and we can see how this works by stretching out the iPhone frame so to recap number one hug content is the default setting number two and number three go together fixed width and fill container are most often used together for fluid Dynamic layouts and if you're having trouble using Auto layout remember to focus on one small piece at a time just like we did with our icons and our numbers when we built our bigger system also make sure you stress test each time you create a new auto layout by either manually resizing or by typing lots of content if you found this valuable and only if you found this valuable smash that thumbs up button for me if you want to see how I made the music track for this video make sure you click right here and watch this one

Channel: MDS

Views: 18,287

Keywords: matt d. smith, mds, designer, interface designer, freelancer, athens ga, athens, vlogger, shift nudge, figma, sketch, ui design, learn design, product design, product designer

Id: OAHOqtWwek0

Length: 10min 35sec (635 seconds)

Published: Tue Nov 08 2022