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