Apr 29
10個使用 Figma 心得，讓你的設計事半功倍
Figma 是非常容易上手的 UI/UX 設計工具，線上多人協作功能讓工程師或是產品團隊都能很容易瀏覽，甚至修改設計，為設計師們節省不少的時間。據 UX Tool 的年度設計工具問卷顯示，Figma 用家的佔比已經由2018年的21%，至今超越 Sketch 到 77%。去年閃亮登場的 FigJam ，更方便團隊使用 Freehand 般的白板協作。身為 Friends of Figma 的一分子，我們也想在這裡與大家分享是個精簡使用的Figma小貼士。
1. 按住「Shift」鍵移動物件 (Nudge) 的距離
Figma 的預設中，按方向鍵可以移動物件 1px (Small Nudge)，若按住 Shift一下就會移動 10px (Big Nudge)。但如果使用 8pt grid 的話，每次要手動調整兩下，其實 Preferences 內的 Nudge amount 可以自訂 Small Nudge 和 Big Nudge的數值，如設定成 2px 及 16px，那麼所有物件移動的幅度也是 2的倍數，用起上來也事半功倍。
2. Figma 超易學習快捷鍵
以下幾個貼士也將會提到Keyboard Shortcuts，其實 Figma 的鍵盤快捷鍵圖表也十分值得表揚（同時按 Ctrl + Shift + ? 或 Cmd + / 輸入 Keyboard Shortcuts）。它不單簡單易明，更保留用家曾否使用過該快捷鍵的紀錄。如上圖可見，暫時這頁我只用過3個快捷鍵，這便簡單成為上手 Figma 、學習如何快速操作 Figma 的課本。
3. 快速動作欄 Cmd + / 可搜尋任何指令
剛才提到的 Cmd + / 也是十分常用的快捷鍵，按後會出現一條 Search Bar，然後就可以直接用文字搜尋任何指令，不用記下鍵盤快捷鍵，連 Plug-in的指令都適用喔！
4. 超容易整理Figma 設計檔的封面
Figma 預設將第一頁的設計自動成為檔案縮圖，不過右按任何一個 Frame 然後按 Set as thumbnail 也可以手動設定為縮圖。Figma 的預設 Frame 大小也有 Plugin / File Cover 可選，大小是 1920 x 960px，不過左右兩邊需預留 200px 的出血位。若你設計好一個範本的話，就可以套用到不同 Figma 檔案，用起上來也賞心悅目。
詳細可參考 Figma 的教學文章 https://help.figma.com/hc/en-us/articles/360038511413-Set-custom-thumbnails-for-files
5. Inspect 分頁可以快速複製文字
如你需要快速複製 Figma 內的文案，記得切換至 Inspect 一頁，選取文字時 Inspect 內將有 Content 可以一鍵複製，亦不怕原有文字被錯誤修改。
6. Cmd + K 可以按比例縮放文字及物件
預設拖放一個物件，即使按住 Shift 鍵，也會按原有 Constraint 控制大小，文字並不會按比例縮放（圖中）。如想比例縮放文字及物件，需要切換至 Scale (Cmd + K)，那麼整個物件，包括文字也會按比例縮放（圖右）。
7. 同時貼上物件到多個畫框 Frames
若要將物件貼上到不同的畫框 (Frames)，其實毋須逐一貼上。只需要複製物件，然後左鍵選擇多於一個畫框（藍框示意），然後按 Cmd + V 貼上物件，物件就會同時貼上到所選的畫框內。
8. 自訂及修改 FigJam 物件及貼紙
如果你有使用過 FigJam 的話，便會知道 FigJam 內的物件或貼紙也不能修改，不過，它們其實是可以複製到 Figma 中修改的。只要複製並打開 Figma 貼上，物件或貼紙就如 SVG 檔一樣，正常顯示所有圖層。修改後便可以複製回到 FigJam 了。
9. Figma 檔案有太多相片？轉用特別鏈結提升載入速度
有一次我的檔案累積過百張相片，導致載入速度太慢，甚至出現 RAM 耗盡無法打開檔案的警告。從客服得知，如果在檔案網址的最後，加上以下的網址參數，Figma 就能調整載入相片時的大小：
&thumbnails-only=110. 改名快捷鍵 Cmd + R，更可支援 Regex 語法
不少人也知道選取多於一個圖層，再按 Cmd+ R 可以同時改名，不過按數字順序改名是否有時不正確？因為 Figma 是按左欄 Layers 圖層的次序，而非圖層的位置重新命名。配合 Plug-in Sorter，便可以按用家需求重新排序（如從Canvas上而下，左至右就是 Sort Position）。
更厲害的功能，是 Figma 的改名功能其實直接 Regex 語法，除了「現在名稱」、「數字」外，其實可以有更進階的命名邏輯，如掉轉文字次序、改為大寫、細寫等。
https://help.figma.com/hc/en-us/articles/360039958934-Rename-Layers
希望大家喜歡我們首個介紹 Figma 的系列。我們計劃在不同平台介紹更多 Figma 的功能，每天我們也於Discord 群組討論及交流使用 Figma 的心得。
關於Friends of Figma Hong Kong：
我們是 Friends of Figma Hong Kong 🇭🇰，一個由設計主導的社群，立即加入我們的網上 Discord 群組及瀏覽我們的網頁，留意最新Figma的最新動向。
