Icon Library Part1 ：Sketch 製作 TTF 檔案
小圖示 (Icon) 不管在網頁與應用程式都佔有一定的重要性。
但在開發上使用 png、jpeg 等檔案會因為解析度問題而有模糊不清問題，svg 雖然可以解決解析度的問題，但在大量圖示的情況下，檔案管理上會稍嫌零亂且不容易更新維護。
因此出現了將圖示編輯成字型檔案，再利用獨一無二的編碼從字型表中叫出特定的圖示。
章節列表
- ***Icon Library Part1 ：Sketch 製作 TTF 檔案
- Icon Library Part2：Icon 的製作規範
- Icon Library Part3：導入設計師的工作流程
*** 為 目前章節 記號，如果你在找其他章節，可以透過上面的連結快速穿梭。Font Awesome
大家都知道這個服務，囊括了各種常用的小圖示，在字型表上應有盡有；
只需要 import Font awesome 的 css，在網頁上就可以叫出小圖示，這對快速開發迭代的產品來說是非常有幫助的。
用 Sketch 做個小圖示字型檔
當然設計師有可能想要自己做小圖示、品牌形象需要延伸到小圖示上，或是公司對於小圖示有設計上的規範，客製化在所難免。
接下來會使用 Gulp 將客製化的 Sketch 檔的設計轉成 TTF。
Gulp 是什麼？因為我不是工程師，所以我只能用我的理解粗淺地形容。
Gulp 可以想像它為一個很強大的魔法盒子，只要寫好腳本告訴那個盒子該怎麼做，它就會咻咻咻幫你把很多事情都處理完。
知道其中的原理後，我們開始囉！
行前須知 (Terminal 的相關指令)
- cd (change directory) 最常用來穿梭在資料夾之間。
- -v (version) 可以用來檢查套件、軟體版本。
- ls 用來列出現在目錄的所有檔案與資料夾。
第一步：安裝 Homebrew
Homebrew 是一個套件管理工具，安裝之後可以透過它安裝其它套件。
安裝 Homebrew 請複製下方整段指令，貼在 Terminal 上：
/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
第二步：安裝 npm
npm 是一個 JavaScript 套件管理工具，有了 Homebrew 之後就可以使用 Homebrew 安裝 npm。請複製下方整段指令，貼在 Terminal 上：
brew install npm第三步：安裝 Gulp.js (魔法盒子)
接下來就是安裝 Gulp.js，請複製下方整段指令，貼在 Terminal 上：
sudo npm install -g gulp第四步：下載 Gulp 腳本
剛剛提到 Gulp 腳本，這裏使用作者 Tsutomu Kawamura 寫好的 Gulp 腳本 。
可以在 Symbols for Sketch 這個 Github Repo 這邊下載。
下載後會得到一個資料夾，資料夾內會有：
Symbols-for-sketch-master
∟symbol-font-14px.sketch
∟symbol-font-16px.sketch
∟README.md
∟templates
∟variants
∟images
∟package.json
∟gulpfile.js
gulpfile.js 就是腳本告訴 gulp 該怎麼將 Sketch 中的 icon 都轉成 TTF。
這裏設計師唯一會動到的檔案只有 sketch 檔，腳本預設告訴 Gulp 去轉換 symbol-font-14px 那支檔案。
第五步：前往腳本資料夾
下載完後請打開 Terminal 並進入到這個資料夾的路徑，這裏可以使用 cd 指令前往資料夾路徑。
在 Terminal 打上 cd 後，拖曳腳本資料夾到 Terminal ，就會自動輸入腳本資料夾的路徑了，記得要按下 Enter 才會進入腳本資料夾。
這時在 Terminal 打上
npm install安裝 Gulp 執行所需要的資源，安裝完成就可以準備啟動 Gulp 了。
第六步：執行 Gulp ，啟動魔法盒子
打開 Sketch 檔後可以看到有很多 Artboard，這些 Artboard 就是 Gulp 會抓來轉換成 TTF 的 icon 設計區。我們可以複製 Artboard 新增自己的 icon，編輯後存檔，執行 Gulp。
輸入：
gulp symbols
這時資料夾會多出一個 dist 資料夾。
如果把 dist 裡面的 html 檔案丟到瀏覽器上看，就會看到完整的 icon 列表。
額外加強版：檢查 Sketch 異動，即時更新 TTF
除了第六步可以產生 TTF 檔案，在 Terminal 輸入：
gulp watch瀏覽器將會打開 icon 列表（html 檔案），Terminal 將會持續檢查 Sketch 的異動（只要儲存），即時產生 TTF 檔案並更新 html 的 icon 列表。
