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