Mastering New Figma Auto Layout — 15+ Examples 📎 With Practice File

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments

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 🤞

👍︎︎ 6 👤︎︎ u/udayrajsathe 📅︎︎ Nov 30 2020 🗫︎ replies

Thanks for creating this. Added to playlist

👍︎︎ 1 👤︎︎ u/royquilor 📅︎︎ Dec 01 2020 🗫︎ replies
Captions
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.
Info
Channel: Udayraj Sathe
Views: 12,677
Rating: undefined out of 5
Keywords: figma auto layout, figma auto layout responsive, figma auto layout components, figma auto layout button, figma auto layout card, figma auto layout text, figma auto layout updates, figma auto layout november 2020 update, auto layout figma, auto layout tutorial figma, figma auto layout menu, figma auto layout tutorial, figma responsive design, figma responsive web design, responsive auto layout figma, latest figma update, latest figma auto layout, how to use figma auto layout
Id: Fr4daf-2MSo
Channel Id: undefined
Length: 21min 33sec (1293 seconds)
Published: Mon Nov 30 2020
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.