如何在 Figma 中使用自動佈局

自動佈局是每個設計師和 Figma 用戶的必備工具。此功能允許您進行更改，例如調整框架和對象的大小或重新定位。自動佈局將使您能夠調整元素的高度和重量，例如，通過自動設置，將您的工作量減少一半。

由於屏幕尺寸會根據用戶訪問網站所使用的設備或瀏覽器而變化，因此自動佈局使框架內的元素適應這些變化。這使得佈局和結構看起來更加精確和協同。繼續閱讀以了解如何在 Figma 中使用自動佈局及其功能。

使用自動佈局

要使用自動佈局及其所有功能，您必須首先將其添加到您正在處理的框架中，該框架可以是新框架，也可以是包含內容、對象和組件的框架。選擇框架或對像後，向其添加自動佈局的方法如下：

• 按鍵盤上的“Alt + A”（適用於 Mac 和 Windows）。
• 右鍵單擊對像或組件，然後單擊“自動佈局”（您必須將此功能添加到每個組件，因為它不可能批量添加）。
• 點擊 Figma 菜單中“自動佈局”選項旁邊的加號圖標。

除了向框架添加自動佈局之外，您還可以執行各種操作，從堆疊框架到復制、排列和刪除對象。

添加和刪​​除對象

將對象添加到框架中非常簡單。您只需抓住要添加的對象並按照指示器操作即可。如果您要刪除一個，請將其拖回並按刪除鍵。如果您選擇添加比父框架更大的對象，則需要避免 Figma 默認設置才能執行此操作。您可以通過按住“Ctrl”按鈕（Windows）和“Command”按鈕（Mac）來完成此操作。

複製對象

如果您想將兩個或多個相同的對象添加到框架中，您可以復制它們，這是一個有用的自動圖層功能。您可以這樣做：

1. 點擊您想要復制的對象。

   

2. 如果您使用的是 Windows，請同時按住“Ctrl”和“D”按鈕。

   

3. 對於 Mac，請按住“Command”和“D”按鈕進行複制。

   

排列對象

如果您不喜歡框架的外觀以及框架內對象和組件的組織，您可以重新排列它們。如果您合併了兩個圖層，則必須繞過 Figma 默認設置，在 Windows 中按“Ctrl”，在 Mac 中按“Command”來訪問深度選擇選項並將組件從初始圖層移出。但是，如果是一幀，您可以選擇一個對象並將其移動到其他位置，類似於添加對象，或者使用箭頭鍵。

自動佈局級別

自動佈局的另一個功能是將更多框架組合成一個，以創建一個更複雜的界面，您可以在其中疊加不同的自動佈局級別，例如按鈕和按鈕行、帖子和時間線。每個級別都允許您向框架添加更多對象。按鈕和按鈕行級別是水平的，而帖子是垂直層，您可以在其中輸入描述、圖像等。

當您將兩個框架堆疊在一起時，它們會合併並獲得父框架的屬性。這允許用戶實現可調整的對象。您可以抓住一個並將其放在另一個上以連接兩個框架。為此，您必須：

1. 選擇一幀以及您想要添加到其中的所有內容。

   

2. 按“Shift + A”添加自動佈局框架。

   

自動佈局功能

Figma 中的自動佈局選項具有許多有價值的屬性或功能，從方向和堆疊順序到間距、調整大小和對齊。本節將更詳細地討論每個函數。

方向

顧名思義，方向是指幀中對象的順序。使用自動佈局時，可以放置對象：

• 垂直 – 對象放置在 y 軸上。此選項適用於列表、菜單、新聞源等。
• 水平 – x 軸上的對象和組件（按鈕、圖標等）。
• 換行位置 – 對象設置在多列和多行中。

堆疊順序

您可以選擇最適合您的框架的堆疊順序。這只是視覺上的變化，因為堆疊順序保持不變（如果是 1,2,3，則仍為 1,2,3，但進行了視覺調整）。當對象彼此堆疊時，您可以選擇將哪個對象放在最上面。因此，舉例來說，如果您有三個標記為 1、2 和 3 的東西，則可以選擇 1 或 3。您可以這樣做：

1. 選擇自動佈局框架。

   

2. 導航到屏幕右側的“自動佈局”選項。

   

3. 點擊三個水平點可打開高級選項。

   

4. 找到“畫布堆疊”選項。

   

5. 選擇“第一個在頂部”或“最後一個在頂部”。

   

絕對位置

除了堆疊順序和方向之外，另一個“圖層流”屬性是絕對位置。此功能允許您將對象放置在任何您想要的位置，而忽略框架邊界。啟用它的方法如下：

1. 抓住一個物體並將其放置在框架內。

   

2. 在右側菜單中，在“X”和“Y”值旁邊，點擊類似無邊正方形的圖標，內部有加號。

   

3. 沿著框架的線條移動對象。

   

間隙設定

在間距方面，您可以調整一些功能，例如間隙。有兩種方法可以更改間隙：自動和輸入特定間隙。如果您希望間隙盡可能大，則必須在“自動佈局”菜單中選擇自動設置。但如果您要輸入值，請在指定的框中輸入它們。

此外，間隙設置可以針對所有方向進行設置。如果您的圖標只有水平和垂直，您可以選擇它們之間的水平間隙。但是，如果它們處於換行位置，您可以調整垂直和水平間隙設置。

對齊設置

設置方向、填充和間隙功能後，您可以調整框架中子對象的對齊方式，因為此功能取決於間距設置。您無法更改每個對象的對齊方式，但可以選擇“自動佈局”菜單中提供的圖案。您可以單擊菜單中的 3×3 網格並選擇所需的對齊方式。這可以通過鍵盤上的箭頭鍵或 WSAD 按鈕來完成。

此外，您可以在此處選擇自動設置以將水平和垂直對齊方式切換為一行。通過特定值，您可以擁有所有九個選項（左上、左下、左、右左、右下等）。

您還可以通過從菜單中啟用此選項並按住“B”按鈕來調整文本對齊方式。

調整大小

自動佈局的調整大小選項有許多附加屬性，例如擁抱內容、填充容器選項、調整寬度和高度、尺寸等。如果您希望固定值，則可以選擇自動選項，但這限制了可能性。對於調整大小，建議設置您的值。

您可以選擇固定值或將其設置為寬度和高度的最大或最小可能尺寸。擁抱內容允許您根據子對象調整框架的大小，而填充容器選項則根據父框架調整對象的大小。

使用自動佈局創建獨特的框架

自動佈局是 Figma 的基本功能之一，可以根據您的喜好調整框架以及其中的對象和隔間。它的屬性和功能多種多樣，讓您能夠創造出合適而整潔的產品。自動佈局是您在使用 Figma 之前必須掌握的基本工具。

您最常使用哪種自動佈局功能？請在下面的評論部分告訴我們。