Zeplin Sketch 插件——設計和工程之間的工作流程橋樑

Zeplin 是一個強大的協作工具，它通過為產品團隊創建連接空間來彌合設計師和開發人員之間的差距。

為什麼選擇齊柏林？

任何產品開發難題的關鍵部分是設計與開發相遇的地方。 當設計準備好進入開發階段（“交接”）時，工程師需要一種方法來理解它並將其轉換為代碼。

Zeplin 通過從 Sketch、Adobe XD、Figma 和 Photoshop 中獲取設計並將它們導出為可以輕鬆生成代碼片段、樣式指南、規範和資產的格式來促進移交。

告別“紅線”的日子。 Zeplin 純粹專注於改善產品設計師和開發團隊之間的協作，並被 Airbnb、Dropbox、Pinterest、Microsoft 和許多其他公司的領先產品團隊使用。

使用 Zeplin，無需手動寫出尺寸或邊距、鍵入副本、導出圖標。 它簡直太棒了，節省了大量時間來專注於設計探索。 – Alex Potrivaev，產品設計師@Intercom

在我們過去的一篇文章中，Toptal 設計師 Micah Bowers 談到了擁有標準化設計語言系統的重要性，以便在從事數字產品工作的產品團隊的各個職能部門之間進行有效溝通。

通過對設計資產進行版本控制、創建組件庫和生成生活方式指南，移植到 Zeplin 中的項目可以作為產品團隊的“單一事實來源”。

我們基本上認為 Zeplin 是我們與 Engineering 合作的事實來源。 如果不在 Zeplin 中，則不是官方的。 – Jason Stoff，高級設計師，數字產品@Starbucks

齊柏林限制

雖然 Zeplin 有許多有用的功能，但它並不完美。 Zeplin 提供免費計劃，但根據該計劃，它僅限於一個項目。 在為 iOS 和 Android 設計時，將需要兩個單獨的項目。 屆時，將需要付費計劃。

一旦了解了使用 Zeplin 和 Sketch（或上面提到的其他應用程序）的流程，工作流程就會變得簡單。 然而，Zeplin 有一點學習曲線，需要一些時間和精力。 要查看一般概述並了解有關如何使用它的更多信息，請參閱下面的 Zeplin 演示視頻：

使用 Sketch 和 Zeplin：步驟和提示

1. 開始使用 Zeplin。

• 如果您還沒有 Zeplin 帳戶，請創建一個。 您可以免費註冊：https://app.zeplin.io/register
• 下載適用於 Mac 或 Windows 的 Zeplin 桌面應用程序。
• 下載 Sketch 的 Zeplin 插件。

2. 準備你的 Sketch 文件。

• 現在我們已經準備好 Sketch 和 Zeplin，我們將設置 Sketch 文件以無縫導出到 Zeplin。
• 在 Sketch 中，使用一致的命名約定來組織您的資源和圖層。 如果與其他設計師合作，請確定適用於團隊中每個人的約定。 根據這是什麼類型的項目（例如，iOS、Android 或 Web），Zeplin 將自動調整資產的命名約定，從而將它們導出為一步過程。
• 在 Sketch 中為常見元素和資產創建符號。 這將允許您在 Zeplin 中設置組件。
• 將顏色保存到“文檔顏色”調色板中，並將字體保存為 Sketch 文件中的“文本樣式”。 這些將顯示在您的 Zeplin 生成的樣式指南中。

3. 使資產可在 Sketch 中導出。

• 這是非常重要的一步。 將資產分組為符號後，打開 Sketch 文件中的符號頁面。
• 單擊符號內的組，例如“ic-menu”（文件夾圖標）
• 突出顯示該組，在 Sketch 中的“Inspector”的右下方找到“Make Exportable”操作，然後單擊此選項。 切片圖標現在應該出現在您的組名稱旁邊。
• 此步驟將允許工程師直接從 Zeplin 導出資產。

4. 在 Zeplin 中創建一個新項目。

• 選擇您正在構建的項目類型。 請注意，即使設計相同，iOS 和 Android 也應該有單獨的項目。 這是因為 Zeplin 會根據項目的類型生成不同的代碼。
• 選擇與您的 Sketch 畫板匹配的項目分辨率（例如，1x、320px）。

5. 將 Sketch 畫板導出到 Zeplin。

• 在 Sketch 中，突出顯示您想要導出到 Zeplin 的所有畫板。
• 轉到Plugins > Zeplin > Export Selected...或按鍵盤上的⌃⌘E 。
• 接下來，我們將從 Sketch 中導出符號。 在 Sketch 中打開 Symbols 頁面並突出顯示所有畫板。 導出到 Zeplin。

6. 在 Zeplin 中組織項目。

• 現在您的 Sketch 畫板已在 Zeplin 中，讓我們將圖稿組織成多個部分。
• 從項目的儀表板視圖中，選擇相似的屏幕以進行分類。 突出顯示後，右鍵單擊並選擇“從選擇中新建部分”。 重複此操作，直到您的 Zeplin 文件組織正確。

7. 利用 Zeplin 中的組件。

也許 Zeplin 最有用的特性之一就是能夠將資產組織到組件庫中。 當一個項目的設計由不同的團隊成員為多個平台開發時，這一點很重要。 正如 Airbnb 設計師 Karri Saarinen 在構建視覺語言中所概述的那樣，設計統一是必不可少的：

統一的設計系統對於更好更快地構建是必不可少的； 更好，因為我們的用戶更容易理解有凝聚力的體驗，更快，因為它為我們提供了一種通用的語言。

• 選擇 Zeplin 頂部中心的“Styleguide”選項卡（“Dashboard”旁邊）。
• 進入“樣式指南”選項卡後，選擇輔助選項卡“組件”。 在這裡，您將看到從 Sketch 導出的所有符號。
• 將它們組織成“圖標”、“圖像”、“公共元素”等部分。您可以在此處了解有關 Zeplin 中項目樣式指南的“組件”選項卡的更多信息。

8. 從 Zeplin 導出樣式指南。

• 在 Zeplin 項目的儀表板視圖中，找到應用程序右上角的“共享”按鈕。
• 選擇“共享”，然後在菜單底部找到“場景”。 選擇“啟用”，然後選擇“打開”。 這將為您的項目生成動態樣式指南。 與您的團隊共享 URL。

9. 在 Zeplin 中註釋您的設計。

• 使用 Zeplin 可以輕鬆為設計添加註釋。 從屏幕的詳細視圖中，選擇添加註釋圖標並將您的註釋固定到組件。
• 您可以通過按住Cmd （Windows 和 Linux 用戶為Ctrl ）並單擊屏幕上的任意位置來添加註釋。
• 您甚至可以用“@”提及其他隊友，他們會收到通知。

10. 協作、共享和使用版本控制。

• 現在您的 Zeplin 文件已準備好與您的團隊共享，通過他們的電子郵件地址邀請用戶，或向他們發送項目 URL。
• 通過從 Sketch 導出畫板繼續更新您的 Zeplin 文件。
• Zeplin 將自動對您的文件進行版本控制，您可以使用這個動態的“事實來源”繼續與團隊成員協作。

結論

在設計和開發團隊之間創建一個動態、有組織和協作的工作流程對於構建出色的數字產品至關重要。 擁有像 Zeplin 這樣的工作流橋使設計師能夠對屏幕進行註釋，並通過完整和精確的規範簡化通常令人恐懼的移交階段。

從一個中央源動態更新資產的靈活性，例如導出到 Zeplin 中的組件的 Sketch 中的符號，創造了巨大的靈活性。 然後，工程師可以輕鬆地將資產導出為本機代碼，從而節省時間和單調乏味。

雖然深思熟慮的用戶體驗和美觀的設計是成功產品的根源，但將設計交到用戶手中的過程至關重要。

想要高效並依賴單一“真實來源”的設計師應該考慮上面概述的 Sketch 到 Zeplin 工作流程。 這兩種設計工具之間強大的軟件關係背後的力量將幫助設計人員和開發團隊更輕鬆、更滿意地到達終點。

• • •

進一步閱讀 Toptal 設計博客：

• Adobe XD 與 Sketch – 哪種 UX 工具適合您？
• 如何構建一個有效的設計框架（包括一個免費的 Sketch UI 框架）
• 關於 Sketch 中的排版你可能不知道的事情
• 熟悉 Sketch 插件開發
• 立即使用 Sketch 和 Looper 創建令人費解的插圖