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 到程式開發工具是一大亮點,期待正式版功能再選擇合適的用。

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.