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

工欲善其事，必先利其器

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7.快速解鎖所有物體

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

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

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

9.空格鍵各種炫酷操作

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

另外，拉出圖形后，按住空格鍵可移動(dòng)元素。

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

10.卷軸+

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

11.超級(jí)好用的自動(dòng)行高

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

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

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

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

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

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

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

15.一鍵刪除背景

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

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

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

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

17. 在 Figma 中聊天

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

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

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

19.給組件添加邊框投影

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

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

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

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

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

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

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

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

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

VIP會(huì)員招募

UED設(shè)計(jì)教程

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

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

史詩級(jí) UI 規(guī)范

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

iOS 深色設(shè)計(jì)指南

設(shè)計(jì)指南

與iOS設(shè)計(jì)的差異

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

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

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