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

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

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

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

1.Unsplash

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

然而，手動搜索圖庫及攝影網(wǎng)站，并下載然后置于設(shè)計中，是相當費時費工的。

使用 Unsplash Plugin 后，情況將不再如此。這是一個免版稅的圖像庫，無需退出螢幕即可使用。只需選擇你想要的圖像形狀，并打開 Unsplash，就可以馬上開始！

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

更重要的是，Unsplash 的圖像文件通常占用不到 1 MB 的空間，因此，你不必過多擔心計算機存儲空間的問題，是一個很方便又免費的 Plugin！

2. Remove BG

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

也就是說，有時候你可能需要通過去背來避免這個狀況。當然，你可以通過一般照片編輯器來手動去背，但這非常耗時，尤其是在必須處理多張圖像的時候。

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

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

3. TinyImage Compressor

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

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

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

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

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

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

4. Font Preview

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

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

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

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

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

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

5. Color Contrast Checker

說到文本，你還需要注意文本顏色與背景的對比，否則可能會讓你的內(nèi)容難以閱讀，尤其是在螢幕亮度低的時候。

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

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

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

6. Wireframe

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

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

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

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

7. Blush

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

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

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

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

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

8. Design Lint

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

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

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

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

9. LottieFiles

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

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

LottieFiles 使集成動效變得容易，你可以輕松取得社區(qū)上創(chuàng)建的上萬個免費和付費的動效資源，快速從中找到符合你想像的動效。

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

10. SkewDat

雖然傾斜看似是個簡單的設(shè)計技巧，但其實它可以幫你界面設(shè)計看起來更高級！

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

總結(jié)

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

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