如何在 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 之前必須掌握的基本工具。

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