免費諮詢
↑
Design · 網站設計與費用

UI/UX 大神幫你整理的Figma元件!讓你的設計事半功倍!

網站設計與費用發布 2023.05.16更新 2026.07.07閱讀約 3 分鐘

常常遇到客戶希望提供更多設計參考,但你卻偏偏沒靈感嗎?
或是看到不錯的架構,卻不知道設計細節怎麼做的嗎?
那你一定要把這些Figma資源好好收進口袋!

Figma跟許多設計軟體不同的地方,就是他有一個設計師們可以互相分享資源的平台——Figma Community,對於新手以及靈感枯竭的菜鳥設計師是一大福音,這裡幫大家整理出最好用的元件資料庫:

Ant Design Open Source (Community)

相信大家對於「Ant Design」這個元件資料庫網站並不陌生,此公司在Figma Community也有直接放上可編輯的元件資料庫,讓使用者們可以直接複製編輯,非常實用。

資源連結:

https://www.figma.com/

UI:UX 大神幫你整理的Figma元件!讓你的設計事半功倍!|鵠崙設計02  

Chi’s UI Patterns (Community)

Chi’s UI Patterns 是中文化的模組。設計介面時,有些區塊的呈現在英文和中文的感覺差非常多,因為英文本身的文字比起中文乾淨利落,所以會有落差,在字級設定也有所區別。因此,不妨可以參考這個中文化的元件模組,找出適合中文版的介面元件。

資源連結:

https://www.figma.com/

UI:UX 大神幫你整理的Figma元件!讓你的設計事半功倍!|鵠崙設計03
UI:UX 大神幫你整理的Figma元件!讓你的設計事半功倍!|鵠崙設計03

Lookscout – Design System + UI Kit (FREE Version) (Community)

Lookscout – Design System + UI Kit (FREE Version)也是一個元件種類豐富的資源庫。但裡面不只有元件類型的資源,還有配合響應式設計的landing page 參考,是比較有系統性的元件資料庫。

資源連結:

https://www.figma.com

UI:UX 大神幫你整理的Figma元件!讓你的設計事半功倍!|鵠崙設計04
UI:UX 大神幫你整理的Figma元件!讓你的設計事半功倍!|鵠崙設計04

Figma Community 不只有這些元件資源庫,還有更多像是圖表、配色、材質搭配等等資源,都是一些國外資深的設計師佛系分享給大家的,只要搜尋一些關鍵字,很容易就能找到許多靈感,比Pinterest好用許多,很適合新手去好好挖掘。

結語

對於很多經驗不足的設計師來說,最害怕的就是遇到「想要多看一點設計」,卻不知道還能怎麼做的瓶頸。Pinterest的演算法,很容易會給設計師相同風格的視覺,導致愈來愈難去找到新的花樣來玩。幸好還有Figma Community這樣的平台,不只可以參考資深設計師是怎麼建立frame,也可以找到不同風格的元件,真的非常推薦!:)

 

鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。這篇文章由負責維護的同事撰寫,數字來自實際的報價與維護紀錄。
FAQ

這篇文章,
常問的

針對這篇內容的問答;更一般的問題看網站設計與費用 hub。

01Ant Design 這種元件庫裡的元件可以直接複製到自己的設計檔案用嗎?

可以。Ant Design 在 Figma Community 上有直接放上可編輯的元件資料庫,使用者可以直接複製後依需求編輯,不用從零開始畫,對新手或想找設計參考的人蠻實用的。

02為什麼不能直接把英文版的 UI 元件庫套用在中文網站上?

因為英文文字本身比中文乾淨俐落,中文和英文在字級設定、版面呈現上會有落差,直接套用容易顯得不協調。這也是推薦 Chi's UI Patterns 這類中文化元件模組的原因,方便找出適合中文介面的呈現方式。

03Figma Community 除了元件庫,還可以挖到哪些設計資源?

Figma Community 上不只有元件資料庫,還有圖表、配色、材質搭配等資源,多半是國外資深設計師分享的,只要搜尋關鍵字就能找到,作者認為比 Pinterest 更好用、更適合新手挖掘靈感。

04Lookscout 這類資源庫跟單純的元件資料庫差在哪?

Lookscout 除了元件種類豐富之外,還提供搭配響應式設計的 landing page 參考,屬於比較有系統性的整套設計資源,而不只是零散的單一元件而已。

Service

看完之後,想找人做?

網頁設計:先理解你的需求、確認架構,再開始設計;費用區間先講清楚。

網頁設計服務
Contact

留下需求,
1 個工作天內回覆

告訴我們你的產業、現在的網站、想解決什麼;回覆時會附上同產業的案例與估價區間。