從 2016 年推出至今，F(xiàn)igma 已發(fā)展成市場(chǎng)上領(lǐng)先的 UI 設(shè)計(jì)工具之一。

因?yàn)樗粌H簡(jiǎn)單好上手、功能出色，還以云端服務(wù)為基礎(chǔ)，讓你能實(shí)時(shí)編輯，省下許多手動(dòng)下載或復(fù)制文件的時(shí)間。不僅如此，F(xiàn)igma 也提供協(xié)作功能，讓你和你的團(tuán)隊(duì)能夠同步處理文件，免于許多潛在的麻煩。這些方便的功能，都讓他成為一個(gè)非常有競(jìng)爭(zhēng)力的設(shè)計(jì)產(chǎn)品。

不過(guò)，這還不是全部，F(xiàn)igma 背后還有一個(gè)強(qiáng)大的社區(qū)，也就是說(shuō)，通過(guò)社區(qū)，你可以直接瀏覽、修改、使用其他設(shè)計(jì)師所創(chuàng)建的文件和模板，來(lái)快速開始你的設(shè)計(jì)專案。更不用說(shuō)它還提供成千上萬(wàn)的 Plugin 供用戶使用，幫你強(qiáng)化工作流程，添加許多實(shí)用功能！

但有這么多 Plugin，怎么知道哪些最適合你？別擔(dān)心，我們已經(jīng)幫你精選出 10 個(gè) UI 設(shè)計(jì)師必備的優(yōu)質(zhì) Figma Plugin！

1.Unsplash

視覺效果在設(shè)計(jì)中發(fā)揮著重要作用，不僅可以增強(qiáng)界面的整體外觀、吸引用戶的注意力，還可以為你的設(shè)計(jì)補(bǔ)充信息，而「添加大量的圖像」就是快速增加視覺效果的一種方法。

然而，手動(dòng)搜索圖庫(kù)及攝影網(wǎng)站，并下載然后置于設(shè)計(jì)中，是相當(dāng)費(fèi)時(shí)費(fèi)工的。

使用 Unsplash Plugin 后，情況將不再如此。這是一個(gè)免版稅的圖像庫(kù)，無(wú)需退出螢?zāi)患纯墒褂?。只需選擇你想要的圖像形狀，并打開 Unsplash，就可以馬上開始！

Unsplash 擁有數(shù)千張由公共領(lǐng)域所發(fā)布的圖像，因此，無(wú)論你是為電商還是科技公司設(shè)計(jì)，在這里一定能找到適合你設(shè)計(jì)的圖像，只需輸入一個(gè)關(guān)鍵字，就可以快速搜索！

更重要的是，Unsplash 的圖像文件通常占用不到 1 MB 的空間，因此，你不必過(guò)多擔(dān)心計(jì)算機(jī)存儲(chǔ)空間的問(wèn)題，是一個(gè)很方便又免費(fèi)的 Plugin！

2. Remove BG

雖然圖像很重要，但如果圖像背景太有存在感，將會(huì)使你的設(shè)計(jì)感覺雜亂無(wú)章，甚至模糊了視覺焦點(diǎn)。

也就是說(shuō)，有時(shí)候你可能需要通過(guò)去背來(lái)避免這個(gè)狀況。當(dāng)然，你可以通過(guò)一般照片編輯器來(lái)手動(dòng)去背，但這非常耗時(shí)，尤其是在必須處理多張圖像的時(shí)候。

Remove BG 這個(gè) Plugin 只需幾秒鐘內(nèi)即可自動(dòng)實(shí)現(xiàn)去背，它通過(guò)人工智能（AI）來(lái)識(shí)別圖像中的主要物件，并自動(dòng)清除剩余部分，讓你輕松將去背后的物件添加進(jìn)設(shè)計(jì)作品中，你完全沒有理由不嘗試它。

不過(guò)雖然 Remove BG 有免費(fèi)版，但它主要還是以 Credit 為單位的收費(fèi)模式，一張圖像價(jià)值 1 Credit，收取 1.99 美元。你可以通過(guò)購(gòu)買多個(gè)積分來(lái)獲得折扣，或選擇以每月／每年訂閱的價(jià)格方案，絕對(duì)物超所值！

3. TinyImage Compressor

據(jù)統(tǒng)計(jì)，行動(dòng)設(shè)備所產(chǎn)生的流量占整體網(wǎng)絡(luò)流量的 54.8%，如果網(wǎng)站加載超過(guò) 3 秒，將有 53% 的行動(dòng)設(shè)備用戶會(huì)直接離開網(wǎng)站。不僅如此，Google 還計(jì)劃將「行動(dòng)版內(nèi)容優(yōu)先索引系統(tǒng)」設(shè)置為所有網(wǎng)站的默認(rèn)設(shè)備。

簡(jiǎn)單來(lái)說(shuō)，網(wǎng)絡(luò)爬蟲在搜索結(jié)果頁(yè)面中的排名，會(huì)優(yōu)先考慮適合行動(dòng)設(shè)備的網(wǎng)站。

也就是說(shuō)，在網(wǎng)頁(yè)設(shè)計(jì)中，優(yōu)化網(wǎng)頁(yè)速度是我們必須優(yōu)先考慮的事情，而最簡(jiǎn)單的步驟，就是通過(guò) TinyImage Compressor 來(lái)幫你快速壓縮略圖像！

它的壓縮能力比 Figma 默認(rèn)值高出 95%，除了可以壓縮不同大小和格式的圖像文件外，你也可以通過(guò) TinyImage Compressor 優(yōu)化漸進(jìn)式 JPEG 圖檔和透明 PNG 圖像。

除此之外，它還提供非常多種功能，包括從 JPG 及 PNG 到 WebP、Progressive JPEG 或 AVIF 的轉(zhuǎn)換、自動(dòng)將多個(gè)圖像保存為 .zip 文件、創(chuàng)建和導(dǎo)出 GIF 或 WebM 等。

壓縮前 15 個(gè)文件不收費(fèi)，若有額外的需求則需每月支付 15 美金。

4. Font Preview

除了視覺效果，字體也是界面設(shè)計(jì)的另一個(gè)重要元素，尤其是現(xiàn)今的信息主要以文本表達(dá)居多，因此用戶也會(huì)更加在意字體的使用。也就是說(shuō)，字體必須吸引人且容易閱讀。

一個(gè)合適的字體可以凸顯出你的風(fēng)格及特色，幫助你傳達(dá)出更強(qiáng)烈的信息或特定的情緒。此外，你所選擇的字體必須符合整體設(shè)計(jì)風(fēng)格，以免讓整體視覺效果不協(xié)調(diào)。

最重要的是，大多數(shù)提供「數(shù)位品牌服務(wù)」的公司，都會(huì)建議你選擇可以反映出品牌個(gè)性的字體及配色，以保持一致的品牌識(shí)別度和品牌訊息。

因此，雖然 Figma 已經(jīng)內(nèi)建大多數(shù)的 Google 字體，但因?yàn)樘暨x字體時(shí)需要注意的細(xì)節(jié)非常多，還是沒辦法快速準(zhǔn)確地挑選合適的設(shè)計(jì)。

但有了這款免費(fèi) Plugin，以上的煩惱將一次解決！

Font Preview 可以幫你快速瀏覽不同字體呈現(xiàn)的風(fēng)格、讓你直接收藏喜歡的字體，甚至是利用強(qiáng)大的過(guò)濾器功能，幫你輕松找到合適款式！它還有許多即將推出的新功能，包括按照字體的粗細(xì)程度快速搜索、更改字母間距和預(yù)覽大小等。

5. Color Contrast Checker

說(shuō)到文本，你還需要注意文本顏色與背景的對(duì)比，否則可能會(huì)讓你的內(nèi)容難以閱讀，尤其是在螢?zāi)涣炼鹊偷臅r(shí)候。

這款 Plugin 會(huì)幫你檢查設(shè)計(jì)中的前景及背景色，并一鍵圈出文本在設(shè)備上較不易閱讀的部分，再通過(guò) Color Contrast Checker 的顏色滑塊來(lái)調(diào)整背景和前景色，并實(shí)時(shí)查看對(duì)比度的變化。

它還能讓你知道你的設(shè)計(jì)是否符合「網(wǎng)頁(yè)內(nèi)容無(wú)障礙指南」。

換句話說(shuō)，這項(xiàng) Plugin 可確保你的網(wǎng)頁(yè)界面在可讀性的部分得到完整優(yōu)化，并允許你實(shí)時(shí)調(diào)整，好讓用戶能得到最完善的閱讀體驗(yàn)！

6. Wireframe

線框是界面設(shè)計(jì)的基礎(chǔ)，能讓你快速掌握整體界面的布局，幫你的客戶了解他們的主要目標(biāo)與需求，讓你更有效地將想法傳達(dá)給設(shè)計(jì)團(tuán)隊(duì)。

安裝 Wireframe 這個(gè) Plugin 后，再也不用從頭開始構(gòu)建線框稿！

Wireframe 提供了大量「桌面」和「行動(dòng)設(shè)備」的默認(rèn)模板，能節(jié)省你的構(gòu)思過(guò)程，幫你大幅提升工作效率！

此外，所有的文件都是 SVG 格式，可以讓你輕松客制化，而且這款完全免費(fèi)！

7. Blush

「插圖」席卷了網(wǎng)頁(yè)設(shè)計(jì)界，而且他的魅力不減反增，畢竟，它能為網(wǎng)站帶來(lái)獨(dú)特且吸睛的效果。但如果你不是藝術(shù)派，你可能不會(huì)想花好幾個(gè)小時(shí)在設(shè)計(jì)插畫上。

這時(shí)，你就非常需要 Blush Plugin！它是一個(gè)網(wǎng)羅了數(shù)百名藝術(shù)家作品的大型插畫圖庫(kù)，你可以自由下載或收藏喜歡的插圖，并將其至于你專屬的畫布上。

不僅如此，Blush 最特別的是，它還提供了「客制化」的功能，讓你可以在選擇一款插圖后，自由更改其原始配置，借此快速制作出符合你的品牌風(fēng)格的圖案。

舉例來(lái)說(shuō)，如果你選擇一款特定角色，它的腿、頭、軀干、顏色等細(xì)節(jié)配置都是可以調(diào)整的。除此之外，你也可以通過(guò)「隨機(jī)化功能」自動(dòng)打亂所有的合成組件。

在定價(jià)方面，Blush 同時(shí)提供了免費(fèi)與付費(fèi)的價(jià)格方案：免費(fèi)版可讓你無(wú)限制下載，但最多只能保存 5 款設(shè)計(jì)；而付費(fèi)的方案則可瀏覽超過(guò) 1 萬(wàn)張插圖、客制化 SVG 矢量圖與高分辨率的 PNG 圖檔等，并提供年繳方案，以每月 12 美金的方式收費(fèi)。

8. Design Lint

在設(shè)計(jì)稿進(jìn)入開發(fā)階段前，你必須確保所有設(shè)計(jì)細(xì)節(jié)的一致性及準(zhǔn)確性，而 Design Lint 將成為你的最佳助手！

Design Lint 通過(guò)檢查顏色、效果、填充樣式、筆觸、邊框半徑等細(xì)節(jié)，自動(dòng)偵測(cè)及識(shí)別你的文件是否有缺失的樣式，并將所有錯(cuò)誤與發(fā)生頻率顯示于圖層列表中。

它還提供「實(shí)時(shí)狀態(tài)」功能，讓你第一時(shí)間查看問(wèn)題修復(fù)的狀況。

總結(jié)來(lái)說(shuō)，Design Lint 是一個(gè)免費(fèi)、快速且簡(jiǎn)便的 Plugin，來(lái)確保你的設(shè)計(jì)已準(zhǔn)備好進(jìn)入開發(fā)狀態(tài)。

9. LottieFiles

添加動(dòng)效于設(shè)計(jì)中可以使靜態(tài)的界面更加栩栩如生，幫你的作品加分，變得更吸睛！

不僅如此，動(dòng)效特效還能提升用戶的參與度，例如通過(guò)動(dòng)效將注意力吸引到 CTA 按鈕上以提升轉(zhuǎn)換率。

LottieFiles 使集成動(dòng)效變得容易，你可以輕松取得社區(qū)上創(chuàng)建的上萬(wàn)個(gè)免費(fèi)和付費(fèi)的動(dòng)效資源，快速?gòu)闹姓业椒夏阆胂竦膭?dòng)效。

更棒的是你還可以通過(guò)它簡(jiǎn)單易上手的拖放界面，來(lái)創(chuàng)建和編輯動(dòng)效所需的所有工具。

10. SkewDat

雖然傾斜看似是個(gè)簡(jiǎn)單的設(shè)計(jì)技巧，但其實(shí)它可以幫你界面設(shè)計(jì)看起來(lái)更高級(jí)！

利用 SkewDat 的「傾斜」功能，并輕松應(yīng)用于任何的設(shè)計(jì)元素上，讓你的作品提升設(shè)計(jì)層次，呈現(xiàn)出最佳的 3D 效果。最后再借由「實(shí)時(shí)預(yù)覽」的功能，實(shí)時(shí)查看所有調(diào)整，幫你微調(diào)所有細(xì)節(jié)，完全免費(fèi)！

總結(jié)

Figma 本身就是一款強(qiáng)大的設(shè)計(jì)工具，而其多樣化的 Plugin 又為它增加了更豐富的功能。

不管你是初學(xué)者還是 UI 設(shè)計(jì)專家，以上所介紹的 10 款 Plugins 可以說(shuō)是每個(gè)設(shè)計(jì)師的基本配備，其中像 Remove BG、Wireframe、Font Preview、Color Contrast Checker 和 Design Lint 等 Plugin，不僅能為你節(jié)省大量的工作時(shí)間，還能確保你的設(shè)計(jì)更加精準(zhǔn)，再利用 SkewDat、Blush 和 LottieFiles 快速點(diǎn)擊，就能讓你的設(shè)計(jì)更有層次！