第二波！我希望能早點知道的 10 個 Figma 技巧

編者按：這篇文章來自資深 UI設計師 Danny Sapio，他總結了日常設計過程中，使用 Figma 的一些非?？焖俚脑O計技巧，希望能幫到大家：

上一篇 Figma 設計技巧的分享在這里：

這是上一篇的延續，我在上一次的基礎上，繼續分享 10 個 Figma 的使用技巧。

1、好用的斷點控制

使用這個 Breakpoints 插件，你可以像 CSS Flexbox 一樣在你的設計文檔當中控制樣式和斷點，可以輕松地將它們插入到自適應框架當中，并且在你拖動邊緣的時候，讓元素樣式靈活自然地自適應。

2、將狀態標簽添加到框架中

當你同客戶、其他設計師或者團隊中其他的相關者在 Figma 當中協同合作的時候，你可能在溝通過程中，很難表述不同設計狀態。而 Figma Tags 這個插件能夠幫你為界面元素快速添加狀態，并且更新，因為有足夠清晰的狀態標注，確保你無需向其他人進行復雜的解釋，而且這款插件本身就有非常完善的預設狀態。

3、設計時「隱身」的方法

設計師通常都會有這樣的一種焦慮，就是不希望別人看到你的設計過程。當你在 Figma 中設計的時候，保持在線協作狀態下，別人是可以實時看到你的設計過程和狀態的，如果你想「隱身」，斷開 Wifi 即可。

我知道這聽起來很奇怪，但是作為一款強調協同的 UI 設計工具，只有當你斷網脫機的時候，才不會在設計的時候，看到別人的鼠標光標在旁邊瞎晃，同樣這樣才能讓你不會被 Youtube 或者其他的信息來干擾你。

只要保證在關閉文檔之前聯網，就不會丟失你的設計進度，此外你還可以將文檔保存成離線脫機格式 (.fig)，因為 Figma 一般不會保存本地副本。

4、一鍵刪除背景

這幾乎是目前設計軟件中的標配功能了。之前我會把圖片拖到 PS 中用鋼筆或者魔棒工具來刪除背景，不過我后來發現在 Figma 當中使用這個 RemoveBG 插件 就能幫你一鍵搞定問題。

5、創建私人樣式和組件

為了防止 Figma 直接覆蓋你創建的樣式和組件，你可以在命名的時候加入一些前綴標識，將這些樣式變為私人的樣式。

在組件名稱前添加 「 . 」和 「 _ 」這樣的符號，就能做到這一點，比如「 _Component Name 」這樣，在發布過程中，系統就會跳過這些樣式和組件，并且在「Assets」面板和「庫」當中，將這些樣式和文件標注為「Private to this file」，也就是專用于這個文檔的樣式和組件。

6、在 Figma 當中聊天

雖然有時候你通過別的實時溝通工具（比如微信群）會更加習慣，但是你的信息可能會被別人的信息給埋沒掉，這個時候不妨使用 Figma Chat 這個插件，直接實現在 Figma 當中直接同你的協作設計師進行溝通。

7、一鍵獲得同色系的所有顏色

我通常會使用 Material Color Tool 來獲得可訪問性良好的同色系配色，不過最近我發現 Color Shades 插件也可以做到這個事情，效果也同樣不錯。

8、為組件的一側增加筆觸投影

令人沮喪的是，在 Figma 當中似乎無法為元素特定的一側增加筆觸，這個時候我會使用投影來實現這個效果，關閉模糊，然后按照下方的參數進行設置：

• y: 1 (bottom)
• y: -1 (top)
• x: 1 (right)
• x: -1 (left)

當然，你還可以調整參數讓筆觸出現在另外一邊，如果你希望效果更明顯一點，可以讓參數大于1即可。

9、四舍五入到最接近的整數

Round >> All 是一個最近才出現的一個插件，當你在按照比例縮放（快捷鍵 k）某些組件的時候，最后會發現它的實際尺寸是小數而非整數，這個時候你需要做的，就是使用「cmd/ctrl + A」全選所有畫板，然后運行 Round >> All 這個插件，就能讓所有的組件參數四舍五入，確保像素完美。

10、一鍵實現等軸測效果

如今在展示 UI 的時候，使用等軸測效果是一個非常流行的方式，但是真正去調整可能會非常費時費力，這個時候，如果你使用 Isometric 插件，簡單設置參數，就可以一鍵實現效果。