YT YouTube2Text

YouTube2Text → Transcripts → A Guide to Auto Layout: Best Practices, Tips & Tricks | Figma

A Guide to Auto Layout: Best Practices, Tips & Tricks | Figma — Transcript

by Figma · 4,423 words · 608 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:05hello everybody we are here today to
0:07talk about Auto layout this feature is
0:09one of the main features that made me
0:11fall in love with figma but I also know
0:13a lot of folks may feel the complete
0:15opposite of that auto layout can be
0:17really confusing and if it's not
0:19understood fully it can be super
0:20frustrating so my goal with this video
0:23is to get into all the nitty-gritty
0:24details of when to use it how to use it
0:27how to set it up and just general best
0:29practices when it comes to Auto layout
0:30so let's start with what the heck is
0:36it auto layout is a property that you
0:39can add to frames and components it lets
0:41you create designs that grow to fill or
0:44shrink to fit and Reflow as their
0:46contents change this can be incredibly
0:48helpful if you want to quickly add
0:49content to your designs while still
0:51maintaining the spacing and constraints
0:53you've put in place it allows your
0:55designs to grow or to shrink with the
0:57content that's added to maintain
0:59alignment as your designs evolve and to
1:01keep consistent padding and spacing
1:02between designs Auto lout is incredibly
1:05useful when it comes to something like
1:07text strings whether it be a button or a
1:09larger group of text adding Auto layout
1:11will allow your content to grow without
1:13overlapping onto the designs or getting
1:15cut off auto layout will also allow you
1:17to rearrange elements on a mobile page
1:19much easier while maintaining the
1:21spacing and it'll allow you to create
1:22responsive designs that grow and shrink
1:24to fit the space
1:28[Music]
1:39so first things first how do we add in
1:42Auto layout the first way is from the
1:44design panel on the right when I select
1:46a frame or multiple pieces of content
1:49you'll see an icon in the layout section
1:50of the design panel that says use Auto
1:52layout when hovering over that icon
1:55clicking on that will add Auto layout to
1:57our frame a key thing to note is that
1:59Auto layout has to be applied to a frame
2:02so even though figma allows us to add
2:05Auto layout to objects that are not in a
2:07frame you'll notice that when I add the
2:09auto layout it puts them in a frame
2:11basically that's just to say if you have
2:13Auto layout it's going to be applied to
2:15a frame whether or not you added that
2:17frame or figma had to add one for you
2:19you'll also see that when I add that
2:21auto layout the frame icon in the layers
2:23panel changes to an icon similar to that
2:26one in the design panel seeing this icon
2:29in the layer panel instead of the frame
2:31icon is a quick way to determine if Auto
2:33layout has been applied to something the
2:35next way to add Auto layout is via
2:37shortcuts which is the method I tend to
2:39use the most often there are two
2:41shortcuts add Auto layout which is shift
2:43a on both a Mac or a PC or suggest Auto
2:47layout which is shift control a on a Mac
2:50or Control Alt shift a on Windows add
2:54Auto layout or shift a is what I use to
2:57create small individual Auto layout
2:58groupings I create my text select it and
3:02use the shortcut shift a which both adds
3:05the frame around it and adds Auto layout
3:07to the frame and its content that helps
3:09save me a step from adding in the frame
3:11first adding the text and then adding
3:14the auto layout when I'm trying to add
3:16Auto layout to one individual piece of
3:18content like a text node when I select
3:20it the auto layout icon option doesn't
3:23even appear and the other Auto layout
3:25shortcut suggest Auto layout doesn't
3:27work so in this situation the add Auto
3:29layout shortcut shift a is key shift a
3:33is also a great shortcut to use as
3:35you're slowly building out your
3:36components and adding Auto layout to
3:38individual pieces as you go but where
3:40things start to get a little tricky is
3:42adding Auto layout to a full page or a
3:45larger components with multiple
3:46groupings with that when you have a ton
3:48of content adding a quick shift a to the
3:50whole frame or to the grouping may not
3:52get you exactly what you're trying to
3:53achieve honestly it may actually screw
3:55up your whole design like this when I
3:58add the shift a and I B it that's not at
4:01all what we expect to happen with this
4:02screen and that's because there are
4:05multiple different groupings of Auto
4:06layout that need to be nested within
4:08each other with different spacing and
4:10different directions so we either need
4:12to individually add Auto layout to each
4:14piece or we can work a little quicker by
4:16selecting everything and using the
4:19suggest Auto layout shortcut suggest
4:21Auto layout is figma doing its best job
4:23at guessing the multiple different
4:24groupings of Auto layout in your entire
4:26frame and adding those in the shortcut
4:29shift contr a on a Mac or Control Alt
4:32shift a on Windows will look at the
4:35entire grouping as a whole and guess
4:37which areas should be grouped together
4:39you can see when I use that shortcut
4:42here eight new auto layout frames are
4:44created and are highlighted on the
4:47layers panel with the blue dots now when
4:50I resize the screen it looks way more
4:52like I'd expect it to happen and it's
4:54almost exactly how I would have set it
4:55up if I made those eight frames manually
4:58it may not work completely perfectly
5:00every time like maybe I'd prefer these
5:03filters to actually stretch to fit the
5:05frame but it's a really great start to
5:07speed the process along if you expect to
5:10have tons of nested groupings you can
5:12start with the shortcut and then you can
5:14go and adjust things manually and then
5:15finally aside from the icon in the
5:17design panel and both the shortcuts both
5:20add Auto layout and suggested Auto
5:22layout can also be found in the menu
5:24that appears When selecting your content
5:26and right clicking under add Auto layout
5:29or more layout suggestions and then
5:31going to suggested Auto
5:38[Music]
5:46layout resizing is one of the first
5:49things that you'll see in the auto
5:50layout panel and potentially one of the
5:52trickier parts to understand when it
5:53comes to Auto layout when it comes to
5:55resizing it's important to understand
5:57the parent child relationship particular
5:59particularly when it comes to nesting
6:01Auto layout the parent is the container
6:04that the content is in and the child is
6:06the content so we have one parent and
6:09two children here but once you start
6:10nesting and putting multiple autolayout
6:12containers inside of each other a child
6:14can also become a parent so the button
6:17container is a child but it's also AAR
6:20parent to the text when you start to
6:23Nest changing the resizing on one could
6:25override the resizing on another and
6:27that's the tricky part so so let's break
6:30down each of the different resizing
6:32options let's start with fix because
6:34that's usually the simplest one to
6:36explain and also to understand anything
6:38set to a fixed height or a fixed width
6:41is set to that number and it's not going
6:43to change the resizing here can be
6:45applied to the child content or the
6:47parent container they're not dependent
6:49on each other setting the container to
6:51fix though May mean some content is
6:53Flowing outside of the container or even
6:55getting cut off if the clip content is
6:57on So to avoid is happening we may set
7:00either the horizontal or vertical
7:02resizing options to fixed but then set
7:05the others to hug or fill let's start
7:07with hug first the fixed and hug combo
7:10is usually the one that figma will
7:11default to when you're first adding Auto
7:13layout setting the resizing to hug is me
7:16saying I want to hug the contents of the
7:18container or in other words I want the
7:20parent which is the container to resize
7:23based on the size of the child which is
7:26the content within it we're going to
7:28apply the resizing to the container and
7:30the child content is going to determine
7:32the final size of the container so for
7:35example if I add a button where the
7:36content is never going to be the same
7:38it's always going to be different words
7:39I might set that parent container to hug
7:42so the button always has equal padding
7:44around the text no matter how long the
7:46text is how much text is added will
7:49determine the final size of the
7:52container I'm a big analogy person so I
7:54like to think of this one as a
7:57balloon as you fill the balloon with
7:59that balloon is going to expand with the
8:01more air you put in or deflate as you
8:03let the air
8:04out the amount of air or content you put
8:07into it determines the size of the
8:09balloon or in our case the container
8:12then we have fill setting resizing to
8:15fill is me saying I want to fill up the
8:17entire container with this content so
8:19the child content will fill the entire
8:22space available in the parent container
8:24and the parent container will
8:25automatically set to a fixed height or
8:27width so with that we're going to apply
8:29the resizing to the child content and
8:32the parent container is going to
8:33determine the final size of the
8:35container which is the opposite of how
8:37we would apply hug remember with hug we
8:39applied the resizing to the parent and
8:41the child determines the final size if
8:44you're not seeing Phil as an option for
8:45resizing it's likely because you're
8:47selected on the outermost parent
8:49container of the auto layouted frame
8:51instead of a child for fill you have to
8:54be selected on a child in order to fill
8:57the parent container if I have two stack
8:59buttons on a mobile screen I often want
9:01those to fill the screen so that they're
9:03the same width no matter what the text
9:05is in there for that I'll set the button
9:07to fill the screen and set the text to
9:10fill the button I'll also set the text
9:12above the button to be fill and now when
9:14I resize the frame both the buttons and
9:17the text above continue to fill the
9:19width of the frame so more
9:22analogies think of this one as filling a
9:25plastic cup we're adding liquid to this
9:27plastic cup as I add the liquid to the
9:29cup the liquid is spreading out as close
9:31as it can to the edges and then it's
9:34moving up within the constraints of the
9:35cup and I can squeeze the cup so it's
9:38slightly changing the shape and the
9:40liquid is still going to fill up as much
9:42of the cup as it can now because I've
9:44set this liquid to fill the container
9:46once it gets to the top it's going to
9:48overflow just like text would overflow
9:49out of the container if it was set to
9:51fill for the height and the width so the
9:53ways that we can fix this in figma to
9:55make our designs a little bit more
9:56realistic are either by adding
9:58truncation to the text which we can find
10:00in the type settings so that it
10:02truncates and doesn't flow out the
10:04container or by using different resizing
10:07types for the parent and the child and
10:09for the width and the height which is
10:10super common maybe I want to fill the
10:13width of a fixed container size with
10:15text but I want the container height to
10:17grow based on the amount of text I add
10:20for this I would use a combination of
10:22three resizing I'd set the parent
10:24container to a fixed width and the
10:26height to hug the contents while I'd set
10:28the child content to fill the container
10:31for width and the height to Auto height
10:33this the container grows as more text is
10:35added and I can change the set width of
10:37the container and the text will still
10:39fill up the full area and then finally
10:42aside from fixed hug and fill we also
10:44have the ability to add on a Min and a
10:46Max width and height in addition to what
10:49we set the resizing to Min and Max
10:51values can be added in the resizing drop
10:53downs as well we'll be able to see the
10:55Min and the max that we've added shown
10:57as red lines and when we resize
10:59something we won't be able to go beyond
11:02those bounds this is great if you're
11:04working with responsive content and you
11:05want to have flexibility but also add in
11:08a few constraints if we go back to our
11:10original button example we set it to hug
11:13because the text is always changing and
11:15we want to ensure the same padding but
11:17if the button says something as simple
11:19as go a button that's small may not give
11:21a big touch Target or honestly it may
11:23just not look quite right because it's
11:25so small giving a Min width ensures that
11:27even if the text is short the button
11:29size will never go beyond that set size
11:32and on the flip side we can add in a Max
11:34width as well so we know if the text
11:36starts to truncate we need to trim it
11:43[Music]
11:50down one thing you may notice is that
11:52the frame May shrink a bit in One
11:54Direction or another when you add Auto
11:56layout to a frame or honestly it may
11:58shrink a lot this is because of padding
12:01which is the space between the content
12:02and the border of the frame figma's
12:04initial goal when you first add Auto
12:06layout is to create equal horizontal
12:08padding and equal vertical padding
12:10around the contents of the frame so if
12:12your frame doesn't already have equal
12:14padding before you add the auto layout
12:16figma is going to see what is the
12:18smallest distance from the content
12:19within the frame to the left or right
12:21side of the frame and it'll do the same
12:23to see what's the smallest distance from
12:25the content in the frame to the top or
12:26bottom and it'll pick the smallest
12:28distance for each one top or bottom and
12:30left or right and it'll make the padding
12:32that distance on the left and right side
12:34and then on the top and bottom so let's
12:37look at this in Dev mode to make it
12:39super clear for left and right I have 27
12:42and 166 for top and bottom I have 138
12:46and 19 that means it'll update the
12:49horizontal padding to be 27 and the
12:51vertical padding to be 19 we add in the
12:54auto layout and yep that's exactly what
12:57it did you can change the horizontal and
12:59vertical padding by scrubbing the input
13:01field which is just clicking into the
13:02input field and dragging to the left and
13:04the right or by typing numbers into the
13:07input field you'll also see the variable
13:09icon when you hover over the input which
13:11allows you to pick from a library of
13:12variables if you have that set up and
13:14you can easily detach a variable by
13:16hovering over it again and clicking to
13:18detach you also don't have to keep equal
13:20horizontal and equal vertical padding
13:22you can update the individual padding
13:24right on the frame by hovering over the
13:26padding on the frame and holding down to
13:28expand or Shrink the padding area you
13:30can also click individual padding back
13:32in the layers panel and you'll be able
13:34to change each padding on its own in the
13:36input field and then finally there's my
13:38favorite method if you hold down command
13:41and click on either of the input Fields
13:43you'll now get one input field where you
13:45can type in all the individual padding
13:47you can also type in the horizontal and
13:49the vertical or just one number if you
13:51want it to be even padding all the way
13:53around
13:57[Music]
14:08in addition to padding we're also able
14:09to control the space or the gap between
14:12two objects within the frame so if that
14:15number is set to 24 that means
14:17everything in this Frame is 24 pixels
14:19apart like padding the Gap spacing can
14:22be adjusted right on the frame by
14:23dragging the padding handle and the
14:25layers panel by applying a variable by
14:28typing Direct ly onto the input field or
14:30by scrubbing the input field what's
14:32unique to Gap though is the value
14:34doesn't have to be just positive you can
14:36use a negative value if you want your
14:38content to be overlapping so something
14:40like a group of Avatar stacked on top of
14:42each other would use a negative value
14:44when you're working with negative values
14:46what's above versus what's below can be
14:48important to your design so this can be
14:50edited in the auto layout settings with
14:52the canvas stacking tool when it comes
14:55to the gap between content you'll also
14:57notice the option to select auto in the
14:59drop down menu instead of defining a set
15:02value while the set value determines the
15:04exact number of pixels between each
15:06piece of content and that number never
15:08changes Auto ensures that there's always
15:11a same number of pixels between the
15:13content but what that number is can
15:15easily change so as I grow and Shrink
15:18this Frame the spacing between each
15:20piece of the content is exactly the same
15:22but what that exact number is will
15:24change based on the number of items in
15:27the frame or the size of the frame Auto
15:29is great for something like a Navar
15:31where you don't really care what the
15:32spacing between the icons is you just
15:34want to make sure it's equal no matter
15:36how many or what size icons there are
15:38whereas I'd be far more likely to use a
15:39set number on a full page layout to
15:41ensure the spacing doesn't change if the
15:43frame grows or shrinks or more content
15:45is added
15:47[Music]
15:59next is direction direction is going to
16:01tell us what direction our Auto layout
16:03frame should flow in we have three
16:05options to start us out vertical
16:07horizontal and ramp and I say start us
16:09out because I find the majority of the
16:11time I'm never using just one you'll
16:13have multiple Auto layouts nested within
16:15each other and potentially all will have
16:17different directions to give you that
16:19desired final look that's where the
16:21suggested Auto layout shortcut can come
16:22in really handy since it will try to
16:24guess the different groupings of Auto
16:25layouts but since it won't always guess
16:27it 100% of the time it's important to
16:29also know how to manually add these in
16:31so vertical and horizontal are exactly
16:33what they sound like horizontal puts all
16:35of your contents in a frame going
16:36horizontally in one row and vertical
16:39puts all of your contents in a frame
16:41going vertically in one column wrap
16:43however gives the ability to put all of
16:45your contents in an auto layout frame
16:46that expands Beyond just a single row or
16:49column with wrap as I change the width
16:51of the frame the contents within the
16:53frame will flow horizontally and wrap to
16:55the next line and you'll notice with
16:57wrap instead of just one Gap option
16:59there are two directions so you have the
17:00ability to see horizontal and vertical
17:02Gap so while horizontal Auto layout
17:05would be great for a Navar and vertical
17:08Auto layout would be great for images on
17:10a mobile app wrap could be really great
17:12for a responsive design like the
17:13contents of a web page that you would
17:15expect to wrap to the next row as the
17:17page condenses
17:23[Music]
17:32alignment is another way to change up
17:33the appearance of your Frame Alignment
17:35is similar to how we use constraints
17:37outside a botle layout it's going to
17:38allow us to determine where your content
17:40is positioned in relation to the edge of
17:42the Frame Alignment can be adjusted in
17:44the design panel in a space which
17:45someone once described to me as a gram
17:47cracker and now I cannot unsee that we
17:50can click on the different points within
17:52the space to adjust where the content
17:53will be aligning double clicking on one
17:55of the points is also a quick way to
17:57change the Gap from a set number to Auto
17:59One tip if you're selecting different
18:01alignments but you're not really seeing
18:03a difference it may be because your
18:05frame is set to hug the contents so the
18:07only space between the contents and the
18:09edge of the frame is the padding you've
18:11selected if you extend the frame out a
18:14little bit that will give you a better
18:16idea of what the alignment would
18:17actually be and then you can always go
18:20and click resize to fit to make it go
18:22back to
18:23hug if you're using objects that have
18:25strokes or any text in your designs
18:27there's also a few additional settings
18:28for alignment if we go into the auto
18:30layout settings menu we have the options
18:32to determine if we want The Strokes to
18:34be included or excluded this will be the
18:37most obvious if your Strokes are added
18:38to the outside of your content because
18:40you won't really see a difference at all
18:41if The Strokes are inside your content
18:43since the edge of the content is the
18:45same as where the edge of the stroke is
18:47in this example we have multiple
18:48different text sizes and while they're
18:50technically aligned to the text box it's
18:52going to drive me bananas that they
18:54don't visually look aligned but with
18:56turning on aligned to text Baseline we
18:59can make that look much
19:04[Music]
19:14cleaner okay so hopefully at this point
19:17you're at a place where you're starting
19:18to understand Auto layout how it works
19:20how to add it in but what if you want
19:23Auto layout but also you don't want it
19:26kind of like a half and half situation
19:28let's take the example of a badge and an
19:30app icon these individual app icons here
19:33have Auto layout applied so that they
19:35can keep an even spacing between the app
19:37name and the app icon and then the full
19:39screen has Auto layout to keep even
19:41spacing between all of the apps and this
19:43is great until I want to add the badge
19:44to the corner of one of the apps when I
19:47pull the badge into the frame you can
19:49see it's immediately stuck onto the auto
19:51layout the blue indicator on the frame
19:53is showing me where it's going to go and
19:55none of those options are the corner of
19:57the app icons where I want to be so if I
19:59drop it in it's screwing up the position
20:01of all my apps and honestly I feel like
20:03they're just running away from me to
20:05taunt me and then even if I hold down
20:07command to really get into those nested
20:09levels to get into that individual app
20:12icon it's still just stacking it within
20:14that frames Auto layout now I could
20:16right click and remove the auto layout
20:18or I could even ungroup which would get
20:19rid of the auto layout in the frame that
20:21it was sitting in because I do believe
20:23that there's a time and a place to get
20:24rid of Auto layout but I don't actually
20:26want to do that because I do want Auto
20:28layout here I just also don't want it so
20:31what's the what's the answer here the
20:33great news is I can have both instead of
20:37removing the auto layout we're going to
20:38ignore the auto layout so when we're
20:41selected on the badge we're going to go
20:43up to positioning in the design
20:45panel and we're going to click ignore
20:48Auto layout you may also hear this
20:50referred to as absolute positioning and
20:52when I do that it keeps the badge on the
20:54frame that has the auto layout with the
20:56auto layout still applied but it also
20:59allows me to put the badge anywhere on
21:01the frame while ignoring the auto layout
21:03and I'm actually going to hold down
21:04command so that I can dig even deeper
21:07and place it into the individual app and
21:09then as I move the app around the badge
21:11still sticks with it and if you want to
21:14put it back to the auto layout for some
21:16reason I can just turn off ignore Auto
21:18layout
21:23[Music]
21:33Okay so we've learned all of the
21:34essential parts of Auto layout here and
21:36let's take a super quick look at what a
21:37screen might look like when we've
21:39applied all of these things so we can
21:41see all the different resizing coming
21:43into play here we have hug we have fill
21:46we have fixed and we have those going on
21:48with both horizontal and vertical we
21:50have multiple different groupings here
21:52we can see lots of nested Auto layout
21:54going on and we even have an absolute
21:56positioning here so that we can be a
21:58little bit more free of where we want
22:00this one piece to go we can see as we
22:02resize things are resizing as expected
22:05and things are working really nicely
22:08here so we did it we learned how to
22:10apply Auto layout Auto layout shortcuts
22:13padding defined Gap versus Auto gaps
22:15canvas stacking Define Direction and
22:17Alignment resizing and ignoring Auto
22:19layout that's so many things I think at
22:22first glance it seems like you just hit
22:24a button and everything magically Auto
22:26layouts but I think we found that there
22:28are really really a ton of pieces
22:29involved which is why it's actually far
22:31more complicated than it looks hopefully
22:33you're feeling far more confident in
22:35Auto layout after this and as far as
22:37additional resources go I would highly
22:38recommend checking out figma's help
22:40center and figma's auto layout
22:42playground which figma updates with each
22:43new release that can be found in the
22:45figma community and we'll make sure we
22:47add both the links to the playground and
22:49The Help Center below thanks for joining
22:51me and happy autoing now go get yourself
22:54a treat this was long you deserve it

About this transcript

This page contains the full transcript of A Guide to Auto Layout: Best Practices, Tips & Tricks | Figma by Figma, generated from the public captions YouTube serves with the video. The transcript has 4,423 words across 608 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.