Zeplin: 自動生成 UI Spec 的利器

兩、三個月前,我在 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 官方網站