前言
初學Figma的時候簡潔的UI雖然看起來很舒服，但是對於沒用過SKETCH的使用者來說常常會不知道怎麼製作自己想像中的UI畫面，雖然我們常常使用Aodbe系列的軟體，但既然學習了一套新的軟體，我想這套網頁版的軟體能力一定不僅僅如此而已！ 所以上網查詢了這套軟體有什麼厲害的Tips ，果然這套軟體的Tips非常的厲害甚至比我用過的軟體有更好用的方式製作UI，今天就跟大家一起學習有關Figma的Tips吧！
物件結合和圓角的技巧
透過我們常用的物件結合配合快速鍵複製位移就可以產生跟著位置移動的圓角效果。
隱藏用戶界面以擴大視野
隱藏Figma的UI，可以最全面地查看整個設計。一直以來對我來說都是必不可少的動作。按“⌘+”。或“⌘+ \” ，windows用戶使用shift即可。
隱藏其他人的滑鼠顯示
能在網頁上看到一起工作的滑鼠很酷。但是大部分時候是還蠻干擾的，並且會影響我們的生產力。我們可以通過查看 View -> Uncheck “Show Multiplayer Cursors” or press “Option + shift + \”
更換元素風格
除了複製元素之外，我們還可以復製樣式。當我們要覆蓋組件中的元素時，這非常有用。
- 選擇要複製的元素。按Ctrl / Cmd + Option + C 複製元素的樣式（顏色，陰影，邊框半徑等）
- 選擇目標元素，按 Ctrl / Cmd + Option + V進行粘貼
Frame vs Group 的正確用法
Group
調整group的大小時，其子元素將如你使用的方式進行縮放。
Frame
調整大小時，框架邊界的大小將獨立於其子元素而調整。因此，每個物件會進行的大小變成間距上的縮放。
在 prototype 中播放
當使用多個 prototype 時，請創建一個 Master Frame ，所有流程都可以鏈接回切換流程。
因此，當你迷路時，請按“ R”返回主選單，在進行測試時這項方法非常有用。
全功能進度條組件
我們可以將此組件用於0到100％的任何進度狀態。
- 創建一個父框架，並確保選中 “Clip Content” 。
- 使用自動佈局創建子框架適用於文本圖層。
- 使用時更改文本以定義不同的加載狀態。
從Sketch複製圖案
我們不需要將整個 Sketch 文件導入到Figma只是為了複製圖案。我們可以將元素直接從Sketch複製到Figma。
- 在sketch中選擇元素
- 右鍵單擊並選擇 “ Copy SVG Code ”
- 在Figma中，粘貼“shfit+ V”
- 享受真正的向量元素。
新增文件時設置預設顏色
每次我們添加一個新的文件，Figma會將默認顏色設置為#000000，這在我們不注意更改顏色時非常危險，因為它不在我們的調色板中。
為文本設置默認顏色。
- 添加具有所需顏色的新文件。
- 進入選單“ Edit -> Set Default Propertie ”
- 每次我們新增文件，樣式都會匹配，而不會出現“設計系統”顏色。
在Figma上打開多個窗口
你知道可以在桌面客戶端中打開多個窗口嗎？⇧+ Ctrl + N（Win）。
方便在同一文件中同時使用不同的縮放級別或像素預覽設置。
快速導入任何文件或文件夾
是否有一個充滿設asset的文件夾？
只需單擊並拖動即可將任何文件或文件夾快速導入Figma。
調整框架大小時忽略約束設置
調整框架大小時，請在macOS上按住Command（⌘），在Windows / Chrome OS上按住Ctrl，以忽略該框架內所有對象的約束設置。
具有自動佈局的 Responsive 組件？
使用“自動佈局”在框架內設置子項以向左和向右（ when vertical ）或頂部和底部（ when horizontal ）伸展。