本文將設計團隊接觸 Figma 以來的重要心得、經驗進行梳理總結，幫助大家更好得理解和掌握 Figma。本次主要介紹Figma 中最重要、也最提效的兩個概念——Frame和自動布局。
更多Figma 干貨：
用一句話去定義 figma，它是一款基于瀏覽器的全能型設計工具。簡單說，只需要有瀏覽器和網絡，你就可以開干了。
figma 全能的地方在于，在基于瀏覽器的環境下， 你就可以搞這些：ui、原型、云同步、實時討論、開發協作、實時共享、團隊庫等等。
絕大多數人對 frame 有誤解，覺得它人畜無害，在 figma 中僅僅是扮演畫板的小角色，然鵝并不是。
大猩猩在 SD12 集和櫻木說過：能夠掌控籃板球，就能掌控比賽。
我這里要說，能夠掌控 frame，就能掌控 figma。
1. Figma 中的對象關系
在講 frame 之前，先嘮嘮對象關系。了解它才可以幫你更好得理解 frame 乃至 figma 中布局的底層邏輯。
figma 官方將所有對象的關系用這三個詞來描述——Parent父級、Child子級和Sibling平級。
懂一些開發知識的朋友會比較眼熟，這些術語全部來自前端語言 JavaScript 中的 dom 樹。它和金字塔原理中的「歸納分組」一樣，都是通過父子級的節點鏈接形成樹狀結構，而這種結構可以解釋所有對象之間的關系。
舉個例子，下面這個模塊中的所有元素，都可以此關系解釋：
關注按鈕相對內部的 icon、文字和背景是父級關系，而它相對一整個作者模塊，又是子級關系。
在 figma 中，可以作為父級來包裹子級元素的總共就這三類：component 組件、group 編組，以及下面要講的 frame 框架。
2. 什么是 Frame
Figma 非常多的概念和邏輯都引自前端，而首當其沖的就是 frame。
它概念上等同于前端的 div。簡單說，就是用來包裹設計元素的容器 container。
容器可以嵌套，小的嵌套成大的，大的嵌套成更大的。
而就是這個 frame 的存在，造就了 figma 和 sketch 截然不同的作圖邏輯。
sketch 作圖邏輯就是一個個圖層的機械堆砌，比如按鈕——畫個矩形和文字，最后再group。我們的目標只需要畫出來一個像模像樣的按鈕就行。
figma 作圖邏輯是基于一個個可嵌套的「盒子」進行嵌套布局，它和開發 css+div 布局的邏輯是一致的。我們的目標并非是畫出來，而是做一個可動態響應、可靈活擴展的布局。
看到這，是不是感覺 frame 很像我們常用的 group？這兩個概念在圖層面板中分別以虛線框和#號表示。是除了組件外非常典型的兩個父級。
很多老鐵應該和我一樣，受 sketch、ps 等軟件的影響，凡是涉及到元素編組全用 group，感覺 frame 就是個沒啥用的畫板。
但是，我發現我大錯特錯。現在，我要大聲說出我的結論：
figma 中請一律使用 frame，group 能不用就不用，因為
3. frame 有這些優勢
①frame 的約束功能
舉個例子：
分別以 group 和 frame 編組，在改變父級尺寸后，group 會失真變形；而 frame 因為默認內置了約束（內間距固定，類似 sketch 的 pin to edge），因此可以動態響應，不會變形。
也就是說，你創建 group，就是在創建一個隨時都可以被破壞的不穩定對象。
②frame 擁有多合一屬性優勢
Group 唯一的功能，就是編組。而且編組尺寸完全取決于子級元素的尺寸，無法自由設定，對于布局起不到任何效率提升。
而 frame 不僅幫助靈活布局，多合一的屬性也能減少大量作圖成本。
這里就直接用畫板、編組和形狀圖層三類屬性來說。
畫板屬性
它等同于 sketch 的 artbord 畫板，Figma 官方用 Top level frame 來指代具備這個屬性的 frame，意思就是最頂層、最上方的。這類 frame 只能作為父級。
比如信息流頁面，Top level frame 就是整個界面畫板，它被直接放置在 canvas 畫布上，只能作為父級存在。
值得一說的是，Figma 為了兼顧用戶習慣，特意將 sketch 中新建畫板的快捷鍵沿用到 frame 上。你現在可以通過 A 和 F 兩個快捷鍵來建立畫板。
編組屬性
這個屬性與 group 類似，具備此屬性的 frame 被官方用了 nested frame 這個名字來指代，意思就是嵌套的 frame。
任何被嵌套在另外一個 frame 中的 frame，都可以稱之為 nested frame。
即畫板內的所有 frame，都是具有編組屬性的 nested frame。它既可作為父級又可作為子級。比如信息流的一個個卡片，它被畫板所嵌套，既是畫板的子級，又是卡片內部元素的父級。
最后，那些無法再被細分、不能去主動編組的對象，則統稱為子級元素（即非父級對象，frame、group 和 component 外的所有對象）。
frame 的編組方式也很簡單，選中你想編組的對象后，cmd+alt+G 即可完成。
形狀圖層屬性
這個是通用屬性，不論是 Top level frame 還是 nested frame 都有。
它讓 frame 能夠像普通矩形那樣，自由定義尺寸和樣式。樣式包括圓角、填充、描邊、效果等等。而 group 既無法定義尺寸、又不能添加樣式。即便你選中 group 強行添加樣式時，也只能添加到組內的子級元素。
由此可見，以往 sketch 中需要各自用 artboard、group 和矩形三種元素來實現這三種功能，而在 figma 中只需要 frame 一個元素就能全盤搞定。
③frame 可以裁切
每個 frame 都額外提供了 clip content 功能來快速實現裁切效果。
舉個例子，比如橫劃卡片末端都需要以裁切過的卡片讓用戶感知到延續性。
如果用 group，需要手動調整矩形的尺寸和圓角去制造裁切效果（如果裁切對象有文字，group 還要手動新建矩形去遮蓋，很麻煩），而 frame 只需要勾選面板中的裁切選項，就可以自由控制裁切范圍。
4. 最后，基于以上的屬性來點案例
①制作一個按鈕
傳統 group 做法，花六步：
- 創建文字；
- 創建矩形；
- 定義矩形樣式
- 矩形置底；
- 手動對齊；
- group 編組
如果使用 frame 的話，只需要四步
- 創建文字；
- 快捷鍵 cmd+alt+G、或者 F 創建 frame（基于 frame 的編組屬性）；
- 確定約束規則；
- 定義 frame 尺寸和樣式（基于 frame 的形狀圖層屬性）
可以看到，frame 制作按鈕的操作成本要低得多。
而且 frame 所生成的圖層數量也更精簡，減少了后續維護和管理成本。
另外，frame 因為支持約束，所以能跟隨父級尺寸變化完美響應。
當然，按鈕只是個示意，所有的控件都可以利用 frame 快速繪制。
②制作有裁切效果的 icon
比如我要繪制一個圖片 icon，其中的山峰圖形有裁切效果。
傳統的做法是蒙板+group，五步走：
- 繪制圖形；
- 創建矩形；
- 原位復制一層矩形兜底；
- 點選山峰和復制的矩形，創建剪切蒙板；
- group 編組
現在再試試 frame，三步到位
- 繪制圖形；
- 創建 frame（記得勾選裁切）；
- 加入樣式，搞定。
再從圖層數量上看，group+蒙板的方式所產生的元素數量是 frame 的 2 倍，而且嵌套關系復雜，光看圖層結構壓根看不懂。而 frame 的結構非常精簡易懂。
而且 frame 可以直接通過控制尺寸來控制裁切范圍，而 group+蒙板的形式需要分別調節 mask 和底板兩個元素的尺寸實現裁切范圍調整。
5. 使用 frame 的常見問題與解決方案
最后，再來分享下我和團隊小伙伴在使用 frame 時，所遇到的幾個非常典型的問題。
①更改畫板高度時，畫板內元素跟隨移動
這大概是 frame 最典型的一個問題了，當時我也在這個坑里躺了 n 次，體驗極其惡劣。
原因分析：
歸咎于萬惡的 group。group 不支持約束，無法跟隨響應。因此 group 的父級發生尺寸變化時，group 就會跟隨拉伸。
解決方案：
按住 cmd 拖動即可解掉。
②拖動時老是移動到畫板外
比如我想在畫板中實現一個元素的裁切效果，但移動至一定距離后總是脫離畫板父級的包裹，只能去圖層面板上手動把元素拖拽到畫板中。
原因分析：
frame 詭異的吸附邏輯。
解決方案：
在拖動時按住空格鍵即可固定父子級關系。即便把元素移出畫板，你會發現元素依舊是 frame 的子級！
③畫板里的 frame 帶名稱
原因分析：
所有直接置于 Canvas 畫布中的 frame（即前面所說的 top level frame），會全部作為畫板并外顯名稱。所以，frame 帶名稱的唯一原因就是，它是個最外側的畫板，并沒有作為子級被嵌套。
解決方案：
很簡單，直接將其拖入畫板，成為畫板的子級即可。
注意，這里又有個衍生出的新問題。很多小伙伴包括我在拖拽時會遇到嵌套不了的情況，其實只需要點下空白處、重新選擇一次，就能順利嵌套了。
auto layout 自動布局，毫無疑問是 figma 的大殺器，正如 symbol 之于 sketch，database 之于 notion。
它是當之無愧的核心賣點，也是讓其在設計工具之戰中突破重圍的勝負手。
1. 為啥自動布局得重點講
設計師的日常工作，存在著大量重復勞動；而這些重復勞動中大部分又和布局相關。
當元素發生了尺寸、增減或順序的變化后，為了維持原有的規則，你又得花上新一輪的成本重新調整布局。所以，很多時候看似你每天干了很多，但回過頭來想想又感覺什么也沒干。
而自動布局的出現，完美得解決了這一大痛點。一個擅長使用自動布局的設計師，有著高出旁人雙倍不止的生產效率，也能預留出雙倍不止的時間留給創意或者自我成長。
2. 什么是自動布局
通俗點說，自動布局，就是你先制定一個標準化布局規則（比如想保持 20px 間距、保持左對齊等）。然后當子級發生尺寸、增減等變化后，父級能基于這個布局規則產生適應變化，或者父級尺寸發生變化后，子級能基于規則產生適應變化。
比如下面這個例子，就是自動布局化的結果：
自動布局的圖標
自動布局圖標由兩個矩形排列而成，并且圖標中的排列方向既當前對象布局的方向，可以說是很形象了。
只有 frame 才能自動布局
如果自動布局的對象還不是 frame，那么在自動布局的同時，figma 會自動創建一個 frame。因此只需要創建就行，不用擔心對象不是 frame。
3. 自動布局該如何上手
自動布局的創建、復原
如圖，使用快捷鍵 shift+A 或點擊「新增」按鈕即可創建，shift+alt+A 或者點擊「刪除」按鈕即可復原。
自動布局的兩類組合方式
自動布局的組合方式取決于初始的擺放位置。
4. 并列型
比如咱們畫幾個很隨意的矩形，再隨意散落在畫布上，shift+A 后，四個元素就會自動對齊。這種組合方式，稱之為「并列型」。
從左側圖層列表可以看到，自動布局后 figma 會自動為你創建好一個 frame，雖然圖標變了，但不論是圖層名和屬性名都在明確告訴你，它依舊是 frame！
5. 包含型
如果，我將其中三個矩形放置于最大的矩形上，讓其形式上趨向于一個包含關系，那么在 shift+A 后，你會發現個頭最大的那個，真的成為了收納三個小矩形的容器。這種組合方式，咱們可以稱之為「包含型」。
而如果將三個矩形替換為一行文字，一個自動布局的按鈕就這么誕生了。
另外，在轉為「包含型」的自動布局后，左側圖層列表也會發生一些很有意思的事情——原有的容器層將會消失，frame本身充當容器。這其實也是利用了frame的形狀圖層屬性。
所以，創建按鈕這件事就變得異常簡單。
我們不需要提前創建容器，只需要對一行文字 shift+A 就行。基于 frame 的形狀圖層屬性，你可以隨意添加你想要的樣式。
你可以想象一下，如果繼續使用傳統的編組+矩形的形式，會多出多少的操作，后續的維護又需要耗費多少成本。
創建完，定個規則先
創建了自動布局后，右側會出現 auto layout 面板。你可以將其當做你的控制室，因為后續所有布局規則的制定，都要在這里完成。
下面我們單獨一個個拆出來說。
布局方向
就是子級元素排列的橫縱方向，點擊切換。一層自動布局只能設置一種方向，要構建多個方向的話要嵌套。
我們這里選縱向。
子級間距
就是子級元素之間的距離，一層自動布局只能設置一種間距，需要多種間距同樣需要嵌套。
這里我們設定 24px。
內間距
即父級邊緣到子級整體的內間距，它的設定有兩個入口。
第一個設置入口：回型按鈕，你可以一鍵等距設置。
如果需要設置不同的間距，可以通過逗號間隔。比如輸入「10，20，30，40」，這四個值就分別對應頂部、右側、底部和左側的間距。
第二個設置入口在尾部按鈕，在這里，上下左右四個內間距可以獨立設置。
這里我們就設定 24px 的等距，輸入框鍵入即可。
因為自動布局屬于 frame，而 frame 有自帶形狀圖層屬性，所以這里可以加入填充和圓角。
內部布局方式
可以控制子級元素的對齊，以及在整個父級中的位置（父級尺寸發生改變時常用），比如調大剛剛的父子尺寸，就可以通過內部布局來進行版面控制。
一共九種內部布局方式，可以根據需要自由選擇。
子級分布方式
堆疊：
即所有子級都組合在一起，改動父級尺寸時，子級布局保持固定在某一位置。
比如我們將子級位置固定到左上角，那么不論如何拉伸父級，它的位置始終保持不變。和約束邏輯很像。
等距：
不論父級尺寸如何改變，最外側的子級固定在兩端，所有子級的間距均勻分布。在控制一些等距元素的響應時（如底 tab 欄）會用到，使用頻率非常之高。
6. 自動布局的嵌套
前面說過，一層自動布局只能擁有一個布局方向和一種子級間距，當需要新增時就需要用到嵌套。
如何嵌套也非常簡單，直接選中想要嵌套的子級 shift+A 就行。
比如我們想調大中間倆矩形的間距，只需將上、下側的兩個矩形各自創建一層自動布局即可。
再比如我們想新增一個頭像，但頭像加入后會多出一個橫向布局方向，這時同樣可再做一次嵌套。
最后，就可以得出類似 feed 流的一個骨架圖。
為了模擬真實的場景，我們將這幾個抽象矩形定義成昵稱、簡介、圖片和內容并分別進行填充。一個帶有自動布局屬性的卡片就完成了。
7. 是時候表演真正的技術了
規則制定了，你就可以為所欲為了。
下面，我用三類場景來一一給你們做演示。
調序
自動布局化的設計中，你可以肆意調整任何元素的位置，而不會影響到你的布局。調序方式可以拖拽，也可以方向鍵。
拉伸
隨意對一些元素做拉伸處理以改變尺寸，父級將會根據目前的規則跟隨產生適應變化。
比如我們改變封面尺寸和頭像，上下方內嵌的兩個父級（自動布局化的 nested frame）將跟隨自適應，而這兩個父級又同時是整個卡片（自動布局化的 top frame）的子級，因此卡片也會跟隨自適應。
另外，對文字進行新增和刪除后，文本框的高度變化也可以看作是一種拉伸。卡片也同樣能跟隨自適應。
增減
對子級進行新增或刪除，同樣會基于當前的布局產生自適應效果。
增減操作的幾點小提示：
- 圖層隱藏，可以實現和刪除一樣的效果。我的建議盡量以隱藏代替刪除，尤其是對于自動布局化的組件，這個技巧非常、非常實用；
- 如果在刪除某個元素后依然想占位，直接將其透明度降至 0 即可。
至此，自動布局的初步玩法至此講完。
figma 入門攻略到此結束。最后，我們來一起盤一下——
- figma 是基于瀏覽器的屬性讓你更專注到設計本身，幫助設計師提效、可協作且更流暢的更好完成設計工作；
- frame 是 figma 中最重要的一個概念，它是多個重要功能的前置，自帶的多合一優勢也能迅速提效；
- 自動布局作為 figma 工具的核心賣點，能大幅減少設計師在布局方面所花的重復勞動。
最后，真誠得期待這塊面向未來的工具，能幫助你從低效、重復的桎梏中徹底解放生產力。
歡迎關注作者微信公眾號：「VMIC UED」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
熱評 JERREAL