1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. UI/UX
  6. »
  7. 如何在Figma中,使用Font Awesome向量文字圖示

如何在Figma中,使用Font Awesome向量文字圖示

2022/10/31

梅問題-Figma中如何使用Font Awesome向量文字圖示
  Figma是目前UI設計的新寵兒,同時近期也被Adobe公司所拼購,這也看的出來Figma有多夯,再加上Figma透過瀏覽器,就可直接進行編輯,甚至還有免費版本,以及操控上也相當的簡易好上手。

而Figma讓梅干感到最方便的地方就是,可將繪製好的版型,直接分享給對方看,甚至還支援團隊一起編輯,由於Figma採用線上編輯模式,因此當頁面中的字型就能與實際更貼近,且內建也支援Google思源黑、思源宋體,除此外也內建還支援Font Awesome的向量文字圖示,因此有在使用Figma的朋友,也一塊來看看,要如何在Figma中使用Font Awesome的圖示吧!


Step1
首先,先到Font Awesome搜尋所需的圖示,接著再從右方的下拉選單,確定目前所使用的Font Awesome版本。
梅問題-Figma中如何使用Font Awesome向量文字圖示
Step2
接著開啟圖示,對著圖示點一下。
梅問題-Figma中如何使用Font Awesome向量文字圖示
Step3
回到Figma後,透過文字工具,將剛剛的Font Awesome圖示貼上,當貼上時會發現到只藍色的區塊。
梅問題-Figma中如何使用Font Awesome向量文字圖示
Step4
這時將文字選擇Font Awesome 6 Free
梅問題-Figma中如何使用Font Awesome向量文字圖示
Step5
接著再把文字模式設為Solid,設定完畢後,就會看到剛剛的藍色色塊出現Font Awesome的圖示啦!
梅問題-Figma中如何使用Font Awesome向量文字圖示
Step6
當要使用社群媒體的圖示時,要將字型設為Brands就能正常顯示啦!因此想要在Figma中使用Font Awesome圖示,內建就已支援不用再裝外掛,因此有需要的朋友,下回也可試試囉!
梅問題-Figma中如何使用Font Awesome向量文字圖示