Zeplin官方版是款為設計師們打造的設計以及制作圖片工具。Zeplin官方版為我們提供了標注、Style Guide、備注文檔與簡單的團隊協作功能，這款軟件可以幫我們自動生成尺碼標注、CSS 樣式代碼、導出圖片，能夠支持共享成員間的備注和評論，還可以對相關的值進行顯示，快速的即可完成觀看。

相關軟件	版本說明	下載地址
Autoscreencap	最新版	查看
Imatest	最新版	查看
JDSoft SurfMill	官方版	查看
Java Chart Designer	官方版	查看

功能介紹

      量身定制的資源，在一個位置

      Zeplin會自動從為您開發的平臺定制的設計中生成準確的規范、資產和代碼片段。在設計文件中不再丟失。

      出口設計一鍵

      不需要改變你的設計方式，只需使用一次點擊導出你的文件使用我們的草圖，Adobe XD CC，Figma，Adobe photoshop CC插件。

      讓每個人都站在同一個頁面

      在Zeplin的出口和商店設計項目，在云端，在一個屋檐下。快速邀請隊友，分享鏈接，并建立。

      在設計上進行交流

      直接在設計上添加注釋以傳達想法、反饋或要求技術細節。為了使事情有條理，用顏色對筆記進行分類并在完成后解決它們。

      使用集成加速您的工作流程

      將ZePin添加到松弛通道或TelLo板上，以加速您的工作流程，始終保持團隊的最新狀態。

      建立團隊的設計知識庫

      收集和組織您的團隊的項目和資源，如組件、顏色、文本樣式。存儲舊版本和項目，必要時快速引用它們。

Zeplin軟件特色

      這次從你需要使用的Sketch里面完成對文件的導出

      而且對Zeplin的分組，設置功能，讓您快捷的完成相關的操作

      支持對css的樣式進行快速的查看，對您完成的設計稿進行導出的操作

      支持對文件進行打上你需要使用的變遷

      對文件快速的進行備注，并且對評論的功能支持

      還可以對相關的值進行顯示，快速的即可完成觀看

使用方法

      下載完成后，我們打開本地的 App，點擊右上角的 Create，創建一個新的項目。它有多種模式的，Android、iOS、Web，每個下面會有相應的描述。

      這里我們選擇 Web，可以看到 CSS 和 HTML。

      從Sketch中導出文件

      下面我們打開 Sketch，選擇菜單-> Plugins -> Zeplin -> Export Selected Artboards...

      這時會彈出 Zeplin 的導入窗口，選擇需要導入進的項目。

      可以注意到左下角有一個“Replace scrrens with the same name”，這個是指如果是已經導入過項目，但我們 Sketch 里設計稿修改了，需要更新 Zeplin 上的設計稿時，打上勾就可以替換原本的文件了。

      Zeplin的分組及設置

      導入完成后，會自動跳出 Zeplin 的 App，我們可以看到文件都在 Zeplin 里了。鼠標懸浮在第一個文件的最左側，會出現像除號一樣的標志，點擊一下，我們就可以給這幾個文件創建一個分組了。

      這里我們把它命名為“商品相關”。看文件名的右側，有一個小三角的標志，點擊它就可以方便地收起或展開文件分組。

      然后旁邊有個更多操作的按鈕，我們點擊一下，還可以給這個分組增加描述、重命名分組、移動分組，或是刪除分組了。

      查看CSS樣式

      我們進入 Zeplin 的一個設計稿，點擊一下某個區域，如下圖。我們可以看到該區域的px 尺寸，以及它與其他元素的距離。

      看面板的右側，我們還會看到它CSS 相關的值，例如 box-shadow。

      導出設計稿圖片

      Zeplin 還有個非常好的功能，就是導出圖片。矢量圖片可以包含 PNG 和 SVG 格式。

      不過不要忘記需要先在 Sketch 中，給這個圖片設置過Export。

      給文件打標簽

      接著我們看下 Zeplin 的打標簽功能。可以看到這個文件已經有了一個“專題”的標簽。我們還可以給它選擇其它的標簽，或是輸入一個新的標簽。也可以刪除這些標簽。

      然后回到主面板中。我們可以注意到最上面有兩排的標簽。比如我們選擇“專題”，就會看到被打上了“專題”標簽的所有文件。

      由于在最初，Zeplin 并沒有創建分組的功能，所以我們用標簽來分類文件。而現在我們就可以用標簽來做更細化的過濾篩選條件。

      備注或評論

      接著再看一下評論功能。我們可以回復一條評論，或是修改評論的顏色，或是刪除這條評論。

      還可以新增一條評論。CMD + 鼠標點擊一個空白區域，輸入你的評論即可。

      注意看一下，文件的右下角有一個 Notes 睜著眼睛的小猴子標志，如果點擊一下，就可以隱藏頁面上的所有評論。

FAQ

      為什么切片的預覽圖和實際導出的圖不一樣，而且尺寸大小不一致?

      答：切片一定要放在圖片的上方且切片命名不要重復，圖片的XY軸位置不能出現小數點。

      切圖的圖標沒有點擊態?

      答：方法一：可以在單個文件下面加長一條，新增一些圖標點擊態;方法二：建立一個設計規范，把整個app的圖標控件整理，方便開發統一調用