Name: Figma 自動佈局初學者教程 (2025) (Figma Auto Layout Tutorial for Beginners (2025))
Uploaded: 2025-09-23T06:37:40.000Z
Duration: 8 min 51 s

程度副詞

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!

以下是如何在 Figma 中使用自動佈局 Figma 自動佈局可幫助您自動組織設計 這是所有完美主義者夢寐以求的功能，基本上適用於所有 UI、UX、產品和成長型設計師 我是 Aliana，我在 FastTrackUX 幫助設計師進入技術行業 您即將掌握 Figma 自動佈局 我將用五個圓圈向您展示它的魔力 現在，它們的對齊方式非常混亂、點擊它，Figma 將創建一個智能框架，根據您的設置自動調整。例如，您可以通過拖動任意兩個元素來輕鬆改變所有元素之間的間隙、當您移除自動佈局後，您可以單獨移動或調整元素，而

基礎被動語態

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?

第三個是橫向（Horizontal） 將元素橫向排列 第四個是網格（Grid） 這是一個新的更新，仍處於測試階段，它允許你以網格格式編輯佈局 我們將詳細介紹其中的每一個按鈕 別擔心，在本視頻結束時，你會明白如何使用這裡的每一個按鈕、讓我們從 "自由格式 "設置開始吧 你會看到 W 和 H 就在這個按鈕的下方 W 代表寬度，H 代表高度 你可以使用這些資料欄來調整元素的大小 你可以輸入一個數字，將鼠標懸停在字母上，然後拖動來更改它 或者用最簡單的方法 將鼠標懸停在元素的邊緣，然後拖動，直到看到你喜歡的數字為

轉承詞

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?

因為就在我編輯完上一篇自動佈局教程的第二天，它就發佈了，所以現在我又要重新做一遍所有的事情，把上次編輯的內容扔到垃圾桶裡、點擊這個大網格，你還可以選擇元素的組織、部門，並設置它們的寬度和高度以填充容器 我喜歡這個設置 現在，每當你改變間隙大小或調整框架大小時，所有元素都會自動調整以填充這些網格，太令人滿意了 還有一個按鈕 右邊的自動佈局設置按鈕 點擊這個按鈕會打開更多控制按鈕 我們來舉個例子，給這些圓圈添加粗線條 默認情況下，筆觸會超出框架、如果你改變下拉菜單，將筆畫包含在佈局中，筆畫就會保留在框架內，這

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

答案是，您需要多層自動佈局。如果您只是選擇所有內容並單擊自動佈局按鈕，然後希望 Figma 為您做出正確的佈局，很可能會把事情弄糟、您還需要為時間戳添加自動佈局，因為時間戳可以變長或變短。你還需要為時間戳添加右下角約束，因為你希望它與右下角對齊。對於堆疊了多張卡片的較大部分，你還需要另一層自動佈局來保持每張卡片之間的間距、現在你已經學到了很多關於自動佈局的知識，我為你感到驕傲、當你對自己的最終設計充滿信心時，自動排版的效果就會非常好，它非常適合高保真設計，比如詳細的模型、因為它可能會讓微小的調整變得更加困