編者按：這篇文章來自資深 UI設(shè)計師 Danny Sapio，他總結(jié)了日常設(shè)計過程中，使用 Figma 的一些非常快速的設(shè)計技巧，希望能幫到大家：

上一篇 Figma 設(shè)計技巧的分享在這里：

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

1、好用的斷點控制

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

2、將狀態(tài)標(biāo)簽添加到框架中

當(dāng)你同客戶、其他設(shè)計師或者團(tuán)隊中其他的相關(guān)者在 Figma 當(dāng)中協(xié)同合作的時候，你可能在溝通過程中，很難表述不同設(shè)計狀態(tài)。而 Figma Tags 這個插件能夠幫你為界面元素快速添加狀態(tài)，并且更新，因為有足夠清晰的狀態(tài)標(biāo)注，確保你無需向其他人進(jìn)行復(fù)雜的解釋，而且這款插件本身就有非常完善的預(yù)設(shè)狀態(tài)。

3、設(shè)計時「隱身」的方法

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

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

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

4、一鍵刪除背景

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

5、創(chuàng)建私人樣式和組件

為了防止 Figma 直接覆蓋你創(chuàng)建的樣式和組件，你可以在命名的時候加入一些前綴標(biāo)識，將這些樣式變?yōu)樗饺说臉邮健?/p>

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

6、在 Figma 當(dāng)中聊天

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

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

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

8、為組件的一側(cè)增加筆觸投影

令人沮喪的是，在 Figma 當(dāng)中似乎無法為元素特定的一側(cè)增加筆觸，這個時候我會使用投影來實現(xiàn)這個效果，關(guān)閉模糊，然后按照下方的參數(shù)進(jìn)行設(shè)置：

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

當(dāng)然，你還可以調(diào)整參數(shù)讓筆觸出現(xiàn)在另外一邊，如果你希望效果更明顯一點，可以讓參數(shù)大于1即可。

9、四舍五入到最接近的整數(shù)

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

10、一鍵實現(xiàn)等軸測效果

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