UI 設計師必備！10 個不可錯過的優質Figma Plugin 推薦 - Eagle

身為UI 設計師不可不知的10 款熱門Figma Plugin，圖庫、去背、配色、壓縮、Wireframe 等多項必備的設計工具一次介紹給你！ 目錄Eagle部落格設計資源UI設計師必備！10個不可錯過的優質FigmaPlugin推薦免費素材RickSeidl・2022-03-07從2016年推出至今，Figma已發展成市場上領先的UI設計工具之一。

因為它不僅簡單好上手、功能出色，還以雲端服務為基礎，讓你能即時編輯，省下許多手動下載或複製檔案的時間。

不僅如此，Figma也提供協作功能，讓你和你的團隊能夠同步處理檔案，免於許多潛在的麻煩。

這些方便的功能，都讓他成為一個非常有競爭力的設計產品。

不過，這還不是全部，Figma背後還有一個強大的社群，也就是說，透過社群，你可以直接瀏覽、修改、使用其他設計師所創建的文件和模板，來快速開始你的設計專案。

更不用說它還提供成千上萬的Plugin供用戶使用，幫你強化工作流程，添加許多實用功能！ 但有這麼多Plugin，怎麼知道哪些最適合你？別擔心，我們已經幫你精選出10個UI設計師必備的優質FigmaPlugin！ 1.Unsplash圖片來源：Unsplash 視覺效果在設計中發揮著重要作用，不僅可以增強介面的整體外觀、吸引用戶的注意力，還可以為你的設計補充資訊，而「添加大量的圖片」就是快速增加視覺效果的一種方法。

然而，手動搜索圖庫及攝影網站，並下載然後置於設計中，是相當費時費工的。

使用UnsplashPlugin後，情況將不再如此。

這是一個免版稅的圖片庫，無需退出螢幕即可使用。

只需選擇你想要的圖片形狀，並打開Unsplash，就可以馬上開始！Unsplash擁有數千張由公共領域所發布的圖片，因此，無論你是為電商還是科技公司設計，在這裡一定能找到適合你設計的圖片，只需輸入一個關鍵字，就可以快速搜尋！更重要的是，Unsplash的圖片檔案通常佔用不到1MB的空間，因此，你不必過多擔心電腦儲存空間的問題，是一個很方便又免費的Plugin！2.RemoveBG圖片來源：Unsplash 雖然圖片很重要，但如果圖片背景太有存在感，將會使你的設計感覺雜亂無章，甚至模糊了視覺焦點。

也就是說，有時候你可能需要透過去背來避免這個狀況。

當然，你可以透過一般照片編輯器來手動去背，但這非常耗時，尤其是在必須處理多張圖片的時候。

RemoveBG這個Plugin只需幾秒鐘內即可自動完成去背，它透過人工智慧（AI）來識別圖片中的主要物件，並自動清除剩餘部分，讓你輕鬆將去背後的物件添加進設計作品中，你完全沒有理由不嘗試它。

不過雖然RemoveBG有免費版，但它主要還是以Credit為單位的收費模式，一張圖片價值1Credit，收取1.99美元。

你可以透過購買多個積分來獲得折扣，或選擇以每月／每年訂閱的價格方案，絕對物超所值！3.TinyImageCompressor圖片來源：TinyImageCompressor 據統計，行動裝置所產生的流量佔整體網路流量的54.8%，如果網站加載超過3秒，將有53%的行動裝置用戶會直接離開網站。

不僅如此，Google還計劃將「行動版內容優先索引系統」設置為所有網站的默認裝置。

簡單來說，網路爬蟲在搜索結果頁面中的排名，會優先考慮適合行動裝置的網站。

也就是說，在網頁設計中，優化網頁速度是我們必須優先考慮的事情，而最簡單的步驟，就是透過TinyImageCompressor來幫你快速壓縮圖片！它的壓縮能力比Figma預設值高出95%，除了可以壓縮不同大小和格式的圖片文件外，你也可以透過TinyImageCompressor優化漸進式JPEG圖檔和透明PNG圖像。

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

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

4.FontPreview圖片來源：FontPreview 除了視覺效果，字體也是介面設計的另一個重要元素，尤其是現今的資訊主要以文字表達居多，因此用戶也會更加在意字體的使用。

也就是說，字體必須吸引人且容易閱讀。

一個合適的字體可以凸顯出你的風格及特色，幫助你傳達出更強烈的資訊或特定的情緒。

此外，你所選擇的字體必須符合整體設計風格，以免讓整體視覺效果不協調。

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

因此，雖然Figma已經內建大多數的Google字體，但因為挑選字體時需要注意的細節非常多，還是沒辦法快速準確地挑選合適的設計。

但有了這款免費Plugin，以上的煩惱將一次解決！FontPreview可以幫你快速瀏覽不同字體呈現的風格、讓你直接收藏喜歡的字體，甚至是利用強大的過濾器功能，幫你輕鬆找到合適款式！它還有許多即將推出的新功能，包括按照字體的粗細程度快速搜索、更改字母間距和預覽大小等。

5.ColorContrastChecker圖片來源：ColorContrastChecker 說到文字，你還需要注意文字顏色與背景的對比，否則可能會讓你的內容難以閱讀，尤其是在螢幕亮度低的時候。

這款Plugin會幫你檢查設計中的前景及背景色，並一鍵圈出文本在裝置上較不易閱讀的部分，再透過ColorContrastChecker的顏色滑塊來調整背景和前景色，並即時查看對比度的變化。

它還能讓你知道你的設計是否符合「網頁內容無障礙指南」。

換句話說，這項Plugin可確保你的網頁介面在可讀性的部分得到完整優化，並允許你即時調整，好讓用戶能得到最完善的閱讀體驗！6.Wireframe圖片來源：Wireframe 線框是介面設計的基礎，能讓你快速掌握整體介面的佈局，幫你的客戶了解他們的主要目標與需求，讓你更有效地將想法傳達給設計團隊。

安裝Wireframe這個Plugin後，再也不用從頭開始構建線框稿！Wireframe提供了大量「桌面」和「行動裝置」的預設模板，能節省你的構思過程，幫你大幅提升工作效率！此外，所有的文件都是SVG格式，可以讓你輕鬆客製化，而且這款完全免費！7.Blush圖片來源：Blush 「插圖」席捲了網頁設計界，而且他的魅力不減反增，畢竟，它能為網站帶來獨特且吸睛的效果。

但如果你不是藝術派，你可能不會想花好幾個小時在設計插畫上。

這時，你就非常需要BlushPlugin！它是一個網羅了數百名藝術家作品的大型插畫圖庫，你可以自由下載或收藏喜歡的插圖，並將其至於你專屬的畫布上。

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

舉例來說，如果你選擇一款特定角色，它的腿、頭、軀幹、顏色等細節設定都是可以調整的。

除此之外，你也可以透過「隨機化功能」自動打亂所有的合成組件。

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

8.DesignLint圖片來源：DesignLint 在設計稿進入開發階段前，你必須確保所有設計細節的一致性及準確性，而DesignLint將成為你的最佳助手！DesignLint透過檢查顏色、效果、填充樣式、筆觸、邊框半徑等細節，自動偵測及識別你的文件是否有缺失的樣式，並將所有錯誤與發生頻率顯示於圖層列表中。

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

總結來說，DesignLint是一個免費、快速且簡便的Plugin，來確保你的設計已準備好進入開發狀態。

9.LottieFiles圖片來源：LottieFiles 添加動畫於設計中可以使靜態的介面更加栩栩如生，幫你的作品加分，變得更吸睛！不僅如此，動畫特效還能提升用戶的參與度，例如透過動畫將注意力吸引到CTA按鈕上以提升轉換率。

LottieFiles使整合動畫變得容易，你可以輕鬆取得社群上創建的上萬個免費和付費的動畫資源，快速從中找到符合你想像的動畫。

更棒的是你還可以透過它簡單易上手的拖放介面，來創建和編輯動畫所需的所有工具。

10.SkewDat圖片來源：SkewDat 雖然傾斜看似是個簡單的設計技巧，但其實它可以幫你介面設計看起來更高級！利用SkewDat的「傾斜」功能，並輕鬆應用於任何的設計元素上，讓你的作品提升設計層次，呈現出最佳的3D效果。

最後再藉由「實時預覽」的功能，即時查看所有調整，幫你微調所有細節，完全免費！總結Figma本身就是一款強大的設計工具，而其多樣化的Plugin又為它增加了更豐富的功能。

不管你是初學者還是UI設計專家，以上所介紹的10款Plugins可以說是每個設計師的基本配備，其中像RemoveBG、Wireframe、FontPreview、ColorContrastChecker和DesignLint等Plugin，不僅能為你節省大量的工作時間，還能確保你的設計更加精準，再利用SkewDat、Blush和LottieFiles快速點擊，就能讓你的設計更有層次！看完這麼多的FigmaPlugin介紹，是不是想要有一個實用方法來協助你整理靈感及設計素材呢？試試Eagle就對了！Eagle是一款強大的素材管理工具，不管是任何的文件、連結、圖片和影像，都可以透過加入標籤、評分、註記，和建立智慧型資料夾等功能，輕鬆管理所有的設計素材與靈感，再也不怕在茫茫大海中撈不到你想要的素材，讓你的創作事半功倍！影片來源：Eagle除此之外，Eagle部落格更提供你好用的設計資源、資訊懶人包，讓你成為更好的設計專業工作者！如果你還是覺得缺乏靈感或創作動力，歡迎到Eagle設計資源社區走走，這裡有著數以萬計的設計師分享好用工具與靈感網站，Eagle就是要幫助你在設計之路上更省力！這篇文章對你有幫助嗎？分享給朋友 RickSeidl 一位數位行銷專家，擁有美國俄勒岡州的數位媒體與通訊學士，對建立數位行銷、社群，以及小型商業發展具有極大的熱情，目前專為FindDigitalAgency撰寫有關數位行銷和商業策略的文章。

想加入Eagle部落格作者群嗎？相關文章提高設計生產力！數位資產管理工具怎麼用？怎麼挑？評比推薦還在找不到檔案？快來認識數位資產管理工具！數位資產管理工具可以分類、整理、簡化管理設計的工作流程、提升工作效率，怎麼挑怎麼選，就看這篇評比！2022-06-20・設計資源想自學UI／UX？42個新手必備的線上資源，帶你有效學習！想自學UI／UX，千萬別錯過以下這42個實用的學習資源！內文包括優選文章、部落格、Podcast、YouTube頻道推薦，一次滿足你的所有需求！2022-03-16・設計資源想拓展設計圈人脈嗎？20個UI／UX設計師愛用的社群媒體推薦想跟設計師交流嗎？20個UI／UX設計師愛用的discord社群、slack聊天群組、臉書交流社團等推薦，不管是技術精進、設計知識分享、一起吐苦水，快加入吧2022-03-03・設計資源2022最新！20個動態圖像設計的靈感網站及資源推薦你在找動態圖像設計的靈感嗎？20個實用的動態設計資源網站，包括動態設計素材、設計師專訪與專案研究分析等多項豐富內容，提供你源源不絕的創作靈感！2022-03-01・設計資源首頁瀏覽器擴充快速入門資源社群部落格幫助中心立刻購買我們使用Cookies來改進我們的網站並提供個性化的體驗。

同意