1. 介紹
原作:lijxse 視頻地址
文字版整理:巖鳴楊子
2. 快速拖拽調整數值
按住option可在數值上拖拽調整,不按option時只能在X/Y/W/H/旋轉/圓角等的圖標上拖拽調整,不能調整透明度的數值。
3. 屬性粘貼複製
shift+X:互換填充和描邊
選中圖層的某個屬性,然後cmd+C,則可複製這個圖層特定的屬性。
選中圖層的某個屬性,然後cmd+V,則可粘貼到這個圖層特定的屬性上。
4. 列表切換&快速搜索
option+1:切換到Layers
option+2:切換到Assets,並自動進入搜索狀態
cmd+/:全局搜索
5. 基礎操作瘋狂用
shift+1:顯示所有設計圖
按住Z:顯示放大鏡,然後拖拽出一片區域放大顯示
shift+2:對當前元素放大顯示
6. Framer必知高效技巧
cmd+option+G:把選中的幾個元素放進Frame裏
按住cmd時拖動frame邊框可以忽略裏面的元素位置調整frame大小
按住cmd+option時拖動frame邊框可以對稱地調整frame大小
7. 組件庫快速替換
單獨替換裏面的一個組件:按住option+cmd,從assets裏面拖入。
8. 取消組件
option+cmd+B
cmd+G:編組
shift+cmd+G:取消編組
9. 展開收起圖層列表
收起option+L,選擇某個圖層可單獨收起該圖層
10. 圖層上下級選擇
回車鍵:選擇組名,然後按回車鍵就能選中組內所有圖層
shift+回車:從下級往上級選
11. 等分的寬度計算技巧
點右邊Layout Grid,選擇Columns(列),調整好數值。選中所需要自動調整寬度的圖層,將右邊constraints調成“left&right”,圖層就能跟隨grid自動調整寬度。
12. 快速調整圖層透明度
直接按數字鍵,圖層就能改成相應透明度。
13. 快速調整位置對齊&對稱
option+W/A/S/D:移動到上/左/下/右邊緣
option+V:垂直居中
option+H:水平居中
shift+V:上下翻轉
shift+H:左右翻轉
14. 快速實時預覽顏色
control+C
15. 參考線、佈局的顯示隱藏快捷鍵
control+G:顯示/隱藏柵格或網格
shift+R:顯示/隱藏標尺及參考線
16. 用Figma製作簡單可外鏈的“真實”網頁
在prototype的interaction裏選一種交互方式,然後選Open Link,輸入網址。
17. 從圖層快速定位到設計稿
shift+2,或雙擊圖層圖標
18. 批量添加圖片
cmd+shift+K
19. 批量重命名
cmd+R
20. 善用加減乘除調整位置
數值框內可直接進行加減乘除計算。
21. 手動在歷史快照中添加自己標記的歷史版本
點擊文件名右邊小箭頭,展開下拉列表,選擇Show Version History即可在右邊顯示出Version History,點右邊小加號添加一個版本。也可用快捷鍵cmd+option+S。
22. 需要付費的團隊組件庫
付費版$15/月,可以調用其他文件裏的組件庫。免費版只能同步樣式,不能同步組件庫。
23. 樣式分類管理
用“/”分組