眾所周知，越來越多的大廠都在使用figma。那么你如何使用figma呢？你有遇到過什么問題或者不好操作的事情嗎？今天給大家分享一篇資深UI設(shè)計師Danny Sapio的文章。他總結(jié)了一些在日常設(shè)計過程中使用 Figma 非?？焖?、省時、省力的功能和技巧。由于文章是直譯，梁亮在編輯時非常仔細(xì)。確保在不影響初衷的情況下幫助你梳理知識點(diǎn)。希望它能幫助你快速掌握技巧，讓未來 Figma 設(shè)計中的繪圖變得像呼吸一樣輕松。話不多說，讓我們開始吧。起來吧~

工欲善其事，必先利其器

Figma桌面軟件及漢化補(bǔ)丁

Figma 34 個 UI 設(shè)計師必備插件

1.這輩子最簡單的圓形進(jìn)度條設(shè)計方法

不知道大家是否知道這個方法，但這應(yīng)該是我一生中最快的圓形進(jìn)度條設(shè)計體驗了。在figma中，只要使用圓弧工具，就可以快速拖出一張漂亮、均勻、合理的圖。一鍵生成效果。是不是比XD這些方便多了！

2.使用縮放工具避免失真

這個縮放工具在設(shè)計 UI 時也非常有用。只需選擇要縮放的元素和內(nèi)容，然后單擊鍵盤上的“k”鍵即可快速拖動和縮放，并確?？s放后的元素是像素完美的。的。

以前我一直不愿意使用變焦功能，因為總會因為各種原因?qū)е虏糠肿兘钩霈F(xiàn)問題，不得不進(jìn)行調(diào)整。使用Figma中的縮放功能可以完全保證比例，無需返工。

3. 將對象拖出框架并將其保留在容器中

當(dāng)您按住空格鍵并將對象拖出框架時，它仍然可以位于容器中但不可見。當(dāng)然，你也可以關(guān)閉“Clip”選項，然后就可以將其制作到容器之外了。還可以看出，除了第一次之外，還可以使用“cmd/ctrl + Y”來預(yù)覽其外部輪廓而不可見。

4.快速整理、調(diào)整和管理表格元素

當(dāng)我們選中一組包含多個元素的數(shù)組時，我們可以通過點(diǎn)擊角落的網(wǎng)格圖標(biāo)來快速組織它們，比如讓元素之間的距離相等，也可以通過拖動來快速調(diào)整間距。不是很好嗎？

5.快速重復(fù)之前的操作

這和我們在AI工具中使用Ctrl+D連續(xù)復(fù)制是一樣的。在figma中，使用“cmd/ctrl + D”復(fù)制您上次的操作，“cmd/ctrl + D”操作也會被復(fù)制。相關(guān)對象/框架以及操作中涉及的任何元素。

6.使用吸色工具快速預(yù)覽顏色

當(dāng)你點(diǎn)擊顏色吸收工具“i”時，你可以吸收特定的顏色，但如果你按住i按鈕，你可以移動光標(biāo)預(yù)覽顏色，而不是拾取顏色。

7.快速解鎖所有物體

“cmd/ctrl + /”是一個可以幫助您節(jié)省大量時間的快捷鍵。它可以調(diào)用許多不同的快捷操作。我最常用的是用它來一次解鎖所有對象和元素，以及修改字體。 。

8.快速添加圖片占位圖形

相信很多人都和梁哥一樣，在設(shè)計的時候沒有找到合適的圖片。稍后，當(dāng)我們查找或制作圖片時，我們可以使用“cmd/ctrl + shift + k”快捷鍵來快速創(chuàng)建占位符或框架等元素。添加一堆圖像替換。

9.空格鍵各種炫酷操作

選擇多個元素時，可以使用光標(biāo)拉出一個區(qū)域。這時，按住空格鍵拖動您選擇的區(qū)域。移動光標(biāo)時，可以移動并選擇大量元素。 。

另外，拉出圖形后，按住空格鍵可移動元素。

另外，您還可以在拖動元素時按住空格鍵，以防止元素自動嵌套在框架中或自動布局！

10.卷軸+

Reel+是兩個必備的插件。我們在之前的文章中也介紹過它們。使用Reel可以快速幫助你生成各種占位符，而不是讓你的UI界面中的每個用戶都是“匿名”的，當(dāng)然它可以生成多種類型的占位符：姓名、頭像、ID、文本段落等。免費(fèi)的照片庫插件，可以為您提供高質(zhì)量的照片庫。其圖片免費(fèi)可用于商業(yè)用途。

11.超級好用的自動行高

如果你的文字行高看起來不均勻，并且暫時不打算設(shè)置專門的行高參數(shù)，那么你只需要在行高中輸入auto（自動）或者刪除該參數(shù)并點(diǎn)擊回車，即可將其設(shè)置為自動行高！

12.簡單易用的斷點(diǎn)控制

使用這個()插件，您可以像CSS一樣控制設(shè)計文檔中的樣式和斷點(diǎn)，輕松地將它們插入到自適應(yīng)框架中，并在拖動邊緣時使元素樣式靈活自然。地面自適應(yīng)。更多Figma實用插件安裝請點(diǎn)擊>

13.給框架添加狀態(tài)標(biāo)簽

當(dāng)您在 Figma 中與其他設(shè)計師合作設(shè)計客戶或產(chǎn)品時，有時很難用語言表達(dá)不同的設(shè)計狀態(tài)。這時候我們就可以使用Figma Tags插件來幫助你快速給界面元素添加狀態(tài)，保證你不需要給別人做復(fù)雜的解釋，而且這個插件本身就有非常完善的預(yù)設(shè)狀態(tài)。

14、設(shè)計中“隱形”的方法

作為一名UI設(shè)計師，你通常都會有這種焦慮，就是你不想讓別人看你設(shè)計。雖然學(xué)不會，但他就是覺得不舒服。想象一下，您旁邊的同事正在盯著您的屏幕看您拍照。是不是不舒服？今天適合您的一個方法是，當(dāng)您在 Figma 中進(jìn)行設(shè)計時，在保持在線協(xié)作的同時，其他人可以實時看到您的設(shè)計流程和狀態(tài)。如果你想“隱形”，只要斷開Wifi即可。有人可能會問，斷網(wǎng)后還可以嗎？可以做到，只要在關(guān)閉文檔之前確保已連接到互聯(lián)網(wǎng)，就不會丟失設(shè)計進(jìn)度。另外，你還可以將文檔保存為離線離線格式（.fig），因為 Figma 一般不會保存本地副本。

15.一鍵刪除背景

比較強(qiáng)大的插件，一鍵去除背景。使用XD和亮亮?xí)r，我基本上都是將圖像拖入PS中，然后使用鋼筆或魔棒工具刪除背景。相當(dāng)麻煩?，F(xiàn)在我發(fā)現(xiàn)用figma就可以做到。使用這個()插件可以幫你一鍵解決問題。當(dāng)然，能不能拉頭發(fā)還不得而知。這個問題可以留給大家研究！更多Figma實用插件安裝請點(diǎn)擊 >

16. 創(chuàng)建私有樣式和組件

為了防止 Figma 直接覆蓋您創(chuàng)建的樣式和組件，您可以在命名時添加一些前綴標(biāo)識符，以使這些樣式私有。

您可以通過添加“.”等符號來完成此操作。組件名稱前加“_”，例如“Name”。發(fā)布過程中，系統(tǒng)會跳過這些樣式和組件，將其顯示在“”面板和“庫”中，將這些樣式和文件標(biāo)記為“到此文件”，即為本文檔專用的樣式和組件。

17. 在 Figma 中聊天

雖然有時你會更習(xí)慣使用其他實時通訊工具（例如微信和釘釘）sketch取色快捷鍵，但你的信息可能會被其他人的信息埋沒。這時，你不妨使用 Figma Chat() 插件，直接在 Figma 中實現(xiàn)與你的合作設(shè)計師或產(chǎn)品進(jìn)行一對一的交流。更多Figma實用插件安裝請點(diǎn)擊 >

18、一鍵獲取同色系的所有顏色

這也是同樣的道理。梁亮在之前的figma插件安裝中介紹過。他可以幫助我們得到相同的配色方案，而不必在色盤上一一繪制顏色，并且繪制不準(zhǔn)確。

19.給組件添加邊框投影

用過這個軟件的人可能都知道，F(xiàn)igma 中似乎無法給某個元素的特定一側(cè)添加下劃線。這時候我就用一個投影來實現(xiàn)這個效果，關(guān)閉模糊，然后按照下面的參數(shù)進(jìn)行設(shè)置：

當(dāng)然，你也可以調(diào)整參數(shù)，讓筆畫出現(xiàn)在另一面。如果想讓效果更明顯，可以讓參數(shù)大于1。

20. 四舍五入到最接近的整數(shù)

Round>>All()是最近才出現(xiàn)的插件。當(dāng)你按比例縮放某些組件時（快捷鍵k），你最終會發(fā)現(xiàn)它的實際大小是小數(shù)而不是整數(shù)。這時，你需要做的是，只需使用“cmd/ctrl + A”選擇所有畫板，然后運(yùn)行 ??Round >> All 插件對所有組件參數(shù)進(jìn)行舍入，以確保像素完美。

復(fù)活節(jié)彩蛋

一鍵實現(xiàn)等距效果

亮亮哥一開始就準(zhǔn)備了20個小竅門，最后發(fā)現(xiàn)這個很有用，就發(fā)給大家，最后加上去作為驚喜或者彩蛋！

如今在封裝UI界面時，使用等距效果是一種非常流行的方式，但實際調(diào)整起來可能會非常費(fèi)時費(fèi)力。這時候如果使用()插件，簡單設(shè)置一下參數(shù)sketch取色快捷鍵，就可以一鍵實現(xiàn)效果。 。更多Figma實用插件安裝請點(diǎn)擊>

UI進(jìn)階干貨資料系列指南

VIP會員招募

UED設(shè)計教程

邀請專業(yè)UIUE交流群

UI入門級規(guī)格尺寸

史詩級 UI 規(guī)范

iOS設(shè)計尺寸規(guī)格

iOS 深色設(shè)計指南

設(shè)計指南

與iOS設(shè)計的差異

注冊登陸頁面設(shè)計指南

閃屏廣告頁面設(shè)計

如有侵權(quán)請聯(lián)系刪除！