1. 自動(dòng)布局快捷鍵
Mac OS 系統(tǒng)快捷鍵
- 開啟自動(dòng)布局：Shift + A
- 關(guān)閉自動(dòng)布局：Shift + Option + A（圖上漏掉了）
- 關(guān)閉自動(dòng)布局并刪除 Frame：Command + Shift + G
- 重制（復(fù)制并粘貼，包含自動(dòng)布局設(shè)置）：Command + D
Windows 快捷鍵
- 開啟自動(dòng)布局：Shift + A
- 關(guān)閉自動(dòng)布局：Shift + Alt + A（圖上漏掉了）
- 關(guān)閉自動(dòng)布局并刪除 Frame：Ctrl + Shift + G
- 重制（復(fù)制并粘貼，包含自動(dòng)布局設(shè)置）：Ctrl + D
2. 樣式復(fù)制粘貼
Mac OS 系統(tǒng)快捷鍵
- 樣式復(fù)制：Option + Command + C
- 樣式粘貼：Option + Command + V
Windows 快捷鍵
- 樣式復(fù)制：Option + Ctrl + C
- 樣式粘貼：Option + Ctrl + V
3. 調(diào)準(zhǔn)順序
其實(shí)就算不用快捷鍵，也可以通過(guò)鼠標(biāo)調(diào)準(zhǔn)順序。
但是畢竟中心哪個(gè)圓圈面積太小不好找，數(shù)量不多的話，用快捷鍵會(huì)更快一些。
Mac OS 系統(tǒng)快捷鍵
- 往左調(diào)整：Command + [
- 往右調(diào)整：Command + ]
Windows 快捷鍵
- 往左調(diào)整：Ctrl + [
- 往右調(diào)整：Ctrl + ]
4. 調(diào)整間距
通過(guò)自動(dòng)布局設(shè)置，可以讓元素的尺寸根據(jù)間距大小自動(dòng)調(diào)整寬度。
利用這一點(diǎn)，可以用來(lái)做很多東西，例如滑動(dòng)條。
5. 自動(dòng)間距
把間距數(shù)值改成 auto， 會(huì)自動(dòng)均分 Frame 內(nèi)元素的間距。
雖然右上角的布局圖標(biāo)也能起到同樣的作用，但是那樣操作的步驟更多：需要先調(diào)整好兩邊的元素的位置，不能根據(jù)所在 Frame 自動(dòng)調(diào)整。
6. 輸入 0.001 設(shè)置 0 高度
Figma 不允許輸入 0 高度，如果你嘗試這么做，按下回車后數(shù)值會(huì)變成 1。
但是有個(gè)小漏洞，那就是如果你輸入 0.001，按下回車后就會(huì)發(fā)現(xiàn)數(shù)值變成 0 了。
一定要小數(shù)點(diǎn)后三位，如果只輸入小數(shù)點(diǎn)后一位或兩位，就不會(huì)有這個(gè)效果。
7. 快速選擇內(nèi)部元素
如果分組或 Frame 層級(jí)過(guò)多，想要選擇下層的元素，通常是雙擊。
但是層次多了，也還是很麻煩。
還可以按下 Command 的同時(shí)用鼠標(biāo)點(diǎn)擊，這樣可以直接選擇最里層的元素。
可是，如果想要選擇的不是最里層，而是倒數(shù)第 N 層呢？
這種情況，用快捷鍵會(huì)更方便一些：
- 選擇下層：回車鍵
- 選擇上層：Shift + 回車鍵
- 選擇下一個(gè)：Tab
- 取消選擇：Esc
8. 避免將元素放入自動(dòng)布局
往自動(dòng)布局里放東西，很容易打亂布局，一下子就變化很大。
如果想要避免這種“手誤”，可以在拖動(dòng)元素的同時(shí)按下空格鍵，這樣元素就不會(huì)被放到任何自動(dòng)布局里。
9. 利用透明度快速自動(dòng)布局
上面卡片的自動(dòng)布局，其實(shí)可以用 Space Between 一鍵設(shè)置出來(lái)。
其實(shí)中間的圖標(biāo)和卡片同寬，只是背景透明所以看起來(lái)是居中對(duì)齊的。
標(biāo)題其實(shí)不止左上角那一個(gè)，卡片左下方還有一個(gè)一模一樣的，只是可見度設(shè)置為 0%，所以看不出來(lái)。
10. 利用自動(dòng)布局設(shè)置最小寬度
很多組件（如上圖文本框）有個(gè)最小寬度，如果簡(jiǎn)單地使用自動(dòng)布局是無(wú)法滿足的。
方法也不難，就是文本框的 Frame 里加一條不可見的線段，而這個(gè)線段的寬度就確定了文本框的最小寬度。
沒想到 Figma 的自動(dòng)布局有這么多門道，使用起來(lái)多做些組件，肯定能大大提高設(shè)計(jì)效率～
原文地址：體驗(yàn)進(jìn)階（公眾號(hào)）
作者：設(shè)計(jì)師ZoeYZ
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng) ?Figma的自動(dòng)布局也太好用了吧！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.b186.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)