Hey everyone, welcome to another Figma Tutorial. Figma recently updated Auto Layout with fantastic
new features. Many of us struggled because, along with new
features, they also changed how things work. I have tried my best to make this tutorial
easy to understand. In this video, I'll walk you through all things
that are changed & newly added with tons of Mobile and Web design examples. Here's a quick glance over them. Starting with simple examples, To-do list
with Custom Spacing, Dropdowns, Responsive Tab Bar, Nested Auto Layout, Alerts with Alignment
Hack, Calendar & Cards. Responsive Web design, Dynamic Logos & Equal
Height Testimonials section. Phew! The List is quite significant. Stick around and watch till the end or jump
to a specific example using Timestamps. A lot of efforts have gone into making this
video. So I hope by the end of this video, you'll
be able to use Auto Layout like a PRO. Let's get started. Before we begin, download and follow along
with the practice File added in the description and the comment section. The Basics
If you already know the basics, you can Jump to the 'Resizing & Rearranging' section from
Timestamps below. For those who're new here, Auto Layout lets
you create dynamic frames or content without a need to manually resize every time. To add auto layout, Right-click on Layer,
Group, or Frame. Click on Add Auto Layout. Figma Automatically decides some properties. Let's check those in a moment. I'll fill color to make Auto Layout Visible. Try changing the text. Our frame adjusts Automatically. When we select multiple layers, you can click
on the + icon on the Auto Layout section on the Right sidebar. Let's try changing Default Properties. We can change direction from Horizontal to
vertical & vice versa using these Arrows. Middle Number decides the spacing between
each Item. Let me change that to 40. The third value adds equal padding around
the content. I'll make it 20. Here's a trick. If you hover on these property icons, you
can simply left-click and drag the handle to change values. The last option is Alignment and Padding. I'll cover that in some time. Nesting & Rearranging Auto Layout
Just like frames, We can nest Auto layout. Meaning, you can combine multiple Auto Layouts
together. For example, we can convert this button, name,
and description to Auto Layout. Then Add everything in a new Auto Layout frame. Great. Now to create a vertical list, Just duplicate
this row and add both again in Auto Layout. Adjust direction and spacing. Now we can make changes to any text, and our
design will adapt. Any new duplicate will automatically have
the same spacing. You can easily rearrange items by simply selecting
and dragging them Up and down or using Keyboard Up/Down arrows. Resizing Type 1 - Adjusting Auto Layout frame
Resizing Properties are now located below Auto Layout. Default behavior adjusts the Auto Layout Frame
with content as if it is tightly Hugging the content. Hence the new name for it is 'Hug Contents'. In this example, I added a Blue outline to
make the Auto layout frame Visible. When we modify the content, the Auto layout
frame simply wraps around it. Type 2 - Adjusting Content
Previously we saw how the Auto layout frame adjusts itself as per content. In the 2nd Type, Content adjusts itself as
per available Frame Size. Here's how it works. As soon as you modify the height or width,
Resize Dropdowns change from 'Hug Contents' to Fixed. As you can see, the content didn't change
by default. Let's change the first content box 1 to Fill
Container. As soon as we do that, It will consume all
available space. Now, if you try to resize the Auto layout
frame, the content will always adapt dynamically. If we make all content boxes to Fill Container,
all content boxes will have equal height & width. If you need to adjust spacing of any content
box, you can simply resize it. Notice that it's changed to 'Fixed Width'
now. The rest of the content with the Fill container
adjusts automatically with the frame. This is extremely useful for designing Data
Tables and Responsive Content. Padding
Type 1 - Equal padding all around We already had this feature. In the previous version of Auto Layout, we
had Horizontal and Vertical Padding. Now we only have one Property called 'Padding
Around Items'. It adds equal padding on all 4 sides. In this example, the Blue border is our Auto
layout Frame. The yellow portion is our content, and the
white portion in between is padding. Try a few values to understand it completely. Type 2 - Individual Padding
This is a new addition. Sometimes, we don't want equal padding on
all sides. Now we can set up Individual padding on each
side. To do that, click on the Alignment and Padding
icon in Auto Layout. Now you can set any value of your choice in
Top, Right, Bottom, and left edge. Alternatively, you can add comma-separated
values for Top, Right, Bottom, Left in the Padding Setting. I have created a 'To do List' using this feature
in the Examples section. But before trying that, let's see 2 final
Properties of Auto Layout - Alignment and Distribution. Alignment
Earlier Content Alignment was here in the Top Section. Now, We can access Content alignment options
by clicking on the same 'Alignment and Padding' icon. It's useless when the Auto layout is set to
Hug Contents. It starts to shine when we manually set Frame
Height or Width. We have a total of 9 Alignment Points. Top, Right, Bottom, Left, Center, Top Left,
Top Right, Bottom Left, Bottom Right. It Affects all content pieces in Auto Layout
Frame. See Example 2. See how alignment changes. If you want to treat everything and one piece
of content, simply wrap it in a Frame and see how behavior changes. Distribution
Type 1 - Fixed Spacing It's the default behavior When we add Auto
Layout Frame and Resize it. Many times we don't have to Use 'Fill Container'
resizing. We can just let content stay the way it is
and modify spacing if needed. We can change this Property using the Alignment
and Padding icon. Click on the Distribution dropdown. Let's check the other one now. Type 2 - Automatic Equal Spacing
Whenever we're designing Responsive Content, we want it to evenly distribute within the
frame. To do that, simply select the Auto Layout
Frame, click on the Alignment and padding icon, Change distribution from Packed to Space
Between. Figma will override the fixed spacing to Auto. If you change that to some value. It will revert to Packed. Similarly, You can Change it From packed to
space between by simply typing Auto in Spacing. This is a timesaver feature that we can use
to create Responsive Tab Bars, Menu, and Lots of other design elements. Now we have covered all the Basics. Let's create some examples using New Auto
Layout. Examples Simple Examples
Starting with Simple Things First. For Tags, We can simply add auto layout and
tweak values. It's so easy to customize it with icons just
by adding them into the frame. For Instagram Stories and Overlapping Profile,
you can just Add Auto Layout. The only difference between the two is the
Distribution option. Instagram Stories is set to Packed, and I'm
changing Overlapping Profiles to Space Between. Now you just need to reduce the width of the
Auto Layout Frame to create an overlapping effect. Creating a List is pretty easy too. I am adding Auto Layout to Button first, and
then the whole selection. Complete the design by adding padding and
tweaking alignment. Indented To-Do List
To create a to-do list, we'll start by making Checkbox rows Auto Layout. Quickly fix alignment to Left and Vertically
Center. Now add all items together in Auto Layout. Change all of them to Fill Container Horizontally. I want 5px spacing between To-do list items. But now List is very close to Title. Now we can add Individual padding. Select 1st To-do item. As its Auto Layout, we can now change Top
padding to 10, Without changing other values. Add some checklist items. Some of them Belong to Groceries. So you can put them under that only by selecting
all of them together and adding some left Padding. Great. Now our Indented To-do List is ready. Dropdown
Creating Dropdowns can't be simpler. Just select the Frames Enclosing items and
Add auto layout. We can make Dropdown Dynamic by adjusting
a few values like alignment, padding. When we resize, the arrow is not moving. We can quickly fix that by changing distribution
to Space Between. Now we can easily modify content and look
and feel. Evenly Spaced Tabs
This is super useful while designing mobile apps. Lots of other UI components can be created
in the same way. Step 1 is to convert tabs into the Auto layout. Fix Alignment. Now select the outside frame and convert it
to the auto layout. Try resizing. Make it Evenly spaced, simply by changing
Distribution to Space Between or Auto. Resize frame again and see magic :-) Nested Auto Layout Flexible form
Many times we need to create extended forms with lots of groups, input styles. I have an input field already, with Auto Layout. Select Group Title and Input and add to Auto
Layout. Now duplicate all to create form group - Billing
Info. We can add individual padding to the field
above Group Title to add extra spacing. We can now hide/show hint texts, add more
groups or fields; without manually adjusting values. Alerts
This is a fun example. Alerts can have many variations. You can make all those with few clicks. I already have auto layouts on Title Description
and Text Buttons. As soon as you turn on the Auto layout on
the outer frame, everything aligns to the left. We can not make buttons right aligned like
this example because Alignment settings affect everything. So here's one hack. Add Text buttons in the new Auto Layout Frame. Set it's resizing to Fill Container Horizontally. Now simply change the alignment of this Auto
Layout frame. Done. Resizing works flawlessly. Create a 2nd variation of the card just by
hiding the description part. Create 3rd variation by merely changing the
direction of Text Buttons to Vertical. I hope now you can see how powerful this feature
is. Calendar
Creating a custom calendar is super easy with auto layout. Start with a text layer inside the frame with
constraints to keep it centered. Duplicate and add both layers inside the Auto
layout. Duplicate the text to create 7 columns. Adjust spacing. You can change resizing to Fill Container
or Distribution to 'Space Between' to make the calendar Responsive. I'll keep it to fixed width for now. Now select the Entire row and create a copy. Add both in auto layout and make sure that
orientation is vertical. Duplicate to create 7 rows. Keep only 1 frame in the First row. Add arrows at both ends. Set Middle one to Fill Container Horizontally. Fix alignment if needed. Rename it to Month. Now modify days & dates. You can change text color and background color
to highlight today's date or a selection etc. The last step is to Adjust padding around
it, and our calendar is ready to use :-) Cards
Here we have Title Description, Time Slots & Text Button in their respective Auto Layout
Frames. Let's convert this card into Auto Layout. Resizing to Fixed width horizontally and Hug
Contents Vertically. I'll Keep spacing to 0. Select Title and Time slot frame and add them
into Auto Layout. Add Padding and Spacing. Change resizing of this frame, Image, and
Button to Fill Container Horizontally. That's it. It now resizes wonderfully. You can create many variations now by simply
hiding or changing some content. If you combine this with component variants
, the possibilities are limitless. I'll link the component variants tutorial
in the description below. Next, we'll check some web design examples. Responsive Design
Making responsive designs is a piece of cake now. Convert Menu Bar into the Auto Layout frame. Adjust alignment and set distribution to Space
Between. Try Resizing. Next, add our left content in auto layout. Change Resizing of all text layers to Fill
Container. The next step is to add both left content
and image to the new auto layout. Set spacing to match Gutter width, which is
20 in this case. Change resizing to Fill Container for both
of them so that they'll take up equal space. The last step is to change the constraints
of the outermost Auto layout frame to 'Left and Right.' Resize frame now. We can now make responsive content in minutes. Client Logos Section
We use this component many times. It's a pain when we have to add or remove
any logo. We had to adjust everything again. Not anymore. Let's see how. I have some sample logos here. I have changed their constraints to Center-Center
as I don't want them to scale with the content. They will remain centered to the outer frame. Add a few of them to our design. Add them to Auto Layout. Change all logos resizing to Fill Container
horizontally. Now we can simply add / Remove logos, and
the content will adapt. Remember, we have to change the resizing of
newer additions to Fill Container too. Now we can freely move them around without
worrying about resizing and aligning them. Equal Height Testimonials Section
Not all testimonials have equal content. We can now create a consistent, responsive
design in minutes. Here we have a testimonial component with
Auto layout ON. I'll duplicate and create more entries. Modify some content. Now add all of them to the auto layout. Adjust frame size to Grid. Select all testimonials and change resizing
to Fill Container both horizontally and vertically. Change spacing to our Gutter width 20px. The last step is to Bring the Username and
designation down. Just change the Main component's resizing
to space Apart. It will push the User downwards. Try resizing the design. It's incredible to see how just some controls
can make our designs responsive. I hope this tutorial was helpful, and you
can use Auto Layout like a PRO. Hit like and share this video if this was
helpful. Provide your feedback in the comments below. Thanks for watching it. I'll see you in the next one.
It took me almost 12 hrs to create this video. I have tried my best to explain concepts and features in simplest form along with 15+ examples.
You can download practice file and follow along.
Let me know if this helps. Looking forward to your feedbacks 🤞
Thanks for creating this. Added to playlist