本文將設(shè)計(jì)團(tuán)隊(duì)接觸 Figma 以來(lái)的重要心得、經(jīng)驗(yàn)進(jìn)行梳理總結(jié)，幫助大家更好得理解和掌握 Figma。本次主要介紹Figma 中最重要、也最提效的兩個(gè)概念——Frame和自動(dòng)布局。

更多Figma 干貨：

一、先簡(jiǎn)單講講，F(xiàn)igma 是什么？

用一句話(huà)去定義 figma，它是一款基于瀏覽器的全能型設(shè)計(jì)工具。簡(jiǎn)單說(shuō)，只需要有瀏覽器和網(wǎng)絡(luò)，你就可以開(kāi)干了。

figma 全能的地方在于，在基于瀏覽器的環(huán)境下， 你就可以搞這些：ui、原型、云同步、實(shí)時(shí)討論、開(kāi)發(fā)協(xié)作、實(shí)時(shí)共享、團(tuán)隊(duì)庫(kù)等等。

二、基礎(chǔ)但重要的概念——Frame

絕大多數(shù)人對(duì) frame 有誤解，覺(jué)得它人畜無(wú)害，在 figma 中僅僅是扮演畫(huà)板的小角色，然鵝并不是。

大猩猩在 SD12 集和櫻木說(shuō)過(guò)：能夠掌控籃板球，就能掌控比賽。

我這里要說(shuō)，能夠掌控 frame，就能掌控 figma。

1. Figma 中的對(duì)象關(guān)系

在講 frame 之前，先嘮嘮對(duì)象關(guān)系。了解它才可以幫你更好得理解 frame 乃至 figma 中布局的底層邏輯。

figma 官方將所有對(duì)象的關(guān)系用這三個(gè)詞來(lái)描述——Parent父級(jí)、Child子級(jí)和Sibling平級(jí)。

懂一些開(kāi)發(fā)知識(shí)的朋友會(huì)比較眼熟，這些術(shù)語(yǔ)全部來(lái)自前端語(yǔ)言 JavaScript 中的 dom 樹(shù)。它和金字塔原理中的「歸納分組」一樣，都是通過(guò)父子級(jí)的節(jié)點(diǎn)鏈接形成樹(shù)狀結(jié)構(gòu)，而這種結(jié)構(gòu)可以解釋所有對(duì)象之間的關(guān)系。

舉個(gè)例子，下面這個(gè)模塊中的所有元素，都可以此關(guān)系解釋?zhuān)?/p>

關(guān)注按鈕相對(duì)內(nèi)部的 icon、文字和背景是父級(jí)關(guān)系，而它相對(duì)一整個(gè)作者模塊，又是子級(jí)關(guān)系。

在 figma 中，可以作為父級(jí)來(lái)包裹子級(jí)元素的總共就這三類(lèi)：component 組件、group 編組，以及下面要講的 frame 框架。

2. 什么是 Frame

Figma 非常多的概念和邏輯都引自前端，而首當(dāng)其沖的就是 frame。

它概念上等同于前端的 div。簡(jiǎn)單說(shuō)，就是用來(lái)包裹設(shè)計(jì)元素的容器 container。

容器可以嵌套，小的嵌套成大的，大的嵌套成更大的。

而就是這個(gè) frame 的存在，造就了 figma 和 sketch 截然不同的作圖邏輯。

sketch 作圖邏輯就是一個(gè)個(gè)圖層的機(jī)械堆砌，比如按鈕——畫(huà)個(gè)矩形和文字，最后再group。我們的目標(biāo)只需要畫(huà)出來(lái)一個(gè)像模像樣的按鈕就行。

figma 作圖邏輯是基于一個(gè)個(gè)可嵌套的「盒子」進(jìn)行嵌套布局，它和開(kāi)發(fā) css+div 布局的邏輯是一致的。我們的目標(biāo)并非是畫(huà)出來(lái)，而是做一個(gè)可動(dòng)態(tài)響應(yīng)、可靈活擴(kuò)展的布局。

看到這，是不是感覺(jué) frame 很像我們常用的 group？這兩個(gè)概念在圖層面板中分別以虛線(xiàn)框和#號(hào)表示。是除了組件外非常典型的兩個(gè)父級(jí)。

很多老鐵應(yīng)該和我一樣，受 sketch、ps 等軟件的影響，凡是涉及到元素編組全用 group，感覺(jué) frame 就是個(gè)沒(méi)啥用的畫(huà)板。

但是，我發(fā)現(xiàn)我大錯(cuò)特錯(cuò)?，F(xiàn)在，我要大聲說(shuō)出我的結(jié)論：

figma 中請(qǐng)一律使用 frame，group 能不用就不用，因?yàn)?/p>

3. frame 有這些優(yōu)勢(shì)

①frame 的約束功能

舉個(gè)例子：

分別以 group 和 frame 編組，在改變父級(jí)尺寸后，group 會(huì)失真變形；而 frame 因?yàn)槟J(rèn)內(nèi)置了約束（內(nèi)間距固定，類(lèi)似 sketch 的 pin to edge），因此可以動(dòng)態(tài)響應(yīng)，不會(huì)變形。

也就是說(shuō)，你創(chuàng)建 group，就是在創(chuàng)建一個(gè)隨時(shí)都可以被破壞的不穩(wěn)定對(duì)象。

②frame 擁有多合一屬性?xún)?yōu)勢(shì)

Group 唯一的功能，就是編組。而且編組尺寸完全取決于子級(jí)元素的尺寸，無(wú)法自由設(shè)定，對(duì)于布局起不到任何效率提升。

而 frame 不僅幫助靈活布局，多合一的屬性也能減少大量作圖成本。

這里就直接用畫(huà)板、編組和形狀圖層三類(lèi)屬性來(lái)說(shuō)。

畫(huà)板屬性

它等同于 sketch 的 artbord 畫(huà)板，F(xiàn)igma 官方用 Top level frame 來(lái)指代具備這個(gè)屬性的 frame，意思就是最頂層、最上方的。這類(lèi) frame 只能作為父級(jí)。

比如信息流頁(yè)面，Top level frame 就是整個(gè)界面畫(huà)板，它被直接放置在 canvas 畫(huà)布上，只能作為父級(jí)存在。

值得一說(shuō)的是，F(xiàn)igma 為了兼顧用戶(hù)習(xí)慣，特意將 sketch 中新建畫(huà)板的快捷鍵沿用到 frame 上。你現(xiàn)在可以通過(guò) A 和 F 兩個(gè)快捷鍵來(lái)建立畫(huà)板。

編組屬性

這個(gè)屬性與 group 類(lèi)似，具備此屬性的 frame 被官方用了 nested frame 這個(gè)名字來(lái)指代，意思就是嵌套的 frame。

任何被嵌套在另外一個(gè) frame 中的 frame，都可以稱(chēng)之為 nested frame。

即畫(huà)板內(nèi)的所有 frame，都是具有編組屬性的 nested frame。它既可作為父級(jí)又可作為子級(jí)。比如信息流的一個(gè)個(gè)卡片，它被畫(huà)板所嵌套，既是畫(huà)板的子級(jí)，又是卡片內(nèi)部元素的父級(jí)。

最后，那些無(wú)法再被細(xì)分、不能去主動(dòng)編組的對(duì)象，則統(tǒng)稱(chēng)為子級(jí)元素（即非父級(jí)對(duì)象，frame、group 和 component 外的所有對(duì)象）。

frame 的編組方式也很簡(jiǎn)單，選中你想編組的對(duì)象后，cmd+alt+G 即可完成。

形狀圖層屬性

這個(gè)是通用屬性，不論是 Top level frame 還是 nested frame 都有。

它讓 frame 能夠像普通矩形那樣，自由定義尺寸和樣式。樣式包括圓角、填充、描邊、效果等等。而 group 既無(wú)法定義尺寸、又不能添加樣式。即便你選中 group 強(qiáng)行添加樣式時(shí)，也只能添加到組內(nèi)的子級(jí)元素。

由此可見(jiàn)，以往 sketch 中需要各自用 artboard、group 和矩形三種元素來(lái)實(shí)現(xiàn)這三種功能，而在 figma 中只需要 frame 一個(gè)元素就能全盤(pán)搞定。

③frame 可以裁切

每個(gè) frame 都額外提供了 clip content 功能來(lái)快速實(shí)現(xiàn)裁切效果。

舉個(gè)例子，比如橫劃卡片末端都需要以裁切過(guò)的卡片讓用戶(hù)感知到延續(xù)性。

如果用 group，需要手動(dòng)調(diào)整矩形的尺寸和圓角去制造裁切效果（如果裁切對(duì)象有文字，group 還要手動(dòng)新建矩形去遮蓋，很麻煩），而 frame 只需要勾選面板中的裁切選項(xiàng)，就可以自由控制裁切范圍。

4. 最后，基于以上的屬性來(lái)點(diǎn)案例

①制作一個(gè)按鈕

傳統(tǒng) group 做法，花六步：

1. 創(chuàng)建文字；
2. 創(chuàng)建矩形；
3. 定義矩形樣式
4. 矩形置底；
5. 手動(dòng)對(duì)齊；
6. group 編組

如果使用 frame 的話(huà)，只需要四步

1. 創(chuàng)建文字；
2. 快捷鍵 cmd+alt+G、或者 F 創(chuàng)建 frame（基于 frame 的編組屬性）；
3. 確定約束規(guī)則；
4. 定義 frame 尺寸和樣式（基于 frame 的形狀圖層屬性）

可以看到，frame 制作按鈕的操作成本要低得多。

而且 frame 所生成的圖層數(shù)量也更精簡(jiǎn)，減少了后續(xù)維護(hù)和管理成本。

另外，frame 因?yàn)橹С旨s束，所以能跟隨父級(jí)尺寸變化完美響應(yīng)。

當(dāng)然，按鈕只是個(gè)示意，所有的控件都可以利用 frame 快速繪制。

②制作有裁切效果的 icon

比如我要繪制一個(gè)圖片 icon，其中的山峰圖形有裁切效果。

傳統(tǒng)的做法是蒙板+group，五步走：

1. 繪制圖形；
2. 創(chuàng)建矩形；
3. 原位復(fù)制一層矩形兜底；
4. 點(diǎn)選山峰和復(fù)制的矩形，創(chuàng)建剪切蒙板；
5. group 編組

現(xiàn)在再試試 frame，三步到位

1. 繪制圖形；
2. 創(chuàng)建 frame（記得勾選裁切）；
3. 加入樣式，搞定。

再?gòu)膱D層數(shù)量上看，group+蒙板的方式所產(chǎn)生的元素?cái)?shù)量是 frame 的 2 倍，而且嵌套關(guān)系復(fù)雜，光看圖層結(jié)構(gòu)壓根看不懂。而 frame 的結(jié)構(gòu)非常精簡(jiǎn)易懂。

而且 frame 可以直接通過(guò)控制尺寸來(lái)控制裁切范圍，而 group+蒙板的形式需要分別調(diào)節(jié) mask 和底板兩個(gè)元素的尺寸實(shí)現(xiàn)裁切范圍調(diào)整。

5. 使用 frame 的常見(jiàn)問(wèn)題與解決方案

最后，再來(lái)分享下我和團(tuán)隊(duì)小伙伴在使用 frame 時(shí)，所遇到的幾個(gè)非常典型的問(wèn)題。

①更改畫(huà)板高度時(shí)，畫(huà)板內(nèi)元素跟隨移動(dòng)

這大概是 frame 最典型的一個(gè)問(wèn)題了，當(dāng)時(shí)我也在這個(gè)坑里躺了 n 次，體驗(yàn)極其惡劣。

原因分析：

歸咎于萬(wàn)惡的 group。group 不支持約束，無(wú)法跟隨響應(yīng)。因此 group 的父級(jí)發(fā)生尺寸變化時(shí)，group 就會(huì)跟隨拉伸。

解決方案：

按住 cmd 拖動(dòng)即可解掉。

②拖動(dòng)時(shí)老是移動(dòng)到畫(huà)板外

比如我想在畫(huà)板中實(shí)現(xiàn)一個(gè)元素的裁切效果，但移動(dòng)至一定距離后總是脫離畫(huà)板父級(jí)的包裹，只能去圖層面板上手動(dòng)把元素拖拽到畫(huà)板中。

原因分析：

frame 詭異的吸附邏輯。

解決方案：

在拖動(dòng)時(shí)按住空格鍵即可固定父子級(jí)關(guān)系。即便把元素移出畫(huà)板，你會(huì)發(fā)現(xiàn)元素依舊是 frame 的子級(jí)！

③畫(huà)板里的 frame 帶名稱(chēng)

原因分析：

所有直接置于 Canvas 畫(huà)布中的 frame（即前面所說(shuō)的 top level frame），會(huì)全部作為畫(huà)板并外顯名稱(chēng)。所以，frame 帶名稱(chēng)的唯一原因就是，它是個(gè)最外側(cè)的畫(huà)板，并沒(méi)有作為子級(jí)被嵌套。

解決方案：

很簡(jiǎn)單，直接將其拖入畫(huà)板，成為畫(huà)板的子級(jí)即可。

注意，這里又有個(gè)衍生出的新問(wèn)題。很多小伙伴包括我在拖拽時(shí)會(huì)遇到嵌套不了的情況，其實(shí)只需要點(diǎn)下空白處、重新選擇一次，就能順利嵌套了。

三、Frame 講完，來(lái)講下 figma 大殺器-自動(dòng)布局

auto layout 自動(dòng)布局，毫無(wú)疑問(wèn)是 figma 的大殺器，正如 symbol 之于 sketch，database 之于 notion。

它是當(dāng)之無(wú)愧的核心賣(mài)點(diǎn)，也是讓其在設(shè)計(jì)工具之戰(zhàn)中突破重圍的勝負(fù)手。

1. 為啥自動(dòng)布局得重點(diǎn)講

設(shè)計(jì)師的日常工作，存在著大量重復(fù)勞動(dòng)；而這些重復(fù)勞動(dòng)中大部分又和布局相關(guān)。

當(dāng)元素發(fā)生了尺寸、增減或順序的變化后，為了維持原有的規(guī)則，你又得花上新一輪的成本重新調(diào)整布局。所以，很多時(shí)候看似你每天干了很多，但回過(guò)頭來(lái)想想又感覺(jué)什么也沒(méi)干。

而自動(dòng)布局的出現(xiàn)，完美得解決了這一大痛點(diǎn)。一個(gè)擅長(zhǎng)使用自動(dòng)布局的設(shè)計(jì)師，有著高出旁人雙倍不止的生產(chǎn)效率，也能預(yù)留出雙倍不止的時(shí)間留給創(chuàng)意或者自我成長(zhǎng)。

2. 什么是自動(dòng)布局

通俗點(diǎn)說(shuō)，自動(dòng)布局，就是你先制定一個(gè)標(biāo)準(zhǔn)化布局規(guī)則（比如想保持 20px 間距、保持左對(duì)齊等）。然后當(dāng)子級(jí)發(fā)生尺寸、增減等變化后，父級(jí)能基于這個(gè)布局規(guī)則產(chǎn)生適應(yīng)變化，或者父級(jí)尺寸發(fā)生變化后，子級(jí)能基于規(guī)則產(chǎn)生適應(yīng)變化。

比如下面這個(gè)例子，就是自動(dòng)布局化的結(jié)果：

自動(dòng)布局的圖標(biāo)

自動(dòng)布局圖標(biāo)由兩個(gè)矩形排列而成，并且圖標(biāo)中的排列方向既當(dāng)前對(duì)象布局的方向，可以說(shuō)是很形象了。

只有 frame 才能自動(dòng)布局

如果自動(dòng)布局的對(duì)象還不是 frame，那么在自動(dòng)布局的同時(shí)，figma 會(huì)自動(dòng)創(chuàng)建一個(gè) frame。因此只需要?jiǎng)?chuàng)建就行，不用擔(dān)心對(duì)象不是 frame。

3. 自動(dòng)布局該如何上手

自動(dòng)布局的創(chuàng)建、復(fù)原

如圖，使用快捷鍵 shift+A 或點(diǎn)擊「新增」按鈕即可創(chuàng)建，shift+alt+A 或者點(diǎn)擊「刪除」按鈕即可復(fù)原。

自動(dòng)布局的兩類(lèi)組合方式

自動(dòng)布局的組合方式取決于初始的擺放位置。

4. 并列型

比如咱們畫(huà)幾個(gè)很隨意的矩形，再隨意散落在畫(huà)布上，shift+A 后，四個(gè)元素就會(huì)自動(dòng)對(duì)齊。這種組合方式，稱(chēng)之為「并列型」。

從左側(cè)圖層列表可以看到，自動(dòng)布局后 figma 會(huì)自動(dòng)為你創(chuàng)建好一個(gè) frame，雖然圖標(biāo)變了，但不論是圖層名和屬性名都在明確告訴你，它依舊是 frame！

5. 包含型

如果，我將其中三個(gè)矩形放置于最大的矩形上，讓其形式上趨向于一個(gè)包含關(guān)系，那么在 shift+A 后，你會(huì)發(fā)現(xiàn)個(gè)頭最大的那個(gè)，真的成為了收納三個(gè)小矩形的容器。這種組合方式，咱們可以稱(chēng)之為「包含型」。

而如果將三個(gè)矩形替換為一行文字，一個(gè)自動(dòng)布局的按鈕就這么誕生了。

另外，在轉(zhuǎn)為「包含型」的自動(dòng)布局后，左側(cè)圖層列表也會(huì)發(fā)生一些很有意思的事情——原有的容器層將會(huì)消失，frame本身充當(dāng)容器。這其實(shí)也是利用了frame的形狀圖層屬性。

所以，創(chuàng)建按鈕這件事就變得異常簡(jiǎn)單。

我們不需要提前創(chuàng)建容器，只需要對(duì)一行文字 shift+A 就行。基于 frame 的形狀圖層屬性，你可以隨意添加你想要的樣式。

你可以想象一下，如果繼續(xù)使用傳統(tǒng)的編組+矩形的形式，會(huì)多出多少的操作，后續(xù)的維護(hù)又需要耗費(fèi)多少成本。

創(chuàng)建完，定個(gè)規(guī)則先

創(chuàng)建了自動(dòng)布局后，右側(cè)會(huì)出現(xiàn) auto layout 面板。你可以將其當(dāng)做你的控制室，因?yàn)楹罄m(xù)所有布局規(guī)則的制定，都要在這里完成。

下面我們單獨(dú)一個(gè)個(gè)拆出來(lái)說(shuō)。

布局方向

就是子級(jí)元素排列的橫縱方向，點(diǎn)擊切換。一層自動(dòng)布局只能設(shè)置一種方向，要構(gòu)建多個(gè)方向的話(huà)要嵌套。

我們這里選縱向。

子級(jí)間距

就是子級(jí)元素之間的距離，一層自動(dòng)布局只能設(shè)置一種間距，需要多種間距同樣需要嵌套。

這里我們?cè)O(shè)定 24px。

內(nèi)間距

即父級(jí)邊緣到子級(jí)整體的內(nèi)間距，它的設(shè)定有兩個(gè)入口。

第一個(gè)設(shè)置入口：回型按鈕，你可以一鍵等距設(shè)置。

如果需要設(shè)置不同的間距，可以通過(guò)逗號(hào)間隔。比如輸入「10，20，30，40」，這四個(gè)值就分別對(duì)應(yīng)頂部、右側(cè)、底部和左側(cè)的間距。

第二個(gè)設(shè)置入口在尾部按鈕，在這里，上下左右四個(gè)內(nèi)間距可以獨(dú)立設(shè)置。

這里我們就設(shè)定 24px 的等距，輸入框鍵入即可。

因?yàn)樽詣?dòng)布局屬于 frame，而 frame 有自帶形狀圖層屬性，所以這里可以加入填充和圓角。

內(nèi)部布局方式

可以控制子級(jí)元素的對(duì)齊，以及在整個(gè)父級(jí)中的位置（父級(jí)尺寸發(fā)生改變時(shí)常用），比如調(diào)大剛剛的父子尺寸，就可以通過(guò)內(nèi)部布局來(lái)進(jìn)行版面控制。

一共九種內(nèi)部布局方式，可以根據(jù)需要自由選擇。

子級(jí)分布方式

堆疊：

即所有子級(jí)都組合在一起，改動(dòng)父級(jí)尺寸時(shí)，子級(jí)布局保持固定在某一位置。

比如我們將子級(jí)位置固定到左上角，那么不論如何拉伸父級(jí)，它的位置始終保持不變。和約束邏輯很像。

等距：

不論父級(jí)尺寸如何改變，最外側(cè)的子級(jí)固定在兩端，所有子級(jí)的間距均勻分布。在控制一些等距元素的響應(yīng)時(shí)（如底 tab 欄）會(huì)用到，使用頻率非常之高。

6. 自動(dòng)布局的嵌套

前面說(shuō)過(guò)，一層自動(dòng)布局只能擁有一個(gè)布局方向和一種子級(jí)間距，當(dāng)需要新增時(shí)就需要用到嵌套。

如何嵌套也非常簡(jiǎn)單，直接選中想要嵌套的子級(jí) shift+A 就行。

比如我們想調(diào)大中間倆矩形的間距，只需將上、下側(cè)的兩個(gè)矩形各自創(chuàng)建一層自動(dòng)布局即可。

再比如我們想新增一個(gè)頭像，但頭像加入后會(huì)多出一個(gè)橫向布局方向，這時(shí)同樣可再做一次嵌套。

最后，就可以得出類(lèi)似 feed 流的一個(gè)骨架圖。

為了模擬真實(shí)的場(chǎng)景，我們將這幾個(gè)抽象矩形定義成昵稱(chēng)、簡(jiǎn)介、圖片和內(nèi)容并分別進(jìn)行填充。一個(gè)帶有自動(dòng)布局屬性的卡片就完成了。

7. 是時(shí)候表演真正的技術(shù)了

規(guī)則制定了，你就可以為所欲為了。

下面，我用三類(lèi)場(chǎng)景來(lái)一一給你們做演示。

調(diào)序

自動(dòng)布局化的設(shè)計(jì)中，你可以肆意調(diào)整任何元素的位置，而不會(huì)影響到你的布局。調(diào)序方式可以拖拽，也可以方向鍵。

拉伸

隨意對(duì)一些元素做拉伸處理以改變尺寸，父級(jí)將會(huì)根據(jù)目前的規(guī)則跟隨產(chǎn)生適應(yīng)變化。

比如我們改變封面尺寸和頭像，上下方內(nèi)嵌的兩個(gè)父級(jí)（自動(dòng)布局化的 nested frame）將跟隨自適應(yīng)，而這兩個(gè)父級(jí)又同時(shí)是整個(gè)卡片（自動(dòng)布局化的 top frame）的子級(jí)，因此卡片也會(huì)跟隨自適應(yīng)。

另外，對(duì)文字進(jìn)行新增和刪除后，文本框的高度變化也可以看作是一種拉伸?？ㄆ餐瑯幽芨S自適應(yīng)。

增減

對(duì)子級(jí)進(jìn)行新增或刪除，同樣會(huì)基于當(dāng)前的布局產(chǎn)生自適應(yīng)效果。

增減操作的幾點(diǎn)小提示：

1. 圖層隱藏，可以實(shí)現(xiàn)和刪除一樣的效果。我的建議盡量以隱藏代替刪除，尤其是對(duì)于自動(dòng)布局化的組件，這個(gè)技巧非常、非常實(shí)用；
2. 如果在刪除某個(gè)元素后依然想占位，直接將其透明度降至 0 即可。

至此，自動(dòng)布局的初步玩法至此講完。

最后

figma 入門(mén)攻略到此結(jié)束。最后，我們來(lái)一起盤(pán)一下——

1. figma 是基于瀏覽器的屬性讓你更專(zhuān)注到設(shè)計(jì)本身，幫助設(shè)計(jì)師提效、可協(xié)作且更流暢的更好完成設(shè)計(jì)工作；
2. frame 是 figma 中最重要的一個(gè)概念，它是多個(gè)重要功能的前置，自帶的多合一優(yōu)勢(shì)也能迅速提效；
3. 自動(dòng)布局作為 figma 工具的核心賣(mài)點(diǎn)，能大幅減少設(shè)計(jì)師在布局方面所花的重復(fù)勞動(dòng)。

最后，真誠(chéng)得期待這塊面向未來(lái)的工具，能幫助你從低效、重復(fù)的桎梏中徹底解放生產(chǎn)力。

歡迎關(guān)注作者微信公眾號(hào)：「VMIC UED」