12 個 Figma 圖庫外掛推薦:免費圖片一鍵插入
整理 12 款 Figma 圖庫外掛推薦,涵蓋 Unsplash、Pexels 免費照片與向量插畫,比較商用授權與適用場景,幫你挑出最適合的一款。
作者:褚崇名(Sliven)
本頁目錄
- 為什麼後來幾乎不再「下載再拖進 Figma」
- 挑外掛之前,先把這三個問題問清楚
- 十二個外掛總覽(一張表看完)
- Community 檔案 vs 外掛:你裝的到底是哪一種
- 照片主力對決:Unsplash 與 Pexels
- Unsplash:質感與一致性最好的照片池
- Pexels:人物、情緒與構圖多樣性更強
- 向量與海量素材:Pixabay 與 Freepik
- Pixabay:免費就能同時撈照片、向量與插畫
- Freepik:向量與 PSD 的海量化主力
- 線框階段先把位置佔住:Lorem Picsum
- 插畫與角色素材:unDraw、humaaans、Drawkit、Storyset、ManyPixels
- unDraw:極簡扁平、單鍵換色
- humaaans:人物組合的自由度最高
- Drawkit:成套插畫的風格一致性
- Storyset:可調色、可加動畫的編輯型插畫
- ManyPixels Gallery:補 humaaans 之外的場景
- 為什麼這份清單刻意不放 AI 生圖外掛
- 上線前的去背處理:remove.bg
- 把素材庫搬進 Figma:Eagle
- 三分鐘安裝與啟用流程
- 授權眉角:免費不等於免責
- 選圖工作流(線框到定稿)
- 常見問題排查
- 外掛裝了卻在選單裡找不到
- 插入的圖檔案過大、畫面卡頓
- 搜尋中文關鍵字命中率低
- Freepik 免費版出現要署名的提示
- 去背結果邊緣有殘留或破損
- 裝太多外掛會不會拖慢 Figma
- 延伸閱讀與下一步行動
塞一張產品情境照,到底要花你多少時間?如果你還在開新分頁、跑圖庫網站、搜尋、下載、解壓縮、再拖回 Figma,來回三次節奏就全斷了。這段流程不少人都遇到過。做 SaaS 工具的 landing page 設計稿時,光是「找圖、放圖、換圖」就吃掉將近一半的作圖時間。把整個流程搬進 Figma 裡,靠的就是圖庫外掛。
先聲明在先:以下是針對 SaaS 工具設計稿整理出來的選型直覺,並非某一次接案的精密實測;下文提到的數字都是概略範圍,不是精確計時,免得你拿去當成 SLA 承諾。這裡的目的是把「哪一款外掛配哪一種場景」的判斷邏輯交給你,而不是替你背書某一套工具一定最好用。
這篇整理了 十二個可搭配 Figma 使用的圖庫、插畫與素材工具,涵蓋照片、向量插畫、佔位圖與素材管理四大類。有些可從 Figma 外掛直接執行,有些則以 Community 檔案或網站資源為主;實際可用入口與方案仍以各工具當下頁面為準。下面逐層拆解。
如果你才剛接觸 Figma 外掛生態,建議先回頭讀一篇 Figma 外掛新手入門,把安裝與啟用的基本動作練熟;底下的討論會直接預設你已經會在 Plugins 選單裡搜尋與執行外掛。
為什麼後來幾乎不再「下載再拖進 Figma」
把找圖這件事留在瀏覽器分頁做,聽起來沒什麼問題,直到你真的做完一份多頁式的網站設計稿。痛點會在三個地方爆開來。
第一是中斷成本。Figma 的價值在於「框、文字、圖片全部在同一個畫布上一次調整」,一旦你切到瀏覽器,大腦的上下文就被強制切換,回來之後常常還要重新找回游標位置。這種切換累積起來比你想像中貴。第二是版本與授權管理。從圖庫網站下載的圖檔會散落在下載資料夾,過兩週回頭要確認商用授權時,檔名往往已經看不出處。第三是替換與置中的反覆動作。設計稿在 review 階段會不斷換圖,每次都重新下載、重新拖放、重新對齊,這些動作透過外掛都可以壓成兩三個點擊。
換句話說,圖庫外掛解的不是「找圖」這件事,而是「找圖之後那一連串摩擦」。當摩擦被消除,你才會開始願意在設計稿裡大量放圖、做更真實的高擬真稿(high-fidelity mockup),這對說服客戶或工程團隊的幫助遠大於任何一張單獨的素材。
挑外掛之前,先把這三個問題問清楚
直接給你十二個名字其實沒有太大意義,因為同一個外掛在不同專案裡的價值差很多。挑選時不妨先問三個問題,把答案想清楚,下面的清單你就能很快對號入座。
- 這份稿子的用途是什麼?是給開發者看的 spec、給客戶提案的視覺稿、還是要直接當成網站上線的素材?不同用途決定了你需要的是佔位圖、商用照片還是可向量編輯的插畫。
- 授權邊界在哪裡?客戶付了錢的商業專案,與你自己練習的 side project,能用的素材庫完全不同。免費不等於免責,這點後面會專門拉一段來談。
- 圖會不會需要二次修改?照片通常不會改,但插畫常常需要換主色、換姿勢、換元素。如果你預期要改,就得挑能直接在 Figma 裡解群組、改填色的向量素材,而不是點陣圖。
這三個問題沒有標準答案,但它們會自動幫你過濾掉一半不適合的外掛。比方說你的專案是商用 landing page,那 Lorem Picsum 這種隨機佔位圖就只能是過渡,定稿階段一定要換成 Unsplash 或 Pexels 的真實照片。
十二個外掛總覽(一張表看完)
底下這張表把十二個外掛依照類型、計價與最適合的場景排在一起,方便隨時對照。你可以先掃過一遍找出符合需求的,再往下讀各自的細節與踩坑提醒。
| 外掛名稱 | 素材類型 | 計價模式 | 最適合的場景 |
|---|---|---|---|
| Unsplash | 點陣照片 | 免費 | 質感生活、商務、風景照的首選來源 |
| Pexels | 照片+短影音 | 免費 | 需要多種構圖角度、人物與情緒照 |
| Pixabay | 照片、向量、插畫 | 免費 | 一次想撈齊照片與向量素材 |
| Freepik | 向量、PSD、照片 | 免費+付費 | 需要大量設計感向量與編輯可用的 PSD |
| Lorem Picsum | 隨機佔位圖 | 免費 | 線框與原型階段先把畫面骨架填滿 |
| unDraw | 開放授權插畫 | 免費(官方自訂授權) | 極簡扁平風、可調整主色 |
| humaaans | 人物組合插畫 | 免費(CC0) | 需要自由組合姿勢的人物場景 |
| Drawkit | 插畫套組 | 免費+付費 | 需要成套、風格一致的插畫集 |
| Storyset | 可編輯動態插畫 | 免費+付費 | 插畫要能調色、加動畫與背景 |
| ManyPixels Gallery | 扁平插畫 | 免費 | 補強 humaaans 之外的場景插畫 |
| remove.bg | 背景移除 | 免費額度+付費 | 把下載來的照片去背再貼回畫面 |
| Eagle | 素材庫整合 | 本機軟體購斷 | 把自有素材庫直接拖進 Figma |
這張表的設計邏輯很單純:先決定你要的是「真實照片」還是「可編輯插畫」,再決定付費意願,接著看附加功能。如果你完全不想花錢,可以先排除 Freepik、Drawkit、Storyset 的付費方案,再從其餘免費資源挑選。
Community 檔案 vs 外掛:你裝的到底是哪一種
這裡有個很多新手會混在一起的觀念,值得先講清楚。Figma 生態裡,能幫你拿到素材的管道其實有兩種,而且運作邏輯完全不同。搞混它們,是設計師在挑素材時卡關最常見的原因。
第一種是外掛(Plugin),也就是這篇文章的主角。它是一段會連到外部伺服器抓素材的程式,你每次執行都是在「即時查詢」對方的圖庫,所以素材會持續更新、搜尋能力也完整。Unsplash、Pexels、Freepik 屬於這一類。優點是素材量大、永遠拿到最新版本;代價是每一次插入都需要網路連線,搜尋體驗也取決於對方伺服器的回應速度。
第二種是Figma Community 檔案。它是一份已經做好的 Figma 檔案,你按 Duplicate 把整份複製進自己的帳號,再從裡面挑素材用。humaaans、unDraw 雖然也有外掛版本,但它們最完整的素材其實是以 Community 檔案的形式散布。這種方式的優點是素材就在你的檔案裡、離線也能用、改色改結構的自由度最高;缺點是不會自動更新,且檔案一旦複製進來就要自己管理版本與命名。
實務上兩種都會用到。需要「持續搜尋最新照片」就開外掛,需要「一份完整可拆解的插畫系統」就去 Community 複製檔案。把這個區別放在心裡,你才不會在該用外掛的時候苦惱為什麼 Community 檔案不能搜尋,也不會在該用 Community 檔案的時候怪外掛給的素材不夠完整。一個簡單的判準:只要你想「搜尋並挑一張」,就用外掛;只要你想「整套搬進來慢慢拆」,就去找 Community 檔案。
照片主力對決:Unsplash 與 Pexels
把這兩個擺在一起講,是因為它們在中文圈的圖庫推薦文裡幾乎是連體嬰。但實際用進 Figma 之後,你會發現兩者的調性與操作手感差很多,並不是「選一個就好」這麼簡單。
Unsplash:質感與一致性最好的照片池
Unsplash 的 Figma 外掛基本上就是把官方網站的搜尋搬進畫布。輸入關鍵字、Enter、就能直接在畫面框裡預覽並插入。它的強項是照片的整體質感極高,構圖乾淨、色彩飽和度與對比都帶一種近乎統一的「雜誌感」,很適合放 hero section、大面積背景或卡片配圖。
商用上 Unsplash 的照片依 Unsplash License 免費可用、不需署名、可商用,是目前主流免費照片庫裡授權最寬鬆的之一。但它的弱點也明確:人物表情與肢體的多樣性不如 Pexels,搜尋台灣在地場景(例如夜市、便利商店、機車騎士)的命中率偏低。如果你的稿子需要大量「亞洲臉孔的真人使用產品」這類照片,Unsplash 常常會讓你失望。
這裡還有個小訣竅:圖庫工具可能插入高解析度原圖,而在 Figma 裡把圖層縮小,不等於原始圖片資料也跟著變小。定稿後應依實際顯示尺寸重新匯出或置換,必要時再壓縮,免得一份設計稿灌爆協作者的頻寬。想控制上線圖檔大小,可以參考這篇圖片壓縮工具的比較。
Pexels:人物、情緒與構圖多樣性更強
Pexels 在 Figma 裡的操作流程跟 Unsplash 幾乎一樣,但它的照片調性更偏「生活紀實」。同樣搜「會議」,Unsplash 給你的是設計感強的桌面色調,Pexels 給你的會是更多角度、更多人數、更多情緒的真實會議現場。對於做 SaaS 工具、B2B 產品 landing page 的人來說,Pexels 在「看起來像真的有人在用」這件事上常常勝出。
Pexels 同時提供大量短影音素材,這在要做產品展示影片或社群動態時很實用。授權上 Pexels License 同樣允許免費商用、免署名。如果你想要的是一份更全面、可同時服務網頁與社群的素材池,可以再回頭讀這篇免費圖庫網站總整理,把視野拉到 Figma 之外。
實務上一份稿子幾乎不會只用其中一個。流程通常是:先用 Unsplash 定 hero 與大圖的調性,再切到 Pexels 補人物與情境細節。兩個外掛都在 Figma 裡,切換的成本只是幾次點擊而已。
向量與海量素材:Pixabay 與 Freepik
照片之外,設計稿最常缺的是向量素材。圖示、插畫、裝飾元素、可編輯的版型檔案,這些如果只用照片會做不出層次。Pixabay 與 Freepik 各自補上不同的位置。
Pixabay:免費就能同時撈照片、向量與插畫
Pixabay 的特色是「一個庫、多種類型」。同一個關鍵字可以同時回傳照片、向量圖與插畫;素材適用 Pixabay Content License,允許多種免費商業用途,但仍有不得單獨轉售、誤導性使用,以及人物、商標等第三方權利限制。下載前仍要看單張素材與用途。
它的代價是品質分布比較寬。Pixabay 的開放上傳機制讓素材量很大,但篩選標準沒有 Unsplash 那麼嚴,你得花多一點時間自己過濾。實務上常把 Pixabay 當成「先用最低成本把畫面填滿」的來源,定稿前再決定要不要替換成質感更好的素材。
Freepik:向量與 PSD 的海量化主力
Freepik 是做需要大量裝飾元素、icon、向量插畫的稿子時,最常駐留的外掛之一。它的向量與 PSD 數量級是這份清單裡最多的,很多設計感強的插畫、版型、節慶素材都能在這裡找到接近的版本,直接解群組就能改色改字。
要特別注意的是 Freepik 是 freemium 模式。依 Freepik 官方方案與授權頁面,免費版每天有下載數量限制,且部分素材需要署名;付費版則是免署名、下載數放寬。在商業專案裡幾乎都直接用付費方案,省下回去補署名的工,這比省下訂閱費更划算。如果你只在 side project 用,免費額度通常夠用。
一個提醒:Freepik 的向量素材插進 Figma 後,常常會帶一大堆隱藏圖層與剪裁遮罩。建議插入後立刻 Flatten 或逐一清理,否則檔案會越來越肥,到後期協作時吃效能。
線框階段先把位置佔住:Lorem Picsum
很多設計師低估了「佔位圖」的價值。在線框與原型階段,你其實還不需要決定要用哪張照片,你只需要讓畫面有一張尺寸正確的圖,才能判斷版面平衡與視覺動線。這時候跑去 Unsplash 挑圖完全是浪費時間。
Lorem Picsum 就是為這個情境設計的。它給你一個可以指定尺寸的隨機照片,插入速度快到幾乎零等待。做線框稿與UI 原型設計時,幾乎每一張圖框都先用 Lorem Picsum 塞一張佔位圖,等版型定下來、客戶也簽了視覺方向,才回頭換成真實素材。
這個動作看起來多餘,但它強迫你「先處理結構、再處理內容」,是避免在線框階段就被照片美感牽著走的有效紀律。等到定稿階段,再把所有佔位圖一次替換成 Unsplash 或 Pexels 的成品即可,這時前面那些顏色、構圖的決定都不會白費。
插畫與角色素材:unDraw、humaaans、Drawkit、Storyset、ManyPixels
插畫是這份清單裡最容易被低估、卻最能讓稿子差異化的一塊。照片大家都能用同一個 Unsplash 搜尋,但插畫的風格、配色一旦選定,就會成為產品視覺語言的一部分。把五個插畫類外掛放在一起談,因為它們各有明確定位,通常會搭配使用,鮮少只擇一。
unDraw:極簡扁平、單鍵換色
依 unDraw 官方授權說明,這套素材採官方自訂授權,允許免費用於個人與商業專案,通常不要求署名,但禁止把素材重新包裝成競爭性圖庫、素材包或拿去訓練 AI 模型等用途。它能在下載前調整主色,適合需要統一品牌色的扁平插畫。
unDraw 的限制是風格偏單一、人物動作有限。如果你的場景需要更具體的情境(例如客服、物流、結帳),單靠 unDraw 會顯得空。
humaaans:人物組合的自由度最高
humaaans 是設計師 Pablo Stanley 做的人物插畫庫,採 CC0 釋出。它的核心價值是人物可以拆解重組:你可以換髮型、換服裝、換姿勢、換膚色,把不同人物組合成一個場景。對於需要「產品使用情境」但又不想用真實照片的稿子來說,humaaans 提供了照片之外的另一條路。
操作上 humaaans 在 Figma 裡的體驗是「組合大於挑選」。先把想要的人物姿勢拉出來,再一個個部件微調,過程有點像在玩紙娃娃。如果搭配品牌色統一處理,出來的視覺會非常有識別度。
Drawkit:成套插畫的風格一致性
Drawkit 走的是「整套一起賣」的路線,免費與付費方案都有。它的強項是同一個系列裡的插畫風格高度一致,這對要做 onboarding 流程圖、空狀態(empty state)、錯誤頁插畫的產品設計師來說非常實用。挑一個系列、套進畫面,整個產品的插畫語言就起來了。
免費版的選擇有限,付費版才能解鎖完整系列。實務上會先用免費版試水溫,確認這套風格跟品牌契合之後再決定是否付費。
Storyset:可調色、可加動畫的編輯型插畫
Storyset 的差異化在於它不只給你一張插畫,還讓你線上調整配色、背景、甚至加上動畫效果,再匯出放進 Figma。對於做網站首頁 hero、需要在投影片或網頁上動起來的插畫來說,這是一條省力的捷徑。
Storyset 的方案、匯出格式與署名要求可能調整,正式使用前要以當下的 Storyset 官方方案頁面為準。如果稿子要做成動態網頁,也要確認匯出格式能否配合前端實作。
ManyPixels Gallery:補 humaaans 之外的場景
ManyPixels Gallery 是 ManyPixels 團隊釋出的免費插畫庫,風格也是扁平、可換色,但場景覆蓋比 humaaans 更廣,商務、教育、醫療、科技等主題都有現成插畫,依 ManyPixels 官方授權頁面,授權採寬鬆的免費商用條款。
可把它定位成「humaaans 補位」:當 humaaans 湊不出某個行業場景時,就來 ManyPixels 找。兩個搭配使用,能涵蓋更多常見的插畫情境。
順帶一提,如果你的需求其實偏向圖示(icon)而非插畫,那是另一個領域,建議直接看Figma 圖示外掛與免費圖示網站這兩篇,會比硬把插畫外掛當圖示庫用更精準。
把這五個插畫外掛攤開比較,定位會更清楚。挑選時可看「風格一致性」與「能不能換主色」這兩個關鍵欄位,它們幾乎決定了一組插畫能不能融入既有品牌。
| 外掛 | 風格定位 | 可換主色 | 計價 | 最適合 |
|---|---|---|---|---|
| unDraw | 極簡扁平 | 可調整 | 免費(官方自訂授權) | 統一品牌色的大型插畫 |
| humaaans | 人物組合 | 可,逐部件 | 免費(CC0) | 自由組合姿勢的使用情境 |
| Drawkit | 成套系列 | 部分可 | 免費+付費 | onboarding、空狀態、錯誤頁 |
| Storyset | 可動態編輯 | 可,線上調 | 免費+付費 | 要加動畫的網頁 hero |
| ManyPixels | 場景扁平 | 可 | 免費 | 補 humaaans 缺的行業場景 |
為什麼這份清單刻意不放 AI 生圖外掛
你可能會注意到,這份十二個外掛的清單裡,完全沒有 AI 生圖工具(例如整合進 Figma 的生成式影像外掛)。這不是漏掉,而是刻意排除的選擇,背後有兩個理由。
第一是授權與風險要逐一確認。AI 生圖工具對商用權利、輸入素材與生成結果的條款不盡相同,也可能調整。商業專案不能只看「可生成」就假設「可安心使用」,仍要查閱當下條款、第三方權利與專案風險。
第二是品牌一致性會失守。AI 生圖的輸出帶有強烈的隨機性,同一個 prompt 兩次跑出來的風格都可能不同,這對需要一套穩定視覺語言的產品來說反而是負擔。傳統圖庫與插畫庫的「固定素材、可重複取用」特性,在這點上仍然領先。一旦產品迭代到第三、第四個版本,你會慶幸當初選的是可以一直回頭取用的同一張素材,而非每次都要重新生成、還不一定對得上的 AI 圖。
面對 AI 不妨把它當效率工具,把判斷與經驗留給人,這個原則在設計流程裡同樣適用。AI 生圖很適合拿來做發想、做情緒板(mood board)、做不會對外發布的內部草稿;但只要進到要交付、要上線的層級,授權明確的素材才是穩當的選擇。想深入瞭解生成式 AI 的整體應用與邊界,可以讀生成式 AI 指南與AI 工具總整理;想看 AI 怎麼協助 UI/UX 的前期發想,則參考ChatGPT UI UX 設計 prompt。
上線前的去背處理:remove.bg
不論你從 Unsplash、Pexels 還是 Pixabay 拿到照片,常常都需要去背才能融進設計稿。remove.bg 的 Figma 外掛把這件事壓成「點一下、等幾秒」的動作:選取圖片、執行外掛、AI 自動把主體分離出來,背景變透明。
依 remove.bg 官方方案頁面,它的免費額度有限,超過就要付費。對偶爾去背的人來說免費額度夠用;如果你的稿子大量需要去背(例如電商商品圖、人物組合),付費會比較順手。想看更完整的去背工具橫向比較,可以參考這篇AI 去背工具整理,把 remove.bg 放在整個去背工具生態裡一起評估。
一個實務提醒:AI 去背在頭髮、半透明材質、細網格這類邊緣常常會有殘留。建議去背後再手動用 Figma 的向量工具清一圈,特別是會被放大的 hero 主圖,邊緣瑕疵在螢幕上看不出來,放到大圖輸出就會現形。
把素材庫搬進 Figma:Eagle
前面十一個外掛解決的都是「找新素材」的問題,Eagle 解的是另一個問題:你已經有一堆素材了,要怎麼快速取用。Eagle 本身是一套本機素材管理軟體(買斷制),它可以把你在網路上收集的照片、插畫、字體、影片分類整理,而它的 Figma 外掛讓你直接從 Figma 裡瀏覽並拖入這個本機素材庫。
這對團隊特別有價值。當設計規範已經定了一套品牌素材庫(logo、產品照、插畫、圖示),與其每次都重新從雲端硬碟翻找,不如統一進 Eagle 再透過外掛取用,一致性與效率都會提升。想深入了解這套工具的完整用法,可以讀這篇Eagle 素材管理專文。
Eagle 的定位跟前面十一個外掛不衝突,反而互補:你用 Unsplash 與 Pexels 找新照片、用 unDraw 與 humaaans 做插畫,全部整理進 Eagle 之後,下次再用就是一秒鐘的事。這是讓設計資產真正「累積」的關鍵一步。
三分鐘安裝與啟用流程
如果你還沒裝過任何 Figma 圖庫外掛,底下是建議的上手順序。整個流程大約三分鐘,不需要任何前置設定。
- 在 Figma 檔案中開啟 Actions,進入 Plugins & widgets。
- 搜尋外掛名稱,確認發布者與權限後按 Run;常用項目可以儲存到帳號。
- 回到畫布,先選取要放圖的 Frame 或矩形,再從 Actions 的近期或已儲存項目執行。
- 在外掛面板裡輸入關鍵字、挑圖、點 Insert,圖就會落在選取的範圍內或畫布上。
- 若要重複使用,下次可從 Actions 搜尋名稱,或從近期與已儲存項目開啟。
前六個工具(Unsplash、Pexels、Pixabay、Freepik、Lorem Picsum、unDraw)已涵蓋照片、佔位圖與插畫等常見需求。剩下的工具適合針對特定情境補強,可以依專案需要再加。
授權眉角:免費不等於免責
這是最值得多著墨的一段,因為台灣設計圈對「免費素材能不能商用」始終存在很多誤解。下面幾個原則是實務上反覆驗證下來的底線,但請把它當成入門提醒,遇到高風險的商業專案還是要回到各圖庫的授權頁面逐條確認。
- 平台條款與單張素材都要看。有些平台採統一內容授權,有些素材另有標示或第三方權利。下載前要同時確認平台授權、單張頁面與使用情境。
- 免署名不代表免責任。Unsplash、Pexels、Pixabay 的免費素材大多不需署名,但若素材中包含可辨識的人物或商標,使用於暗示性代言或負面情境時仍可能侵犯肖像權與商標權(依各圖庫授權頁面的肖像與商標提醒)。
- Freepik 免費版要署名,付費版才免署名。商業專案若用免費版卻漏署名,技術上是違反授權。要麼乖乖署名,要麼直接訂閱付費版。
- 人物照片上線前再確認一次用途。尤其涉及醫療、金融、法律這類 YMYL(Your Money Your Life)領域時,把真人照片放進「見證」「推薦」語境的風險很高,能用插畫或授權明確的素材替代就替代。
同一張人物照片,放在編輯性情境與暗示代言的商業情境,風險不同。圖庫授權不一定替你清除肖像、商標、隱私或誤導性使用等第三方權利;是否有模特兒授權也要回到素材頁或平台說明確認。用於廣告、首頁主視覺或敏感情境時,應特別審查。
做法上相對保守:凡是會出現在首頁主視覺、廣告素材、產品推薦區塊的人物照片,一律優先考慮插畫(humaaans、unDraw 這類沒有真人肖像問題的素材),或是透過付費圖庫取得附帶 model release 的版本。免費照片則保留給編輯性配圖、背景紋理、抽象意象這類不會被解讀成代言的用途。這條界線一旦畫清楚,後續每個專案的素材選擇都會輕鬆很多。
授權的核心邏輯只有一句:免費是別人願意讓你用,不是別人放棄了權利。
把這句話記住,面對任何新圖庫你都不會犯下大錯。每一個看似「免費隨便用」的素材背後,都還有一個你應該花十秒鐘確認的授權頁面,那十秒鐘往往就是事後合規爭議與否的分水嶺。
選圖工作流(線框到定稿)
給你一個能直接套用的流程,是針對 SaaS 工具 landing page 場景打磨出來的版本。它不是最快,但能讓「找圖」這件事不會在中段拖垮整個設計節奏。
- 線框階段全部用佔位圖。每一個圖框先用 Lorem Picsum 塞一張正確尺寸的隨機圖,專心處理版面結構與訊息層級,這階段完全不挑圖。
- 視覺方向定了之後,先插 hero 與主視覺。從 Unsplash 挑一張質感夠的大圖定調,把整個稿子的色彩與情緒基準拉出來。這一步通常會來回兩三次。
- 人物與情境用 Pexels 補。需要「真人使用產品」的區塊切到 Pexels,找角度與表情更貼近使用情境的照片。
- 插畫與裝飾元素用 unDraw 與 humaaans。同時把品牌主色套進 unDraw 統一調性,humaaans 補人物組合,兩者交替填補照片做不到的場景。
- 向量與版型裝飾用 Freepik。需要 icon 集或設計感向量時才動用,避免一開始就被花俏素材分散注意力。
- 上線前做兩件事:remove.bg 去背、再壓圖。定稿的照片若要融進特殊版型就先去背,再依上線需求選擇格式與壓縮,相關流程可參考圖片格式選擇與圖片 SEO 優化。
工作流走完不代表素材就定稿了。專案定稿前仍可能需要換掉某一張照片,這時外掛的價值會再一次浮現:你可以回到原本插入圖的 frame,重新執行對應的外掛、搜尋與插入,不必重走下載、解壓縮、拖入的流程。建議在稿子裡保留每張圖的「來源外掛+搜尋關鍵字」備忘(可以寫在 frame 的 comment 或 layer name 裡),日後要回頭找相似素材時就有跡可循,而不會陷入「這張圖當初到底是從哪裡來的」的考古現場。這個小習慣看起來瑣碎,卻是讓素材管理從「隨找隨忘」升級成「可累積資產」的關鍵。
這個流程的核心精神是「先結構、再內容、修飾收尾」。很多設計師在線框階段就為了一張 hero 照片耗掉整個下午,結果版面平衡反而沒處理好。把找圖的誘惑延後到對的階段,整份稿子的完成度會明顯提升。
常見問題排查
底下把幾個最常被問、或最容易踩到的坑整理出來,省得你重複走一遍。
外掛裝了卻在選單裡找不到
外掛的儲存狀態跟著 Figma 帳號,不是綁在單一 workspace。找不到時,先確認是否切到正確帳號,再從 Actions 搜尋;組織管理員也可能限制可執行的外掛。
插入的圖檔案過大、畫面卡頓
這通常是因為工具插入了高解析度原圖。單純縮小 Figma 圖層或改成 Fill,不一定會減少原始圖片資料;應依實際用途重新匯出或置換較小尺寸,並用壓縮工具處理。
搜尋中文關鍵字命中率低
Unsplash、Pexels、Pixabay 的中文索引沒有英文完整。建議先用英文關鍵字搜(例如用 meeting 而非會議),找到方向後再用中文微調。Freepik 的中文支援相對好一點,但數量級仍是英文佔優。
Freepik 免費版出現要署名的提示
這是授權提醒,不是錯誤訊息。若你的專案是商業用途,要麼在頁面放上署名資訊,要麼升級付費版免署名。千萬不要直接忽略提示又用在商業稿上,這是很容易踩到的合規地雷。
去背結果邊緣有殘留或破損
AI 去背在毛髮、半透明、細網格的表現本來就不穩定。手動用 Figma 的向量工具或遮罩修一輪,會比反覆重跑外掛更省時間。需要更高品質的批次去背,就回到前面提過的去背工具橫向比較找替代方案。
裝太多外掛會不會拖慢 Figma
已儲存但未執行的外掛不會在背景持續運作,因此數量本身通常不是畫布變慢的原因。外掛執行時仍可能耗用記憶體、網路與處理時間;執行後產生的大圖、大量圖層或複雜向量,也會增加檔案負擔。排查時要看正在執行的工具與它留下的內容。
延伸閱讀與下一步行動
圖庫外掛只是 Figma 設計流程的一環。要把整個產出打磨到位,幾個方向值得繼續深入:想補強 Figma 整體功力,可以讀Figma 完整教學與Figma 版面格線;要把響應式做扎實,看Figma 響應式設計;想從設計跨到網站上線,網頁設計完整指南與UI UX 設計指南能幫你把視野補齊。
如果你也習慣把工具鏈串起來思考,下一步還可以往兩個方向延伸:一是配色與品牌端,例如配色工具、色彩理論、品牌色選擇;二是影像在網站上的工程處理,例如圖片延遲載入與WordPress 圖片優化。把設計端的選圖與工程端的優化接起來,整條素材流程才會真的順。
建議很具體:現在就挑一份你手邊正在做的設計稿,把 Unsplash、Pexels、Lorem Picsum、unDraw 這四個外掛裝起來,照著上面的工作流走一遍。先別貪多,四個外掛就足以讓你感受「找圖摩擦被消除」的差異。等你真的撞上某個場景做不出來,再回來這份清單挑下一個。對的工具會自己證明價值,不需要一次到位。