CLOSE
網頁新知
2023.05.16

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

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

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

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

Ant Design Open Source (Community)

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

資源連結:

https://www.figma.com/file/aujYDUuexomXdKneSyb981/Ant-Design-Open-Source-(Community)?node-id=92%3A0&t=eNTuly1wWoYr3eXf-1

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

Chi’s UI Patterns (Community)

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

資源連結:

https://www.figma.com/file/q4srZjPJ3j6xWW6AjhUL30/Chi’s-UI-Patterns-(Community)?node-id=9%3A8&t=NxOvsXx6ecSWEkZ2-1

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/file/23hTuWMMXF66PL5TgXnvJn/Lookscout—Design-System-%2B-UI-Kit-(FREE-Version)-(Community)?node-id=1926%3A122310&t=clFCys374LhqoQbI-1

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

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

結語

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

 

CONTACT US

想了解更多資訊內容嗎?歡迎立即聯繫鵠崙設計!