Name: Hướng dẫn sử dụng Figma Auto Layout cho người mới bắt đầu (2025) (Figma Auto Layout Tutorial for Beginners (2025))
Uploaded: 2025-09-23T06:37:40.000Z
Duration: 8 min 51 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Here's how to use Auto Layout in Figma Figma Auto Layout helps you automatically organize your designs It's a dream-come-true feature for all perfectionists Basically, every UI, UX, product, and growth designer I'm Aliana, and I help designers get into tech at FastTrackUX You're about to master Figma Auto Layout I'll use five circles to show you its magic Right now, their alignment is so messy, it's just like your closet Let's select all the elements you want to align You'll find the Auto Layout button on the right, next to Layout The shortcut is Shift-A Click it, and Figma will create a smart frame that adjusts automatically based on your settings For example, you can easily change the gap between all elements by dragging between any two elements This is awesome, and let's go over all the details The button you just clicked to add an Auto Layout can also be clicked again to remove it Once you remove the Auto Layout, you can move or adjust the elements individually And the smart alignment will no longer apply When you're on this Freeform setup, if the size of your frame doesn't perfectly fit the elements inside Click the button to the left of the Auto Layout button This will resize the frame to hug your content Now let's learn different ways to arrange these Auto Layout elements The first one is Freeform Freeform allows you to move each element freely, so it's almost like not using Auto Layout When you add an Auto Layout and click the same button again to remove it It automatically sets it to Freeform 2 The second one is Vertical Ta-da!

Dưới đây là cách sử dụng Auto Layout trong Figma Auto Layout của Figma giúp bạn tự động sắp xếp thiết kế của mình Đây là tính năng mơ ước của mọi nhà thiết kế cầu toàn Về cơ bản, mọi nhà thiết kế UI, UX, sản phẩm và tăng trưởng Tôi là Aliana, và tôi giúp 

This arranges your elements vertically The third one is Horizontal It arranges your elements horizontally The fourth one is Grid This is a new update still in beta It allows you to edit the layout in a grid format We'll go over each of these in detail Don't worry, by the end of this video, you'll understand how to use every single button here Let us start with the Freeform setting You'll see W and H right below this button W stands for Width and H stands for Height You can use these fields to adjust the size of your element You can type in a number, hover over the letter and drag to change it Or do it the most organic way Hover over the edge of the element and drag until you see a number you like I like multiples of 4 To the right, you'll see a square icon If you click it, it locks the aspect ratio of the element So the width and height stay proportional Let's say you are redesigning a YouTube thumbnail A YouTube thumbnail has a specific aspect ratio So locking it can prevent your cat, your kid, and mostly you from messing it up One very, very important thing Make sure you select the right layer In a real design project, you'll have so many layers So if you want to lock the aspect ratio of this circle, let's say Make sure to select the circle, not the frame That way, your circle will stay perfectly as a circle Not too fat, not too short Below Width, you'll find a field to adjust the gap between elements This only appears in freeform mode when your elements share the same gap At the bottom, you'll see the clip content checkbox This is super helpful when your frame is smaller than the elements inside For example, in a carousel design Checking clip content will hide the parts of the elements that extend outside the frame Alright, next let's move on to vertical and horizontal layouts These two are really similar So let's take a look at the horizontal one When you select a horizontal layout A wrap icon will appear on the right If you click it, the elements inside the frame will automatically wrap into multiple rows Perfect for when there's not enough space in a single line Below that, you'll see width and height settings Each with a drop-down If you click the drop-down, you can set the size to hug This makes the frame automatically adjust to fit its contents For example, if you add a new circle to the frame The width will automatically expand to hug the new element You can also set minimum or maximum values for width and height Let's say you don't want the frame to be wider than 750 pixels Just set the max width to 750 And even if you add more elements, the frame won't go beyond that limit Right below width, you'll see nine alignment options for your elements inside the frame These let you align your content to the top, center, bottom, left, right Basically any corner or edge you want You might not notice much difference right now if your frame is hugging the elements But once the frame is bigger, this alignment will become very obvious Next is the gap setting Click the drop-down and you'll see an option to set it to auto This automatically adjusts the space between elements to fill the frame evenly So satisfying to see everything snap into place Below that are your padding settings Padding is the space between the edge of the frame and the element inside it By default, padding is applied equally on parallel sides But if you click the little toggle next to it, you can customize the padding for each side Just like this Next, let's move to grid A brand new and still in beta feature in Figma Alright, I have a love-hate relationship with this, okay?

Điều này sắp xếp các yếu tố của bạn theo chiều dọc. Tùy chọn thứ ba là Horizontal. Nó sắp xếp các yếu tố của bạn theo chiều ngang. Tùy chọn thứ tư là Grid. Đây là bản cập nhật mới vẫn đang ở giai đoạn beta. Nó cho phép bạn chỉnh sửa bố cục theo định dạng 

Because it was released literally one day after I finished editing my last auto layout tutorial So now here I am redoing everything all over again and throwing my last edit to trash But hey, it's a powerful feature With grid, you can snap your elements into a clean grid layout You can also set your elements to span multiple rows or columns Think about designing bento boxes on a website But I still don't like bento box, bleh You can also manually adjust the width and height of each row or column Like this On the right panel, you'll find controls to set up as many rows and columns as you want Just click this big grid thingy And with the grid layout, you can also select the element's unit And set their width and height to fill container I love this setting Now, whenever you change the gap size or resize the frame All the elements will adjust automatically to fill in those grids So satisfying There is one more button The auto layout settings button on the right Click this opens more controls Let's try an example by adding a thick stroke to these circles By default, the stroke will go outside the frame If you change the dropdown to include the stroke in the layout The strokes will stay inside the frame So this is what it does I actually haven't had a chance to use this Now, let us set the gap between elements to a negative number Think about Instagram like where the profile pictures overlap You can use the dropdown here to switch between Whether you want the first or last element to show on top Just one more setting left For this one, let's add an icon and some text If you use auto layout, they'll align automatically And if you make the text bigger, the layout will adjust like this But if you turn on align text baseline The icon will align with the baseline of the text No matter how big or small the text gets However, this doesn't work well with icons that have padding inside Which is like all of the icons I use So I don't know how to use this Now let's talk about using auto layout in a real-world scenario This is really really important So pay attention Take this YouTube card element as an example How would you fix this layout using auto layout?

Vì nó được phát hành chỉ một ngày sau khi tôi hoàn thành việc chỉnh sửa bài hướng dẫn tự động bố cục cuối cùng của mình. Vậy là bây giờ tôi phải làm lại mọi thứ từ đầu và vứt bản chỉnh sửa cuối cùng vào thùng rác. Nhưng mà, đây là một tính năng mạnh mẽ. V

The answer is that you will need multiple layers of auto layout If you just select everything and click the auto layout button And hope that Figma will make it right for you It probably will mess things up So instead, you need to add an auto layout At least one auto layout between the title and subtext This keeps the gap consistent Even if the title spans into three lines or becomes one line You'll also need auto layout for the timestamp Because the timestamp can get longer or shorter And while this next part isn't part of this tutorial You will also want to add a bottom right constraint to the timestamp Because you want it to align to the right bottom And for the larger section that stacked multiple cards You also need another layer of auto layout to keep the spacing between each card So basically you need many many layers of auto layouts And trust me, it is worth it Now you've learned so much about auto layout I am so proud of you But before you go, let's talk about best practices Auto layout is amazing when you are confident about your final design It works great for high-fidelity designs like detailed mockups However, if you are still at the early stage of your project It might not be the best tool Because it can make small adjustments harder You may end up ungrouping things over and over again Just to make one small change One last thing Auto layout works really well with components Especially for repetitive elements But that's a lesson for another day You've learned a lot already If you learned something today Hit subscribe and turn on all notifications If you want to transition your career this year And become a designer in tech Check out my program FastTrackUX I'm Aliana This is part of my Figma tutorial playlist Thank you for watching And I will see you in this video That's a jam This is a jam And that's also a jam Alright, bye

Câu trả lời là bạn sẽ cần nhiều lớp bố cục tự động. Nếu bạn chỉ chọn tất cả và nhấp vào nút bố cục tự động, và hy vọng Figma sẽ làm đúng cho bạn, thì có thể nó sẽ làm hỏng mọi thứ. Thay vào đó, bạn cần thêm một bố cục tự động. Ít nhất một bố cục tự động g