今天分享的是「可替代PS的7款Figma插件」。

做UI/UX設(shè)計(jì)的同學(xué)，日常干活肯定都有這個(gè)共鳴：明明Figma能搞定99%的工作，但總會(huì)有幾個(gè)效果不得不打開Photoshop來做。比如要摳個(gè)圖、微調(diào)圖片色調(diào)或者把文字扭曲做個(gè)藝術(shù)字…

問題在于，來回切換軟件這個(gè)操作很容易打亂我們的工作節(jié)奏——停下Figma里的設(shè)計(jì)，打開PS、導(dǎo)入圖片修圖后導(dǎo)出、再切回Figma，這一套下來耗費(fèi)的精力遠(yuǎn)比想象的要多，很容易越做越亂。

現(xiàn)在Figma AI已經(jīng)能搞定大部分摳背景的活，但PS依然有它的強(qiáng)項(xiàng)：色彩校正、濾鏡效果、質(zhì)感表現(xiàn)、扭曲變形、文字特效、矢量轉(zhuǎn)換…而這些圖片圖形處理功能正是Figma的短板。

今天就給大家整理了7款Figma插件，不敢說能完全替代PS，但絕對能讓你在實(shí)際工作中少打開800次PS

01 Filter/Effects

Figma的圖片調(diào)色功能不夠完善，應(yīng)該是很有設(shè)計(jì)師最鬧心的一點(diǎn)。

簡單調(diào)個(gè)亮度對比度還行，但想像PS那樣做一些精細(xì)化的微調(diào)，F(xiàn)igma自帶的功能根本做不到。而Filter/Effects就是專門補(bǔ)這個(gè)缺口的插件。

這個(gè)插件提供了很多特效，選中圖片或者畫板能一次性疊加多種濾鏡效果。從色溫、飽和度、曝光、模糊、銳化、噪點(diǎn)這些基礎(chǔ)調(diào)色，到膠片色調(diào)這種改畫面氛圍的特效，它都能實(shí)現(xiàn)。

舉個(gè)最常見的例子：卡片UI里要放多張縮略圖，每張照片的光線環(huán)境不一樣，色調(diào)五花八門。這時(shí)候你要去PS里一張張調(diào)得花很長時(shí)間。用Filter/Effects做一套統(tǒng)一的調(diào)色規(guī)則，一鍵批量適配，先把UI整體的視覺平衡穩(wěn)住，后面再調(diào)細(xì)節(jié)也輕松很多。

更方便的是它支持保存預(yù)設(shè)——如果團(tuán)隊(duì)有固定用的色調(diào)風(fēng)格，可以存成預(yù)設(shè)隨用隨調(diào)，大幅減少重復(fù)工作。尤其是做營銷頁面、活動(dòng)banner這種快節(jié)奏的活，效率直接拉滿。

不過它也有一個(gè)缺點(diǎn)：應(yīng)用效果后的圖片會(huì)被合并柵格化，沒法像PS的調(diào)整圖層那樣隨時(shí)還原修改。因此要養(yǎng)成保留原圖、給復(fù)制圖層應(yīng)用效果的習(xí)慣。

即便如此，當(dāng)你急著微調(diào)圖片、統(tǒng)一畫面氛圍的時(shí)候，它依然是最省事的選擇。

02 Noise&Texture

在PS里，我經(jīng)常通過添加噪點(diǎn)、應(yīng)用紙張紋理和調(diào)整混合模式來打破頁面的扁平感。尤其是在落地頁或營銷頁面設(shè)計(jì)上，不添加質(zhì)感很容易顯得設(shè)計(jì)扁平單薄。

Noise&Texture插件可以在Figma中快速完成這項(xiàng)任務(wù)。除了添加噪點(diǎn)之外，還可以使用紙張紋理、膠片顆粒和細(xì)微圖案等紋理作為疊加層，并控制強(qiáng)度。

在實(shí)際工作中，這兩個(gè)場景用得最多：

① 頁面首屏的大背景太干凈，文字總像飄在上面，加一層極細(xì)的噪點(diǎn)，背景瞬間就有了“實(shí)感”，文字排版也穩(wěn)了；

② 卡片里的圖片太銳利，整個(gè)UI顯得廉價(jià)生硬，加一點(diǎn)質(zhì)感，能給畫面提提溫度，看著更舒服。

現(xiàn)在AI生成圖片很方便，能做出各種氛圍感效果，但這種“刻意控制畫面的粗糙感、統(tǒng)一整體視覺調(diào)性”的操作，還是人工手動(dòng)微調(diào)更穩(wěn)。

這個(gè)插件的應(yīng)用效果都存在圖層效果里，隨時(shí)能刪、能還原原圖。這個(gè)插件的意義，從來不是替代PS，而是讓那些“本來要開PS做的小調(diào)整”，在Figma里直接就能收尾。

03 Image Tracer

在實(shí)際工作中，我們依然會(huì)經(jīng)常收到PNG、JPG格式的logo、符號和圖標(biāo)素材。直接使用的話分辨率不夠，放大就會(huì)模糊，有時(shí)還帶雜邊；為了這一個(gè)小圖標(biāo)，專門打開Illustrator轉(zhuǎn)矢量又太麻煩。

Image Tracer就是這種時(shí)候能派上用場的插件。用法特別簡單：

選中圖片并運(yùn)行插件，即可將其轉(zhuǎn)換為矢量格式。轉(zhuǎn)換結(jié)果會(huì)因輸入圖片的類型而異，但對于形狀清晰的圖形，例如簡單的logo、符號或單色圖標(biāo)，轉(zhuǎn)換結(jié)果相當(dāng)實(shí)用。

對于UI相關(guān)的矢量化，就這一個(gè)功能就可以顯著簡化工作流程。

給大家分享3個(gè)實(shí)用的使用技巧：

① 轉(zhuǎn)換前先把圖片對比度拉高，背景盡量修干凈，轉(zhuǎn)出來的效果會(huì)好很多；

② 特別小的圖標(biāo)直接轉(zhuǎn)很容易出噪點(diǎn)，先把圖片放大再轉(zhuǎn)，轉(zhuǎn)完再縮回去，線條會(huì)干凈很多；

③ 轉(zhuǎn)換后可能會(huì)出現(xiàn)錨點(diǎn)太多的問題，記得簡化一下路徑，刪掉多余的錨點(diǎn)，不然后續(xù)編輯會(huì)很麻煩。

04 SkewDat

figma自帶的變形功能有很大的局限性。雖然能實(shí)現(xiàn)基礎(chǔ)的旋轉(zhuǎn)和縮放，但想要給矩形或文字添加有透視感的扭曲效果，或是精準(zhǔn)調(diào)整斜切角度，僅靠基礎(chǔ)功能會(huì)非常麻煩。

這也是每當(dāng)我們制作活動(dòng)banner、藝術(shù)字標(biāo)題，需要做一些有設(shè)計(jì)感的效果時(shí)，不得不打開PS的原因。

SkewDat是專門解決這個(gè)問題的插件。選擇文本或形狀，并向任意方向傾斜或扭曲，快速創(chuàng)建帶有透視效果的形狀。以前用慣了PS自由變換的朋友，用它會(huì)特別順手。

例如在宣傳頁面里，想把重點(diǎn)數(shù)字、關(guān)鍵詞稍微傾斜突出一下或是給卡片上的標(biāo)簽做個(gè)透視效果，用Figma自帶功能硬做，不僅費(fèi)時(shí)間做出來還特別別扭。

更高效的做法是使用SkewDat快速創(chuàng)建形狀，然后在 Figma中調(diào)整字體和布局。

這款插件有免費(fèi)使用次數(shù)的限制，類似功能的免費(fèi)插件還有Skew、Easometric，大家可根據(jù)自己的使用需求靈活選擇。

05 Text on Path

figma自帶簡單的路徑文字功能：創(chuàng)建一個(gè)形狀，然后將把文字工具貼到邊緣，就能讓文字跟著路徑走。

在實(shí)際工作中，我們通常需要對文本進(jìn)行更多操作，例如讓文字向內(nèi)或向外彎曲，靈活調(diào)字間距、排列方向。

Text on Path這個(gè)插件在Figma的基本功能上更進(jìn)一步，允許以多種方式沿路徑定位文本。你可以自由調(diào)整文字在形狀的內(nèi)側(cè)還是外側(cè)、對齊方式、偏移距離。生成的文本會(huì)被分組到一個(gè)單獨(dú)的圖層中，方便移動(dòng)和管理。

這里給大家分享一個(gè)實(shí)用技巧：給文字加路徑效果前，先想清楚——這段文字是為了清晰易讀，還是只當(dāng)視覺裝飾用的？

如果是前者，為了保證可讀性，最好減少路徑彎曲度并使用較小的間距；如果是后者，那就放心大膽地做造型。

這個(gè)插件相當(dāng)于把以前“在PS里做文字彎曲效果→導(dǎo)出圖片→導(dǎo)回Figma”的流程，整合到了Figma里，讓我們的工作節(jié)奏不被打斷。

06 Mesh Gradient

做設(shè)計(jì)時(shí)總會(huì)遇到這種情況：普通的線性漸變太單調(diào)，想要那種自然融合、擴(kuò)散的色彩效果——比如品牌首屏背景、落地頁大背景、卡片的高光區(qū)域，都用得上。

雖然Figma的基本漸變工具直觀易用，但缺乏像網(wǎng)格漸變那樣基于錨點(diǎn)控制的顏色混合效果。所以之前很多團(tuán)隊(duì)，都是在PS/AI里做好網(wǎng)格漸變，導(dǎo)出圖片再導(dǎo)入Figma用，來回折騰特別麻煩。

Mesh Gradient插件能解決這個(gè)問題。你可以隨便加錨點(diǎn)、給每個(gè)錨點(diǎn)設(shè)顏色，讓色彩在錨點(diǎn)之間自然過渡，甚至還能調(diào)模糊、暈染的效果。

網(wǎng)格漸變不僅僅是創(chuàng)建漂亮的背景，還能統(tǒng)一頁面UI的畫面氛圍，定好產(chǎn)品的視覺調(diào)性。顏色混合漸變的方式能決定頁面的質(zhì)感，既能讓畫面瞬間變高級，反之也可能讓畫面顯得廉價(jià)。

實(shí)際工作時(shí)，有幾個(gè)實(shí)用的設(shè)計(jì)技巧：

① 用2-3個(gè)品牌色做基礎(chǔ)網(wǎng)格漸變，重復(fù)用在首頁、各個(gè)板塊背景里，這樣整個(gè)頁面的視覺調(diào)性就能保證統(tǒng)一；

② 做好一個(gè)網(wǎng)格漸變后，稍微改一改就能出好幾個(gè)版本，存起來當(dāng)素材，以后做縮略圖、banner都能用；

③ 在深色模式或低飽和度頁面里使用網(wǎng)格時(shí)，錨點(diǎn)不要亂加，文字區(qū)域一定要用純色或半透明的圖層墊一下，防止文字糊在背景里。

這個(gè)插件的核心是讓你不用跳出Figma，就能搞定UI和圖形設(shè)計(jì)交叉的活。不用再切換到PS做背景再導(dǎo)入的步驟，UI設(shè)計(jì)和視覺調(diào)整在一個(gè)文件里就能做完，從而顯著提升工作效率。

07 Blobs

以前在PS里做背景的抽象圖形時(shí)，需要用鋼筆工具勾造型，液化工具調(diào)形態(tài)，再加漸變和模糊，才能做出一個(gè)能用的素材。

這個(gè)過程不僅費(fèi)時(shí)間，做好之后改起來也麻煩，最后大家都懶得做新的，翻來覆去用那幾個(gè)舊圖形，做多了產(chǎn)品就顯得特別敷衍、沒新意。

Blobs插件能把這個(gè)繁瑣的過程，簡化成點(diǎn)幾下鼠標(biāo)就可以實(shí)現(xiàn)：運(yùn)行插件，調(diào)整「復(fù)雜度」和「獨(dú)特性」這兩個(gè)參數(shù)，點(diǎn)擊插入按鈕，就能生成一個(gè)矢量格式的抽象圖形。

因?yàn)槭鞘噶康模词狗糯蟮胶艽蟪叽缫膊粫?huì)模糊。如果有不滿意的地方，還可以通過錨點(diǎn)編輯進(jìn)一步細(xì)化形狀。

最重要的是，創(chuàng)建形狀的過程非常輕便：不滿意就重新生成，覺得太復(fù)雜就降低復(fù)雜度，覺得太單調(diào)可以加細(xì)節(jié)，把以前在PS里調(diào)液化的時(shí)間壓縮到了幾秒鐘。

你可以提前生成一堆圖形，統(tǒng)一加漸變和模糊存成素材庫，以后團(tuán)隊(duì)里所有人都能反復(fù)用。說實(shí)話，比起AI生成的好看但沒法修改的圖片，這種能編輯、能復(fù)用的矢量素材更實(shí)用。

08 最后

有了這些插件，就能徹底卸載PS了嗎？說實(shí)話，不能。

畢竟高精度合成、像素級精修、高級調(diào)色這些硬核功能，PS依然是不可替代的。

但可以確定的是，我們再也不用像以前那樣為了一個(gè)小修改，專門打開PS了。

這些插件的意義從來不是替代PS，而是減少設(shè)計(jì)過程中，不得不跳出Figma切換到其他軟件的場景。從UI設(shè)計(jì)到簡單的圖形處理，都能在同一個(gè)軟件里完成，咱們的工作節(jié)奏自然會(huì)順暢很多。

最后，選擇插件的核心從來不是“大家都說好”，而是“它能不能幫我省事、能不能解決工作”。

來源 | Clip設(shè)計(jì)夾（ID：ClipppDesign）

作者 | 趙一 ; 編輯 | 蝦餃

內(nèi)容僅代表作者獨(dú)立觀點(diǎn)，不代表早讀課立場