本文介绍了通过开发自定义的 Sketch 插件来改善 KKBOX 的产品设计流程，旨在自动化设计师的繁琐工作，提高工作效率。作者分享了两个案例，分别针对多语言支持和手动打包过程中的痛点，提出了相应的解决方案。文中还阐述了 CocoaScript 的挑战和如何有效收集设计素材。

1. 透過開發客製 Sketch Plug-in
改善產品設計流程
楊維中 a.k.a zonble
wzyang@kkbox.com

2. 簡介
• KKBOX 的 iOS ⼯工程師
• 負責 KKBOX 的 iOS、
Mac、Apple TV 版本
• 前兩兩年年寫了了⼀一本免費教材
• 常在台北 CocoaHeads 出沒
• http://zonble.net

3. 「UI 設計是產品開發過程中的重
要⼀一環，但是在實務上，有太多與
設計⼯工作相關，但不應該由設計師
負責、反⽽而讓設計師分⼼心的⼯工作。
我們嘗試改進設計師使⽤用的⼯工具，
讓原本需要⼈人⼒力力的⼯工作⾃自動化，解
放設計師的⽣生產⼒力力。」

4. 案例例⼀一：
多國語⽂文

5. KKBOX 在台、港、星、
⾺馬、⽇日提供服務
⽀支援繁中、簡中、英⽂文、
⽇日⽂文、⾺馬來來⽂文語系

7. 在多國語系環境中，通常，
中⽂文是字串串長度最短的。

9. 字串串太長
送回重翻
還是太長
請 Designer 調整設計
新的設計還是要給老闆看過
老闆可能⼜又有意⾒見見…
繼續調整設計…

10. 設計初期就先套⽤用多國語⽂文？

12. 無明
誰應該解決多國語系造成的流程問題？
PM？RD？Designer？外區辦公室？

13. 業力
引爆

14. • 痛點：翻譯完字串串才發現過長，往往影
響開發流程
• 解法：初期就能夠預覽多國語⾔言字串串，
⽽而且可以⾃自動化

15. Sketch Plugins

16. Google Translation API

18. https://github.com/KKBOX/GoogleTranslateSketchPlugin

19. …還不夠好
• 很多字串串過去已經翻譯過，應該⽤用既有的字串串，⽽而不是⼀一
律律使⽤用 Google 的翻譯結果
• 要使⽤用 Google Cloud Translation API，需要⼀一組 API
Key，但是供公司多⼈人使⽤用，不應隨意散佈 API Key

20. Internal Translation API

21. iOS Jenkins
Android
Jenkins
Windows
Jenkins
Internal
Translation
API Server
Fetch localization files scheduledly
Sketch
Sketch
Sketch
Create localization files on each build
and host them

22. 案例例⼆二：
主題⾯面板

24. • 痛點：⼈人⼯工⼿手動打包過程不但費時，⽽而
且容易易出錯
• 解法：除了了上傳過程需要加上驗證機制
外，打包過程也應該⾃自動化

26. ⽤用到哪些東⻄西？
• Sketch 本⾝身的 Slice 輸出功能
• 透過 NSTask 呼叫 Mac 的 command line 指令，如 zip、
mv…

27. 我們學會了了什什麼？
• Sketch Plugin 開發/CocoaScript 語⾔言
• …其實不是很好搞
• 苦集滅道

28. CocoaScript
• 前⾝身為 JSTalk
• ⼀一套混和 JavaScript 與 Objective-C 語法，可嵌入在 Mac
App 當中的直譯式程式語⾔言
• 如果熟悉 JavaScript 與 Mac App 開發，可以輕易易上⼿手
• 如果你是 iOS ⼯工程師，可以順便便學⼀一下
• 基本上繼承了了 JavaScript 與 Objective-C 的所有缺點，⽽而且
還有⾃自⼰己的缺點

29. CocoaScript
• 缺乏 IDE/Editor ⽀支援，可以使⽤用 Objective-J Syntax Highlight
• 錯誤訊息意味不明
• 混⽤用 JavaScript 與 Objective-C 物件，有時不容易易分辨是屬於哪
⼀一種類型的物件（如：⼀一個字串串到底是 JS 還是 ObjC 字串串？）
• 因為呼叫 macOS 系統 JavaScript Core 直譯器，不同版本 OS
可以⽀支援的 JS 語法不同
• 磁碟中裝了了多套 Sketch 時，容易易讓 CocoaScript 直譯器掛掉

30. CocoaScript
• 可以呼叫所有 Cocoa Framework 以及 Sketch App 裡頭所
有的 Class
• 要⽤用 setCOSJSTargetFunction: 實作 Target/Action
• 無法實作 Delegate/Block，無法呼叫非同步的 API

31. Sketch Plug-in 開發
• 缺少 API ⽂文件，基本上只能參參考 github 上⼈人家 class-
dump 出來來的 header files
• 每⼀一代 Sketch 能呼叫的 API 都不太⼀一樣，所以在 Sketch
升級之後，之前寫的 Plug-in 可能無法使⽤用

34. 苦集滅道
• 苦諦：浪費時間很苦
• 集諦：有太多的⼩小事在浪費我們的時間
• 滅諦：我們應該消滅這些浪費時間的事情
• 道諦：⼯工程師之道－⾃自動化

35. 苦集滅道
• 設計師應該要發現，⾃自⼰己有很多⼯工作，其實是不該做的，
⽽而且應該要⼤大聲的說出來來
• 對⼯工程品質/設計保持耐⼼心，對可以⾃自動化的重複⼯工作缺乏
耐⼼心
• ⼯工程師不該只是忍受痛苦，⽽而是要解決痛苦。
• 時時回顧⾃自⼰己的痛苦，時時關懷他⼈人⾝身上的痛苦。

36. 如何發現痛點？
Retroperspective

37. One More Thing
蒐集設計素材

38. 蒐集設計素材
• 在設計之前，需要先蒐集相關素材，才能進⾏行行設計⼯工作
• KKBOX 的素材：歌曲、歌單、專輯、歌⼿手…
• 設計師往往透過官網搜尋，然後拖拉/貼上
• 經過挑選後的素材，⼜又與實際套⽤用真資料有所不同

39. • 痛點：蒐集 KKBOX 素材很花時間
• 解法：讓 Sketch 整合 KKBOX 的
Open API

40. OpenAPI
• KKBOX 最近與多家硬體廠商合作，在多種硬體上提供
KKBOX 服務，包括 Asus Zenbo、Sonos…
• 在合作過程中，整理理了了⼀一套供合作夥伴使⽤用的 Open API
• 您也可以將 KKBOX 介接到你的服務/平台上
• 也可以整合到設計⼯工具當中

42. https://github.com/KKBOX/KKBOXOpenAPISketchPlugin

43. developer.kkbox.com

44. That’s all!
Thanks!