Sketch和Zeplin：幫助設計師和開發人員協作

設計師和開發人員之間的協作程度對於項目的成功至關重要，並且它是衡量壹個團隊成功的標準。盡管在同壹個辦公場所工作很常見，但通過網酪來協同辦公也是可以的。  在本文中，我們將看看如何將Zeplin與Sketch結合起來使用。

Sketch的快速入門

大約六個月前，我轉職時曾被鼓勵去嘗試Sketch這款軟件。這個軟件的好處在於它是專門用於界面和圖標設計的;從具有特定尺寸的網頁，移動設備和圖標到具有幫助加強設計流程的功能的Sketchboard，間直是設計師必備。

而Photoshop和Illustrator就很難快速入門。

以下是壹些示例，可以幫助妳了解使用Sketch可以做些什麼：

1. UI圖稿
2. 使用Inspector查找有關特定對象的所有詳細信息（大小，位置，顏色，字體洋式，不透明度等等）。
3. 使用“ 導出”功能可將Artboard或單個對象導出為特定的文件格式（PNG，JPG，PDF等）。

“我是壹名開發者，我從未使用過Sketch！”

近年來，設計人員已經學會了使用InVision等工具進行辦公協作，但該平臺仍然無法讓開發團隊進行協作辦公。

我們不應該要求開發人員精通設計師用於模擬產品的工具。也就是說，我們也不應該要求設計師擺脫他們最擅長的事情：設計！  每次交付設計時構建“規範文檔”遠非“敏捷”，並且可能意味著在交付設計和需要疊代之間浪費大量時間。

Zeplin

這是Zeplin大顯身手的時候。

Zeplin是面向UI設計師和前端開發人員的協作工具。它超越了設計工作流程，並幫助團隊完成設計交付。

它允許設計師直接從Sketch上傳他們的線框或視覺設計，並將它們添加到Zeplin的項目文件夾中。這可能是最好的工具了？ 註釋會自動添加到設計中（尺寸，顏色，邊距，甚至某些元素的CSS建議），這將為妳提供整個團隊的在線存儲庫。

“當Zeplin作為壹個單壹來源時，它可以很好地協同工作。

此外，由於它可以作為獨立應用程序以及Web應用程序提供相應素材，因此妳可以在任何地方訪問它。可以輕松檢查設計和空間，尺寸，顏色等。“ - Daniel Setas Pontes，Javascript開發人員@NOW TV，Sky

將設計稿從Sketch導出到Zeplin

Zeplin在Sketch中作為壹份插件，因此上傳設計是壹項間單活兒。

以下是如何開始壹個項目：

1. 下載Zeplin（僅這用於Mac）並安裝。開發人員不需要運行OS X，因為他們只需訪問基於Web的工具即可訪問內容。
2. 創建項目。
3. 選擇妳設計的平臺。
4. 標出項目名稱。

在Sketch中，選擇單個對象並將它們導出。這將使妳的開發團隊能夠在以後從Zeplin內導出每個元素。這是如何使用的呢：

1. 接下來，選擇要上傳到Zeplin的畫板。
2. 轉到插件> Zeplin> 導出選定的畫板。
3. 選擇妳要上傳設計項目，然後點擊導入。

使用Zeplin壹起工作

壹旦進入Zeplin，妳可以在項目之間導航並輕松探索其中的所有組件。查明某些元素的規格也很直觀; 選擇妳想要的元素，然後所有的相關信息將出現在右側欄中。

開發者：壹旦妳打開了基於網酪的工具並登錄，以下是它的工作原理：

1. 選擇妳想要檢查的對象。
2. 查看右側欄中的詳細信息，如字體洋式，顏色等（信息將根據妳選擇的對象顯示）。
3. 復制CSS。

如果設計團隊在將設計導入Zeplin時允許選擇素材元素，開發團隊應該能夠導出個人資產。資產將以SVG格式和三種不同的PNG尺寸下載。

1. 在這裏，妳可以將註釋和註釋添加到設計中。
2. 在這裏，妳可以復制和分享項目鏈接，甚至可以與團隊的Slack頻道集成以獲取通知或邀請團隊成員進行協作！

為什麼妳的團隊應該采取協同辦公

使用Zeplin協同辦公有很多優點，下面是壹些例子：

• 妳將避免構建規格文檔; 這既不敏捷也不容易更新。
• 為開發人員和其他設計人員創建具有所有相關信息的即時註釋設計。
• 妳可以創建可導出的設計，因此開發人員可以快速訪問單個資產。
• 創建妳想要的項目，然後只需點擊幾下即可上傳和更新。
• 創建幫助設計團隊保持壹致的風格指南。
• 利用Slack，每次有更新時立即通知妳的團隊。

嘗試壹下！

使用Zeplin來進行Sketch的協同辦公是設計師與開發人員合作的絕佳方式。我的團隊喜歡以這種方式工作 - 我很想聽聽到妳對於這些工具的看法！

相關的鏈接

• Sketch插件
• 相關的鏈接
• 在Envato市場上繪制網站模板
•  Twitter上的@zeplin_io帳號
  
• zeplin.io