有了Zeplin，告別繁瑣的設計稿標註！

么呵呵呵呵，隨著sketch的普及，國內外很多項目團隊都陸續用起了 Sketch＋Zeplin 的開發模式。今天給大家推薦這個插件給大家。

目標是讓設計更專註於設計，前端更加專註於實現。將一天的工作一秒鐘搞定，然後和前端小哥/軟妹有更多的時間去愉快玩耍~~

設計師和前端小哥們的協作工具——Zeplin

Zeplin 面向的用戶是設計師和前端工程師，是查看設計稿詳細參數的一個工具，核心功能為標註、Style Guide、備註文檔與簡單的團隊協作。

???? 吐個大槽

之前需要花將近 1 天左右的時間來標註和切圖一個中型項目（使用Markman），一旦中途出了問題，返工修稿導出再標註，很消耗時間，有的時候間距和顏色會有誤差，遇到多平台設計的情況，更是要多張圖輸出。

前端也需要兩張圖切換查看，圖片管理也很不方便。

使用 Zeplin，只需要一個切圖和上傳動作就可以節省 1 天的時間去愉快玩耍啦。

Zeplin 支持 PS 和 Sketch，我們以 Sketch 為例看看怎麼挽救1天的時間。

安裝和創建

首先需要在官網下載客戶端，安裝後，在 Sketch Plugins Zeplin 中可以看到。

Zeplin 需要用戶主動創建項目文件，可以創建3種類型的Project：Android、iOS、Web，每一種Project 的前端描述方式不同，便於前端小哥/軟妹直接拷貝代碼使用。

在免費賬戶下，每個用戶可以創建1個免費 Project 。

?? 怎麼做到可以開多個項目呢？

不充值的方法：用不同的賬號，分別創建Project 邀請給同一個賬號，這樣，那個賬號裡面就有多個 Project 啦。

建議大家有能力的還是選擇購買，支持一下zeplin（畢竟為設計師提供了這麼大的便捷）。

上傳

1選中 Sketch 中需要保存的畫板

2command+E或者Plugins Zeplin Export Select Artboard...，如果彈出保存提示，保存關掉就好。

3這時候會彈出需要上傳的Projects 選項，對應放入就好了，我是會默認勾選的 「替換同命名文件」。初次上傳系統會提示上傳的是幾倍圖文件。

3上傳成功後Zeplin App 和 Zeplin Web 就可以查看到。在 Project 裡面可以直接查看和更改文件夾命名，以及邀請項目對應的同學加入查看（對方需要註冊賬號）。

查看

左側?? 設計稿，點擊想要的圖層，就會出現對應的間距和顏色字體。

右側 ?? 設計稿的具體信息，包括描述、顏色、字體信息、切圖、評論，前端小哥可以自由的查看和下載想要切圖，一份設計稿就能搞定全部的視覺產物。

前端和PM同學需要哪個文件，也可以直接拷貝對應的Link（web/App）查看標註＋導出切圖。

文件管理

Tag -- 文件右鍵添加 Tag。

Tag 對於組織文件非常有用，但如果文件太多，它們還不夠。 最新的 Zeplin 提供了除了 Tag 以外的分組功能，

Section -- 便於查找和分類 Project 下的不同的項目它們可幫助分組，將項目可視化組織，這樣可以更快地找到特定的項目，特別是在不熟悉項目的情況下更好用

Styleguide

Zeplin 可以手動歸納出（老版本會自動歸納，容易出錯），每個 Project 裡面的 Style Guide Line，包括顏色和字型大小大小。在字型大小和顏色分類裡面，hover 所需要的圖層，點擊旁邊的 「+」 就可以收入到 styleguide 裡面。

已經收入的顏色/字型大小將會顯示為深色。

同樣，前端同學可以通過 Styleguidde 右側代碼區查看對應的代碼，也可以點擊頂代碼區頂部的標題切換對應的寫法。

??標叔說「寫太少啦，多寫點」 —— 所以...

如果大家用的是 PS 不用擔心，Zeplin 是支持 PS CC2015 或者以上的版本使用，只是安裝有的時候比較麻煩，至少在公司和在家安裝都出現了同樣的問題。

通常當您啟動Zeplin時，Photoshop插件應該自動安裝。如果沒有，你可以從Zeplin的菜單上面安裝它：「Zeplin Photoshop集成安裝插件...」

如果還不行！！

手動安裝如果從菜單安裝不起作用，可以手動安裝插件。需要安裝兩件，一個插件和一個面板。在官網上可以下載，下載見文末里的客套話。

現在當你重新啟動PS，應該看到菜單中的面板頂部：「窗口擴展 Zeplin」

Zeplin 的學習成本很低，但是和前端協作使用很非常高效，團隊的開發同學都說這個工具太牛了。

????客套話還是要有

送上 Zeplin 官方下載鏈接: https://www.zeplin.io/

PS 手動安裝插件和面板鏈接：https://support.zeplin.io/photoshop-integration/installing-photoshop-plugin-on-mac

有問題和有趣的事兒可以留言閑扯。天天開心~~

歡迎關注【波普先生微信公眾號，讓設計更好玩的數字生活媒體】