兩、三個月前，我在 Product Hunt 發現 Zeplin 這個好工具。它能夠配合 Sketch 檔案，在介面上顯示元件的設計規格，令開發過程更順利。現在我的開發團隊在我的引薦下也在用，因此我非常推薦給各位開發者和設計師。

為甚麼 UI 設計需要寫規格 (spec)？

對開發感到陌生的朋友，可能不了解 UI Specification 的重要性。首先，你要明白設計師和工程師的大腦是不同的。工程師拿到設計圖，他沒有程式打不開。你跟他說「稍稍向左移」、「這個大一點、小一點」，他沒有如設計師般的觸覺，我肯定他聽多幾遍便會頭痛。哪設計師呢？設計者清楚知道各項規格，但為每個元件加上標注不是太麻煩嗎？所謂「工欲善其事，必先利其器」，與其花時間製作 UI Spec，倒不如把工作丟給軟件，用省下來的時間做好設計。

現在海外的設計師也用 Sketch 設計介面（請香港設計師不要死守 Photoshop），Zeplin 必須配合 Sketch 才能使用。

編按：現時 Figma、Adobe XD 及 Photoshop 均可使用 Zeplin 插件。

如何配合 Sketch 使用 Zeplin？

使用官方插件把 Sketch 的畫布上傳至 Zeplin，選好設定後，你便可以在網頁或 Mac App 指著元件查看規格，就是這麼簡單！

它的圖檔輸出功能比 Sketch 更優秀：在 Sketch Export 選某個解析度，Zeplin 便會自動輸出各解析度的圖檔，並分類到資料夾中，你亦可一次過輸出頁面的所有圖檔，這尤其對開發 Android app 特別有幫助。除此之外，Zeplin 還有其他對開發有利的功能，例如色塊、顏色碼、把圖檔輸入至 xcode，以及最近推出「自動輸出 CSS」的功能。

以下是為開發團隊設講座時以 Product Hunt Redesign Concept 做的小範例：

☞ Zeplin 官方網站