成也設計，敗也設計。好的設計可以吸引目光，帶來人潮，提供更良好的使用者體驗。像 LINE 有 App 版本、桌機版本、網頁後台，用戶橫跨好幾個國家，不免讓人好奇如何實現一致的設計。在 LINE Developer Day 2019 第二天（ 11/21 ）下午有一場官方講座，主題是〈 Front-end in Design Systems 〉（ 設計系統中的前端技術），講者是日本 LINE 前端標準化團隊的工程師 Akihiko Okazaki ，分享了許多有趣的秘辛，例如光一個關閉的叉叉圖示，就可以有 10 款設計，意想不到吧。
整個 UIT 組織隸屬於前端開發中心，所謂 UIT 就是「 UI 科技」，全球有超過 160 位前端工程師。在這個場次的議程裡面， Akihiko Okazaki 帶領聽眾們一窺前端部門的奧秘，大方揭露了許多技術細節，包括他們的工程師對於兩個最重要的前端技術 CSS 和 JavaScript 語言的熟悉程度，專家等級都很稀缺，分別是 7% 和 10% ，大部分工程師都是中等和進階等級，分別是 47%+25% 和 33%+33% 。至於使用最多的 CSS 框架是 Bootstrap 和自訂框架，而使用最多的 JavaScript 框架則是 Vue 和 React 。
UIT 團隊的成果之一，就是隨著 LINE 步入官方帳號 2.0 時代，他們重新打造了官方帳號的管理後台。原本的「 LINE@ 生活圈」、「 LINE 官方帳號」、「 LINE Business Connect 」、「 LINE Customer Connect 」總共 4 個產品，最後通通變成了「官方帳號」。真的是非常浩大的工程！
設計即視覺，然而「視覺」往往也是最主觀、最難所有人都滿意、最難妥協卻也最容易吵架的部分，例如最常見的兩顆按鈕「取消」（灰色）和「確定」（綠色），到底誰要放左邊、誰要放右邊呢？所以 UIT 團隊秉持三大原則，在投影片中間和最後一頁的結語時都有寫到：
- 設計原則（ Design Principles ）
- 樣式指南（ Style Guide ）
- 模式庫（ Pattern Library）
第一點「設計原則」是希望能夠按照這樣設計（ Wish ），第二點「樣式指南」說明了為什麼以及如何設計（ How/Why ），第三點「模式庫」同樣說明了如何去做設計（ How ）。
顏色、字體、圖示都有各式各樣細如牛毛的考量點，例如光一個關閉的叉叉圖示，就可以有 10 款設計，不同的線條粗細、不同的留白，意想不到吧。於是 LINE 發展了自己的素材庫（ LINE Atomic Icons, LAICON），避免不一致所導致的設計落差，因此採用統一的命名規格，未來將以 SVG 格式釋出，很方便運用於 CSS 、 Vue 、 React 的程式碼當中，可以包成 npm 、放在網站上，或是放在 CDN 引用。
為了實現可重複使用的元件， UIT 團隊發展了 koromo-element 框架，程式碼也變得更精簡，未來即將發佈的 LUI （ LIFF UI ）也將以 koromo-element 為基礎。
UIT 團隊必須跟幾乎所有人士打交道，跟設計師、跟 PM 、跟 Android App 工程師、跟 iOS App 工程師、跟後端工程師（驚！）、跟測試工程師，所以這些團隊當中也都配置了前端工程師。也因此，幾乎在所有專案中都可以看到前端工程師們的貢獻，舉凡帳號一覽清單、優惠卷、集點卡、問卷調查、貼文串等。
這個場次是 LINE 官方講者，所以有提供簡報，請從這裡下載，後來官方也釋出了可供觀看的錄影（超貼心，雖然講者講日文，但是有配上英文口譯的聲音，跟我們在現場帶耳機一樣）。
