Sketch Plugin — Zeplin Vs Sympli

UI 的標註與協作工具

Sketch Measure — 早期用 Sketch 做介面的標註工具,
優點:可以選擇要標註哪些資訊,自動算出間距,自訂樣式。
缺點:畫面凌亂,得輸出多張標註圖或請工程師安裝 Sketch. (Mac Only)

Zeplin

便於團隊交流,線上檢閱 Sketch 檔;免標註自動顯示資訊,建立簡易 Style Guide;用網頁版或 APP 版都能通。

直到發現 Zeplin 這個神器後我果斷捨棄 Measure,它可以省去手動標註的時間,將 Artboards 上傳至線上檢閱,還可加上註解留言。讓工程師不需安裝任何軟體也能透過網頁瀏覽,滑鼠點哪就呈現該資訊。免費用戶可以建立一個專案,邀請成員一起協作管理。
(使用前先安裝程式本體,再下載 for Sketch 的外掛。只有要上傳的人需要安裝,如果 RD/PM 不習慣從網頁看也是可以叫他下載 Zeplin XD)

工程師免安裝 Sketch, 設計師免輸出標註圖,直接在網頁或 APP 瀏覽座標尺寸 / 顏色 / 字號字型內文 / 輸出 Assets.

Sympli

如同上述軟體,還有 Plugin for PS, Xcode, Android Studio.

雖然 Beta Version 速度比較慢、畫面比較醜,但功能還算完整的 Sympli
等一下、名字也太相近了吧,是打對台的概念嗎?

能讀取圖層的混合模式。

這類軟體的好處是能減少來回溝通的時間,而且不用輸出很多張密密麻麻自己看了都會吐血的帶標註圖片。前公司為了效率要幫工程師全面更換 MAC 與採購正版 Sketch,真的非常噴錢~雖然好像很不錯 (?)。


Zeplin Vs Sympli

Create Project
如左圖 Zeplin 能開三種專案,右圖 Symbli 目前只有 iOS 與 Android, 兩者都能夠 選 Resolution: mdpi, hdpi, xhdpi…然後我們從 Sketch 對應的外掛去上傳檔案。

Create Project: Zeplin / Sympli

Dashboard
Zeplin Web 僅供線上檢閱、註解、輸出元件,要修改與刪除頁面必須在 APP 裡執行,另有 Tag 功能方便整理;還可同步 Slack.

Sympli 只有網頁服務,所以刪除與編輯都在網頁上執行;值得一提它有詳細的上傳紀錄可查閱,還能翻回舊版本圖片

Dashboard: Zeplin Web / Zeplin App / Sympli

View
兩者主要功能大同小異,Zeplin 能切換色碼為 HEX, RGBA,數值容許小數點存在。Sympli 呈現更多資訊,並能選擇圖層、顏色、字體去 Highlingt 出位置,小數點四捨五入。

View: Zeplin / Sympli

Spacing
Zeplin 檢閱間距更直覺,直接將滑鼠移到空白處即可;Sympli 必須用尺規工具或”複選圖層”來顯示物件的間隔。

Spacing: Zeplin / Sympli

Others
兩邊都一樣能輸出五種尺寸元件(hdpi..)、顏色 XML、留言註解等,還有生成簡易的 Style Guide,但只含文字色號實用性實在不高,Guide 還是另外製作比較好。

Zeplin / Sympli

目前比較起來兩者無太大差異,就是 Zeplin 介面較優美,Sympli 支援 PS share bundle 到程式開發工具是一大亮點,期待正式版功能再選擇合適的用。