UI設計師必須收藏的20款超好用Figma插件

聽說點擊藍色字體關注同窗都升職加薪了
web

不少UI設計師小夥伴都從Sketch轉到Figma了，本文爲你們介紹21款好用的Figma插件，記得收藏！但願這些插件能助你一臂之力。快收藏~

如何在Figma中添加插件？

安裝plugin的方式很是簡單，從 figma community 點擊想加入的plugin，進入產品頁後點擊右上方[Install]，安裝後按鈕會呈現黑底[Installed]。

找到Plugin的方式有兩種: 回到Figma介面中，點選左上漢堡菜單，就可找到剛纔安裝的Plugin；或是點選元件，按右鍵也可找到Plugin菜單。

實用Figma plugins推薦

接下來我將介紹這些日子實際接觸過的插件，共分爲三大類。大部分我都試用過並附上截圖與使用心得。少數須要付費，或須要設定API or JSONbin 的我沒法再深刻研究，可是會附上Youtube說明影片。

1.界面美學類*11款 (Visual Design, Animation)

2.設計系統類*4款 (Design system, UI/Icon Kit)

3.提前下班類*5款(Design management…)

1.界面美學類

(1) Image Palette (圖像配色提取)

對新手來講，配色確定是面臨的難題之一。Image Palette 幫你從所選圖片中提取5種顏色，很適合用來定義產品與品牌形象類型的介面色彩，是開啓優雅配色的起手式。

(2)Webgradients (色彩漸變)

Webgradients 能夠協助設計師快速製做漸變，無須本身吸色選取。內建多種漂亮的漸變配色，操做直覺很是容易理解，用過就知道

(3) Unsplash (高畫質圖片素材)

還忙着在搜索引擎中切換找圖嗎? 藉助Unsplash就能夠直接插入隨機圖像，或搜索特定圖像。除了畫質精美外，Unsplash 還容許將圖像免費用於商業和我的專案。

(4) Wire Box (將高保真圖轉爲線框圖)

彷佛比較少需求是把高保真原型反向轉成線框圖? 但試用Wire Box後我發現，去除多餘雜色與色彩的減法設計也別有一番簡約風味，若不想思考用色時能夠玩玩Wire Box 創造不一樣的感受。

須要注意：

1. 選取Frame後，才能使用Wire Box轉成線框圖

2. 有些元素會被漏掉，沒法100%還原；例如「線段 Line」沒法被顯現

3. 有作遮罩效果的元件，只會顯示底層元素

4. 能夠依喜愛改色

(5) Blobs (建立不規則矢量色塊)

還記得那怎樣都拉很差的貝塞爾曲線嗎? Blobs 讓你輕鬆建立斑點形狀。生成的每一個形狀都是惟一的，很適合用來作Landing page的背景。透過設定能夠控制形狀的節點數，形狀是使用SVG建立的，能獲得不失真且線條優雅的曲線。

(6)Pattern Hero (製做重複背景與元件)

Pattern Hero的功能與Adobe XD-Repeat Grid相似，雖然使用上須要較多的步驟，但的確能解決我當初想作重複背景的需求。

須要注意：

1. 幾欄、幾列與Padding距離都需要先設定好，而生成後這些設定都沒法再被新增或刪減(Adobe-Repeat Grid比較直觀，數量以拖曳範圍來決定)

2. Padding距離能夠直接拖曳調整(右圖桃紅色色塊)，但原控制面板上的設定數值不會跟着動

3. 點擊個別元素能夠修改色彩或文字

4. 除了讓色塊重複成爲Pattern外，也能夠做用於羣組化的元件

(7)BeatFlyer Lite (靜態圖片轉動態圖)

BeatFlyer Lite本來個第三方的動態製做工具，不過如今它也做爲插件直接內嵌到Figma當中！界面操做簡單易懂，提供好幾種動態設定，只須要快速點擊幾下，就可以生成動態效果

須要注意：

1. 可說是輕量化的靜態影像動態編輯軟體。雖然不是作UI界面必須的，但適合搭配電音類型的應用app。

2. 不太像通常對插件的定義。雖然能夠從Figma中開啓，但製做完成後檔案是下載到本機端資料夾中，因此仍是得將動態檔拖曳到Figma(操做流程被打斷)，不像其餘插件一直都在figma中使用。

(8) GiffyCanvas(製做gif逐格動畫)

無需離開Figma，你只需利用GiffyCanvas就能夠建立gif圖像。設計並選擇要製做的Frame文檔後，設定動畫參數（時間，寬度，高度）而後預覽，看了沒問題以後就能夠下載了。

(9) LottieFiles(置入Lottie動畫)

Lottie 最初是由Airbnb 開發的開源JSON文件動畫工具，今年2月14情人節才加入Figma插件平臺，很快就上了排行榜。經過它，你能夠將成千上萬的免費Lottie動畫做爲gif或SVG插入你的設計中。

(10)Humaaans for Figma(輕鬆製做人物矢量)

Humaaans 讓你快速建構出人物插畫，除了default設計好的圖樣，也將頭、身體、配件等拆開供設計師自行組合，你也能夠改變顏色與大小，概念很像之前小時候玩的紙娃娃。目前只提供少許人物動做造型還有部分居家配件，期待以後有更多的物件可使用!

(11)Isometric(快速製做斜放產品圖)

Isometric幫助你快速製做斜放的UI產品圖。操做很簡單，選擇要旋轉的物件，調整角度以後就能夠了。

須要注意：

1. 斜放角度爲2D+3D角度合成。用戶可自行輸入想要的2D旋轉角度，但3D角度空間角度Isometric僅預設左斜或右斜兩種。由於3D角度沒法被調整，老是作不出我想要的角度，因此我的以爲不是很好用。

2. 若要放進做品集，最好仍是選擇產品正面較佳(能看清楚細節)，不建議斜放產品圖。

2.設計系統類

(1) Figma Dashboard UI Kit (付費)

內含多種Design System UI Kit，最被普遍使用的iOS、Material Design等都在其中，但此網站須要付費，可視需求使用。

(2) FigmaCrush (Icon+UI Kit, 部分付費)

這個網站能夠理解爲各類Figma資源的集合平臺，上面收集許多免費或付費的Icon與界面設計。

(3)Design System Organizer(圖層命名與組織整理, Beta版)

當你在使用設計系統來進行設計的時候，你可能須要針對特定組件的不一樣狀態，樣式進行管理。Design System Organizer能幫助你整理元素和控件樣式，也能夠針對這些組件進行分組，移動，重命名（批次）等等。

(4)Able (色彩對比度插件)

打開Able，能夠自動比較你選擇的兩個圖層之間的色彩對比度。此外也會同步顯示不一樣狀態的樣式(如字體大小、粗細)，供用戶參考比較。

3.提前下班類

(1)Product Planner (產品規劃模版, Beta版)

Product Planner 提供各類產品規劃過程會用到的模版，如 product planning, product insights, identifying risks, Persona, Lean Canvas等等。它於2019.10月開始發佈，目前已有27種模版釋出往後還會再增長，不知道會有多少產品經理或產品設計師使用此模版? 好用嗎? 很好奇。

(2)Content Reel (自動填充內容)

透過Content Reel，設計師能夠輕鬆地將文本、頭像和圖標拉入設計。不用一個一個填充。

使用圖標前，得先下載Content Reel中使用的字體。

(3) Design Lint (設計除錯)

在將設計稿提交給開發前，須要確保整個設計細節是一致的，而這個超讚的免費插件，可以檢查你的原型或者視覺稿件如顏色，字體，效果，填充樣式，筆觸，邊框區域是否存在不一致，簡直是一個自動糾錯工具，更重要的是它是動態實時的，所以你能夠邊工做邊用它糾錯。

須要注意的是：

此插件好很差用得看設計的複雜度。試用後發現Design Lint作得很仔細，可是會細到連矢量插畫不同的顏色都幫你挑出來。😅

(4) TinyImage Compressor(圖片壓縮打包, 付費)

這也是一個實用性極強的Figma插件，TinyImage 可以幫你壓縮圖片-可以比Figma自己生成的圖片要小90％。此外，它也支持透明PNG和漸進式的 JPEG格式優化，可以在使用過程當中記住你的設置，並在生成多個圖像時自動幫你打包成爲ZIP格式壓縮包。

(5) Remove BG(去背景插件，需使用remove.bg API)

若沒有Photoshop或懶得摳圖，Remove BG應該是個夢幻插件。只需單擊一下，便可自動刪除圖像背景，需使用remove.bg API，可是我沒成功。

這麼多插件，記得先收藏轉發本文，而後再給個贊哦。