在 Sketch 中運用 iconFont

對於想要創造自己的 iconFont 的朋友們,可以參照我之前寫的

《在 UI 設計中善用 Icon Font》文章。

而今天想要寫的,是關於我如何使用 IconFont 來加速我的 UI 設計流程,首先要介紹的是這個 Sketch 外掛 「sketch-iconfont」,它可以匯入你自己的 iconFont 字體,並且有圖形檢索功能、讓你能迅速置入想要的 icon 到artboad之中。

安裝完外掛以後,到 Plug-in 選單中,可以找到 Icon Font ,但是你現在會發現打開來是一片空白,因為我們得先安裝「字體」,選擇 Install 後 指定到你想要匯入的字體,這邊以我自己創作的 IconFont 為例,匯入後進到「Grid Insert」便可以找到我們所安裝的 IconFont:

點開來以後就可以看見自己的 字體內容啦!選擇後便可以快速產生在Artboad中,而當然是以文字的方式呈現啦~要調整大小跟顏色的話,就是直接在右邊的字體大小及顏色做更改。

而如果還想要針對 icon 做編輯的話,也可以用 Sketch 的文字轉外框功能來做編修,當然跟 Illustrator ㄧ樣這步是不可逆的動作!

總結:

當然除了自己創造的 iconfont 外、網路上也有很多免費或付費的 iconFont 可以使用,當在做圖時需要大量 icon 的需求時, Sketch-IconFont 外掛絕對是你的好夥伴!

最後這邊推薦大家幾個 iconFont:

Font Awesome :http://fontawesome.io/

Material Icons :https://material.io/icons/

Simple Line Icons :http://simplelineicons.com/

Ionicons :http://ionicons.com/

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com

)

設計師 Rex The Designer

Written by

設計師|獨立樂團|老派電影|科技|Youtube Channel:https://pse.is/KKLDU

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade