10個使用 Figma 心得,讓你的設計事半功倍

Figma 是非常容易上手的 UI/UX 設計工具,線上多人協作功能讓工程師或是產品團隊都能很容易瀏覽,甚至修改設計,為設計師們節省不少的時間。據 UX Tool 的年度設計工具問卷顯示,Figma 用家的佔比已經由2018年的21%,至今超越 Sketch 到 77%。去年閃亮登場的 FigJam ,更方便團隊使用 Freehand 般的白板協作。身為 Friends of Figma 的一分子,我們也想在這裡與大家分享是個精簡使用的Figma小貼士。

https://cdn-images-1.medium.com/max/1200/1*XyP2CIy_0cbUHLHyk7OINQ.png

1. 按住「Shift」鍵移動物件 (Nudge) 的距離

https://cdn-images-1.medium.com/max/1200/1*hx9flMYPLkUelMRtXWRSaA.png

Figma 的預設中,按方向鍵可以移動物件 1px (Small Nudge),若按住 Shift一下就會移動 10px (Big Nudge)。但如果使用 8pt grid 的話,每次要手動調整兩下,其實 Preferences 內的 Nudge amount 可以自訂 Small Nudge 和 Big Nudge的數值,如設定成 2px 及 16px,那麼所有物件移動的幅度也是 2的倍數,用起上來也事半功倍。

2. Figma 超易學習快捷鍵

https://cdn-images-1.medium.com/max/1200/1*TpvAvxOZuhQDatAZqqxFSQ.png

以下幾個貼士也將會提到Keyboard Shortcuts,其實 Figma 的鍵盤快捷鍵圖表也十分值得表揚(同時按 Ctrl + Shift + ? 或 Cmd + / 輸入 Keyboard Shortcuts)。它不單簡單易明,更保留用家曾否使用過該快捷鍵的紀錄。如上圖可見,暫時這頁我只用過3個快捷鍵,這便簡單成為上手 Figma 、學習如何快速操作 Figma 的課本。

3. 快速動作欄 Cmd + / 可搜尋任何指令

https://cdn-images-1.medium.com/max/1200/1*aCJ9zAf_Z2W9kBcXsE-1HA.png
使用 Quick Action 就可以快速溫習指令的快捷鍵

剛才提到的 Cmd + / 也是十分常用的快捷鍵,按後會出現一條 Search Bar,然後就可以直接用文字搜尋任何指令,不用記下鍵盤快捷鍵,連 Plug-in的指令都適用喔!

4. 超容易整理Figma 設計檔的封面

https://cdn-images-1.medium.com/max/1200/1*YmybVCfu6drXolDxNna6EQ.png

Figma 預設將第一頁的設計自動成為檔案縮圖,不過右按任何一個 Frame 然後按 Set as thumbnail 也可以手動設定為縮圖。Figma 的預設 Frame 大小也有 Plugin / File Cover 可選,大小是 1920 x 960px,不過左右兩邊需預留 200px 的出血位。若你設計好一個範本的話,就可以套用到不同 Figma 檔案,用起上來也賞心悅目。

https://cdn-images-1.medium.com/max/1200/1*53HF2Fd-OWRRSYYvo6tJvA.png

詳細可參考 Figma 的教學文章 https://help.figma.com/hc/en-us/articles/360038511413-Set-custom-thumbnails-for-files

5. Inspect 分頁可以快速複製文字

https://cdn-images-1.medium.com/max/1200/1*jDAlCLkyV8UVhnIIOiKCKg.png

如你需要快速複製 Figma 內的文案,記得切換至 Inspect 一頁,選取文字時 Inspect 內將有 Content 可以一鍵複製,亦不怕原有文字被錯誤修改。

6. Cmd + K 可以按比例縮放文字及物件

https://cdn-images-1.medium.com/max/1200/1*iJkqDKEODPedDThNOlYPVQ.png

預設拖放一個物件,即使按住 Shift 鍵,也會按原有 Constraint 控制大小,文字並不會按比例縮放(圖中)。如想比例縮放文字及物件,需要切換至 Scale (Cmd + K),那麼整個物件,包括文字也會按比例縮放(圖右)。

7. 同時貼上物件到多個畫框 Frames

https://cdn-images-1.medium.com/max/1200/1*_DLOF85P6UzywwiQ-aY2HQ.png

若要將物件貼上到不同的畫框 (Frames),其實毋須逐一貼上。只需要複製物件,然後左鍵選擇多於一個畫框(藍框示意),然後按 Cmd + V 貼上物件,物件就會同時貼上到所選的畫框內。

8. 自訂及修改 FigJam 物件及貼紙

https://cdn-images-1.medium.com/max/1200/1*b6FB4afMo5G64VHiYM9mBQ.png

如果你有使用過 FigJam 的話,便會知道 FigJam 內的物件或貼紙也不能修改,不過,它們其實是可以複製到 Figma 中修改的。只要複製並打開 Figma 貼上,物件或貼紙就如 SVG 檔一樣,正常顯示所有圖層。修改後便可以複製回到 FigJam 了。

9. Figma 檔案有太多相片?轉用特別鏈結提升載入速度

有一次我的檔案累積過百張相片,導致載入速度太慢,甚至出現 RAM 耗盡無法打開檔案的警告。從客服得知,如果在檔案網址的最後,加上以下的網址參數,Figma 就能調整載入相片時的大小:

&thumbnails-only=1

10. 改名快捷鍵 Cmd + R,更可支援 Regex 語法

https://cdn-images-1.medium.com/max/1200/1*ucCBwN16qMmJIGv3iLOglQ.png

不少人也知道選取多於一個圖層,再按 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的最新動向。

--

--

This is an inclusive design community where all designers can find fun, safe spaces to share in, connect and grow. We aim to create a future where design in Hong Kong is valued, community-led, collaborative, and borderless. See more: https://friends.figma.com/hong-kong/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store