在 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/