Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！ - 設計每日一貼---北京蘭亭妙微/UI設計公司

<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

2025-1-7 藍藍設計的小編

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

卡片的其他元素可以跟隨用戶評論的字符數自動調整。

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

表格的寬高可以跟隨畫框的變動而自動適配。

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

頁面的元素可以根據頁面的寬度自動響應適配。

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

如果這些技巧你都掌握了，好的，你可以忽略這篇文章，但如果你還不會這些技巧，那么這篇文章分享的內容就特別適合你，接下來，

就讓我慢慢講解實現這些操作的技巧——自動布局（Auto Layout）。

什么是自動布局？

我們先來看官方的定義。

自動布局（Auto Layout）是您可以添加到框架和組件的一項屬性。

它允許您創建可放大或縮小以填充的設計，并隨著內容的變化重新布局。當您需要添加新圖層、容納更長的文本字符串或在設計演變過程中保持對齊時，此功能非常有用。

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

不過要徹底弄懂這個概念，還需要我們一步一步來。

理解框架的概念

在講自動布局之前，

我們需要了解一下Figma中框架（Frame）的概念

。

我們先看一下框架的定義。

所謂「框架」，也即是我們過去在Photoshop、Sketch等設計軟件中使用的畫板Artbord。

我們在Figma中設計的元素，無論是文本、圖形、形狀都需要有一個容器來承載，這個容器即是「框架」。
「框架」是Figma中的一個多功能容器，不僅可以用來模擬畫板，還可以作為布局的基礎單元，包含了更多的設計功能和靈活性。

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

Figma為什么要引進「框架」的概念，而不是像Sketch這些軟件使用畫板呢？答案是

框架可以為設計師提供更高的靈活布局、協作效率以及響應支持，

不過這里有一個重要的前提，那就是這個框架添加了自動布局的屬性。

框架和組又有什么區別？

我們再來說一下框架（Frame）和組（Group）的區別，因為這將會關乎我們在Figma的設計邏輯和工作習慣。

和Sketch中的畫板不同，

「框架」可以無限嵌套，也即是在一個主框架的里面，可以無限創建框架，

這些框架可以用來組織和管理各種不同的設計元素。在過去，這個工作主要是由「組」來完成，但看完這篇文章以后，我希望你徹底改掉這個操作習慣。

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

框架的功能屬性更豐富

「框架」的屬性非常豐富，比如支持填充、描邊、圓角半徑、裁剪等，但「組」并不支持，它只能作為簡單的容器來組織和管理元素。比如一個按鈕，如果用「組」來設計，需要形狀+文本兩個元素，但如果用框架來設計，則只需要文本一個元素，因為框架支持填充，還可以設置圓角半徑、描邊等。

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

框架的設計效率更高效

「框架」在加入自動布局屬性以后，就可以實現適配多端的響應式設計，框架的內容元素可以根據設計師約束的規則進行靈活布局，這樣的設計效率是「組」完全不能相比的，這也是Figma最大的魅力之一。

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

簡而言之，「組」只適用于對簡單的圖層整理和管理，它并不支持復雜的布局功能，屬于舊時代的軟件功能，和「框架」根本無法相比。

自動布局的本質

講解了以上概念，我們就能理解自動布局的本質了——

自動布局就是可以靈活高效布局的框架，它屬于一種功能屬性，就像變體之于組件，添加了變體屬性以后，組件才能實現高效的操作。

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

自動布局的創建方式

自動布局的創建方式可以通過以下方式創建：

快捷鍵：

選中元素，Shift+A可直接創建；
鼠標右鍵：

選中框架，點擊右鍵，在屬性面板中可直接轉換成自動布局；
屬性面板：

選中框架，在框架屬性-布局，點擊右側圖標，即可創建自動布局。

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

自動布局的功能屬性

在框架添加了自動布局屬性以后，我們就可以對框架添加功能屬性來排版布局。

大小

「大小」是指框架的寬高尺寸，可直接輸入數值，點擊下拉還有多個選項。

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

固定尺寸：

尺寸的具體數值，可手動設置；
適應內容：

框架的尺寸會根據元素的增加或減少而自動適應；
填充容器：

觸發這個功能，需要一定的前置條件，那就是子框架處于父框架之中，而且兩者必須添加了自動布局屬性，當兩個框架的尺寸發生變化時，子框架就能根據約束的條件進行填充。
最小尺寸：

設置最小尺寸以后，框架不會跟隨外界條件而改變；
最大尺寸：

設置最大尺寸以后，框架不會跟隨外界條件而改變。

方向

「方向」是指自動布局的布局形式，分為垂直布局、水平邊距和換行布局。

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

垂直布局：

框架內所有元素進行垂直布局；
水平布局：

框架內所有元素進行水平布局；
換行布局：

框架內所有元素將會根據約束設置排列成多行和多列；

間距

「間距」是指框架內各元素之間的距離。

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

固定數值：

可手動調整框架內元素的間距；
自動屬性：

這個屬性是實現響應適配的關鍵，設置為自動后，框架內所有元素都不會被約束限制，將會跟隨框架的變化而自動調整。

對齊

「對齊」是指元素在框架內的對齊形式，分為上左對齊、上中對齊、上右對齊、左對齊、居中對齊、右對齊、下左對齊、下中對齊和下右對齊。

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

邊距

「邊距」是指框架內元素距離框架的距離，分為水平邊距和垂直邊距。

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

水平邊距：

元素距離框架的水平邊距；
垂直邊距：

元素距離框架的垂直邊距；
獨立邊距：

點擊獨立邊距后，可單獨設置上下左右四個邊距大小。

其他

描邊：

可設置描邊樣式是否包含在布局中；
項目堆疊：

框架內元素的堆疊排序，可設置前面在上和后面在上；
文本基線對齊：

基線對齊是一種對齊方式，專門用于處理包含文本的布局容器，它確保容器內的文本元素在垂直方向上按照基線對齊，而不是按照邊框或其他對齊方式，多數情況我們忽略此屬性，不用設置。

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

忽略自動布局

如何在一個自動布局里面增加個性化的設計，比如一個圖標或者一個元素需要在右上角，它不需要受限于自動布局垂直或水平的布局方式，這個答案就是要給這個元素增加「忽略自動布局」的功能。

如何添加：

選中元素后，在右側屬性面板-位置右側，點擊「忽略自動布局」，該元素將不會受自動布局的約束限制。

Figma高階技能卡②丨掌握自動布局，你的設計生產效率才能指數級提升！

自動布局的使用原則及技巧

所有的元素都必須在框架里面，無論是文本、圖片還是形狀；所有的框架都應該增加自動布局屬性，元素才能變得靈活高效。
忘記「組」，除非有特殊的效果，不要用組，因為它會影響設計的靈活性。
使用布局思維去設計，而非單個元素，這樣才能發揮Figma以及自動布局的高效。
盡量用準確的數值去約束框架，比如邊距、間距和最大寬度等，這樣你的設計才會真正實現規范和高效。

總結

Figma的出現，不僅僅開創了多人實時協作、文件云端管理等設計模式，更是對設計生產效率帶來了突破性的飛躍，而自動布局正是保證高效設計生產效率的基準和保證，這也是我從最初的Photoshop轉到Sketch，再從Sketch轉到Figma最大感受。

自動布局是Figma的靈魂，也是發揮Figma無與倫比的生產效率的基礎，

希望大家一定要掌握這個功能，才能讓你的設計生產效率實現飛躍！

作者：廖爾摩斯
鏈接：https://www.zcool.com.cn/article/ZMTY0Nzc4MA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan

« UI設計公司分享：醫療可視化大屏 UI 有哪些設計要點在淺色UI設計中，有哪些色彩心理學原則？ »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合