Icon Library Part3：導入設計師的工作流程
學會如何以 Sketch 設計稿轉換為 TTF和可支援網頁的字型檔案，如何落實在工作流程上才真正讓這個工具更有意義！
章節列表
- Icon Library Part1 ：Sketch 製作 TTF 檔案
- Icon Library Part2：Icon 的製作規範
- ***Icon Library Part3：導入設計師的工作流程
*** 為 目前章節 記號應用於 Web Service
由於之前負責的項目比較偏 Web，App 部分雖然有確認大致上的作法但無法很詳盡的描述，還請工程師們現身說法。
基本原理
如果你的公司是開發 Web Service，那麼對於 Font Awesome 的 icon 服務並不陌生，Sketch to TTF 最後產出的 icon font 使用方式與 Font Awesome 的使用方式一樣，將 icon font 檔案與 icon font 的 css 檔案放在可以被抓取的線上空間上，透過呼叫 icon 的 class 名稱在網頁上渲染。
以上圖為例，如果我們要在網頁上顯示愛心，會以 class 的方式呼叫，如下：
icon font 文字檔案名稱 + icon 的 class 名稱
舉例來說，icon font 字型檔案名稱為 dsm-icon，而愛心的 class 名稱為 icon_common_fav ，那麼完整的 html 寫法會是：
<p class="dsm-icon dsm-icon-icon_common_fav"> 這是一個愛心</p>這時候就會出現愛心了，通常會把 icon 和文字分開成兩個 html tag，也不大會用 p tag 呼叫 icon ，但這邊為了 styling 方面偷懶。
Codepen 連結
導入工作
熟悉原理之後，設計師只要產生檔案的目的地（路徑）設定為存放 icon 字型檔、icon css 檔案的空間，就可以將網頁上的 icon 一併更新為最新的樣式。
套用在實作上，可以這樣分工：
工程師
須將icon css 讀取字型檔案的路徑設定好，在 html 中取用 css 檔案。
設計師
使用 Sketch to TFF 工具不斷覆寫icon css 檔案與字型檔案 。
導入的代價
如果在開發初期導入 icon font，代價相對較低；但如果在開發後期導入，則要將過去網頁上有 icon 的位置換成 icon font 呼叫的方式，同時要注意 class 名稱是否會互相影響（例如不小心使用相同的 class 名稱），這會是一個不困難但繁瑣耗時大工程。
總結
過去使用切圖的方式做網頁 icon，現在有類似 icomoon 的服務可以將 svg 壓成 icon font，但協作流程上就會多一層工序，上傳、重新生成，工程師取用。而以往的經驗都是工程師向設計師拿到 svg 檔案，上傳 svg 生成新的 icon font，設計師少了主動性，工程師也多了一件瑣碎事。
Sketch to TTF 工具最大的進入障礙在於架設環境與使用，一旦跨過那道檻就可以為開發協作上增加便利性並減少溝通成本，以後設計師可以發動 icon 的調整與修改，工程師只需要確保路徑正確，新 icon 的 class 名稱就可以取用新的 icon。
最後感謝各位的閱讀，不會特別要求要拍拍手，但更希望可以得到更多回饋。
如果有哪邊看不懂或是不清楚都可以留言，有哪邊說錯或是可以更好，也請儘管嗇留言討論。感謝大家！
