Figma實用小技巧

在這裏插入圖片描述

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. 樣式分類管理

用“/”分組

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章