收集整理:Pigma

前言:以下外掛均為工作場景中經過驗證好用的外掛,會一直保持更新,這裡只推薦好用的外掛! PS:外掛名稱下的推薦指數星數越高,表示這個外掛越好用。需要注意的是:建議外掛不要裝太多,選擇合適自己的就好,避免冗餘的外掛影響效率。轉載請註明出處。

如果你用語雀,也可以在知識庫中檢視此推薦單,更新速度會更快。

零 ·

外掛視覺化

Figma EX

推薦指數:

★★★★★

這是一款支援所有已安裝的外掛視覺化展示的工具,支援「拖拽自定義排序」以及「增加中文註釋說明」,推薦外掛重度使用者使用。缺點是:每次更新Figma客戶端後,都要重新安裝一次。

Figma外掛『精選推薦』

零 ·

Figma漢化工具

Figma Box

推薦指數:

★★★★★

如果語言能力許可,建議大家儘量使用英文版,能掌握一些專業詞彙和國際接軌,對大家還是有一定的幫助的。如果實在困難的話,就裝這個漢化工具吧。

很棒的一個工具,支援客戶端和瀏覽器漢化,對小白很友好,一鍵點選重啟即可。缺點是:更新Figma客戶端後,會覆蓋回英文版本,開啟Figma Box點下漢化即可。

Figma外掛『精選推薦』

PS:Figma Box裡面也有外掛Dock的功能,但是沒 Figma EX 好用。

壹 ·

圖片 Image

一、高畫質圖片

1. Pexels

推薦指數:

★★★★★

非常好用的Image外掛,相當於把Pexels圖片網站搬到了Figma內。除了高品質圖片外,也可以直接使用人物圖片作為素材頭像。

2. Unsplash

推薦指數:

☆☆☆☆

這個,算是老朋友了,大家在sketch時代就經常用到,功能是一樣的。

二、頭像類

1. User Profile

推薦指數:

★★★★★

支援批次替換,圖片的質量高、樣式不重複。適合社群、音樂類別的產品。

2. Content Reel

推薦指數:

☆☆☆

微軟官方釋出的外掛,支援插入隨機的圖片、圖示、文字(如中英文名稱、郵箱、日期、地址)等,也可以自定義隨機內容(支援透過Google賬號同步設定)或使用其他使用者定義好的內容。

3. Avatars

推薦指數:

☆☆☆☆

支援批次替換,圖片的質量較高、樣式不重複。但是更推薦Pexels/User profiles。

貳 ·

圖示 icon

一、圖示庫

1. Icons8 Icons

推薦指數:

★★★★★

這是Figma社群裡面最龐大的圖示庫, 35種風格和超過17萬個圖示(缺點是:高速訪問需要機場)

2. Iconify

推薦指數:

☆☆☆☆

雖然介面有點得簡陋,但它風格很全,超過50000個圖示,幾乎覆蓋全部的圖示型別和品類。圖示不知道該怎麼畫的時候,可以開啟搜尋一下試試看。還有個優點是:訪問速度很快,無需VPN

3. Material Desin Icons

推薦指數:

☆☆☆☆

可以搜尋獲取Material Design 圖示庫中的 27000多個圖示(缺點是:高速訪問需要機場)

4. Brandfetch

推薦指數:

☆☆☆☆

這個外掛可以幫你搜索到世界上絕大多數品牌的logo,包含

png和svg

格式。很贊

5. Better logo

推薦指數:

☆☆☆☆

和上面一樣,也是搜尋品牌logo的外掛,雖然數量沒有上面的多,但是所有的結果都是svg格式的。

二、圖示匯出

1. Fill Rule Editor

推薦指數:

★★★★★

大家在Figma匯出svg後上傳iconfont,會發現圖示經常有融合的問題,這是因為iconfont只支援一種svg屬性導致的。Fill Rule Editor外掛就是用來解決這個問題,具體的操作步驟後續給大家寫一個,這裡只需要只需要記住,把圖示的路徑區域由黃色改為藍色即可。

2. 9 slice Scaling

推薦指數:

☆☆☆☆

用於九宮切圖,適合安卓端切圖以及遊戲開發中使用(點九圖)

叄 ·

圖形 Vector Graphics

一、變形及透視

1. To Path

推薦指數:

☆☆☆☆

類似於AI上的跟隨路徑排列元素的功能,這個外掛可以幫助大家在Figma上實現同樣的效果

2. SkewDat

推薦指數:

☆☆☆☆

可以對圖形和文字進行傾斜設定,支援自定義x和y軸

二、隨機圖形工具

1. Property Randomizer

推薦指數:

★★★★★

這款必須推薦,可以對圖形進行規律化的隨機變形,支援超級多的真自定義引數設定。

目前支援這些引數:Text/Width/Height/X軸/Y軸/Opacity/Rotation/Fill Color/Fill Opacity/Stroke Color/Stroke Opacity/Stroke Weight/Layer Blur/Arc Starting Angle/Arc Ending Angle

2. Confetti

推薦指數:

☆☆☆☆

這個外掛可以將圖形生成隨機散佈的紙屑效果,支援角度、透明度、大小的有限設定,最好用的一點是,它可以同時選擇多個圖層進行隨機。

其實還有另外一款外掛 Sprinkle 功能與 Confetti 一樣,只是引數更少,但是Sprinkle的隨機透明度效果比較好,有透明度變化要求的可以試試這個。

3. Blobs

推薦指數:

☆☆☆

支援隨機產生圓面狀的異形圖形,適合偏視覺的同學

4. Get Waves

推薦指數:

☆☆☆

可以隨機建立波浪線/面,適合偏視覺的同學

·

視覺樣式

一、色彩

1. Mesh Gradient

推薦指數:★★★★★

這個外掛很棒,可以快速輸出網格漸變的效果。支援自動生成兩種風格,最多4色6x6的網格漸變,也支援手動調整。非常好用!

2. Palette

推薦指數:

☆☆☆☆

Palette 根據選定內容,用人工演算法自動生成一些配色內容,效果很好

3. Contrast

推薦指數:

☆☆☆

色彩對比度計算,在選擇顏色時,提供更嚴謹的資料對比度支援。

二、投影

1. Shadow Maker

推薦指數:

★★★★★

可以自定義投影的層級、角度、模糊度等等,是建立平滑投影的好幫手。比smoothshadow好用很多。

伍 ·

互動工具類

1. Autoflow

推薦指數:

★★★★★

支援在畫板/圖層/元素之間自由建立連線線,且這些線條會跟隨畫板的移動而移動(在外掛開啟的情況下),快速完成互動路徑繪製。

2. Draw Connector

推薦指數:

☆☆☆

極簡的flow線條工具,相對上面的Autoflow來說,沒有複雜的引數設定,但優勢在於可以自由設定起始位置和終點的位置。

3. Flow

推薦指數:

☆☆☆

和Autoflow比較像,但介面更加整潔。

4. Simpleflow

推薦指數:

☆☆☆

支援

曲線線條

的flow工具,線條會跟隨畫板的移動而移動(在外掛開啟的情況下)。

陸 ·

字型相關

一、字型識別及使用

1. Font Preview

推薦指數:

★★★★★★

超好用的字型預覽選擇器,完美識別系統裡安裝的所有字型(

完美適配顯示中文字型

),最棒的是,他可以收藏字型(pin功能),可以幫助大家快速找到自己常用的字型。

2. MixFonts

推薦指數:

★★★★★

複合文字樣式,類似InDesign中的複合文字樣式,可以自定義設定英文+中文字型組合,需要在同一個文字中使用不同字型時,這是個絕佳的選擇

3. Translator

推薦指數:

☆☆☆☆

支援多達104種語言,一鍵替換多語言適配不是夢(重點:前提是元件的Auto Layout要搭好,盆友)

4. Text Line Height Fix

推薦指數:

☆☆☆☆

這款外掛能夠調整文字行高,讓移動端設計稿 與 開發環境下對應的字元框高度相匹配(Android字元框:textview、iOS字元框:UI Label)。解決開發文字高度還原不一致的問題,保證設計稿中文字引數的高還原度

二、字型變形

1. SkewDat

推薦指數:

★★★★★

可以對文字和圖形進行傾斜設定,且傾斜後的文字可以繼續編輯,這個彌補了Figma中文字型無法傾斜的不足點

三、字型變形

1. Font Fascia

推薦指數:

☆☆☆☆

可以把整個設計稿中所有的字型及字型樣式都羅列出來,並支援定位到具體圖層,在校對字型樣式的時候還比較好用

柒 ·

資料填充

一、文字資料

1. Content Reel

推薦指數:

★★★★★

微軟官方釋出的外掛,支援插入隨機的圖片、圖示、文字(如中英文名稱、郵箱、日期、地址)等,也可以自定義隨機內容(支援透過Google賬號同步設定)或使用其他使用者定義好的內容。

2. Chinese Content Filling Assistant

推薦指數:

★★★★★

支援隨機填充中文類別的大部分使用者資料,如地址、名字、身份證等。

二、地圖資料

1. Mapsicle

推薦指數:

★★★★★

可以快速無縫地在畫板中填充地圖,再也不用截地圖了!互動式的地圖可以讓你定位到準確的位置,甚至可以搜尋世界上任何一個地方。生成地圖之後,你還可以回到Mapsicle調整位置、風格、縮放級別等。有點讚的是,可以填充衛星雲圖。

捌 ·

圖表類

1. NB Charts

推薦指數:

★★★★★

這個是真有點nubility,可定製幾乎所有的資料表引數,相容性很強。

2. Charts

推薦指數:

☆☆☆☆

可以建立多種圖表,自定義顏色屬性,表格樣式視覺表現還不錯。

3. Table Generator

推薦指數:

☆☆☆☆

支援自動生成二維表格,並在表格內填充使用者自定義的資料,支援的CSV格式,然後生成表。外掛提供了定製選項,可以自定義配置表格單元格樣式。

玖 ·效率工具

1. Breakpoints

推薦指數:

★★★★★

響應式自動佈局演示的神器,利用這個外掛,結合自動佈局功能,可直觀快速的向開發同事傳達響應式佈局的各節點適配效果

·

三維圖形 3D

1. Fig3D

推薦指數:

★★★★★

這個外掛可以把二維圖形、影象生成的3D圖形,支援基礎的厚度、倒角和光影、材質等引數,效果還蠻不錯的,且支援實時預覽。最重要的是:免費!

2.Roto

推薦指數:

☆☆☆☆

可以將二維圖形、文字直接轉化為扁平風格的假3D圖形,比較讚的是,可以隨意調整結果的空間引數,並且可以實時預覽

拾壹 ·

摳圖工具 Mockup

1. Remove BG

推薦指數:

★★★★★

牛逼的自動摳圖工具,輸出效果還不錯,簡直是運營向視覺設計師的福音!

2. Image Tracer

推薦指數:

☆☆☆☆

這是目前找到比較好用的,可以將點陣圖(png/jpg)中的圖形轉為向量圖(svg)的外掛,不過在實踐中的測試結果顯示,主要對高對比度的圖形生效,如二維碼,記得轉完之後還需要手動調整下。

拾貳 ·

包裝模型 Mockup

1. Vectary 3D

推薦指數:

★★★★★

支援設計稿置入預設的可互動的 3D mockup 後匯出圖片到 Figma 中,完美解決】包裝設計稿時找不到適合的 mockup 的煩惱。外掛支援空間角度、材質、環境光影等引數設定,也支援將你自己的

Vectary 3D

賬號中的模型元素匯入 Figma 中。

拾叄 ·

原型/動畫 Prototype/Animation

1. eezin

推薦指數:

☆☆☆☆

這個外掛提供了更多的緩動曲線引數

2. Prototype

推薦指數:

☆☆☆☆

如果你更習慣用Protopie來做動畫演示,或者需要做更復雜的互動演示,也可以使用其官方外掛來將圖層導人到Protopie來完成你的演示動畫

嗯,這裡算是彩蛋吧

如果能翻到這裡,說明你是個熱愛figma且認真學習的三好同學,所以這裡也給你們介紹一些

有趣但其實又沒啥卵用的外掛吧

1. Dice

無卵用指數:

★★★★★

嗯,還真的是一個沒啥亂用的外掛,就是讓你隨機擲骰子 ,大概是用來摸魚的吧。可以選擇骰子的數量(1-5顆),每點選一次隨機生成一個組合。(真誠希望有大神可以在Figma裡面搞一套麻將組個CP配套下)