Zeplin Sketchプラグイン–設計とエンジニアリングの間のワークフローブリッジ

Zeplinは、製品チームのための接続されたスペースを作成することにより、デザイナーと開発者の間のギャップを埋める強力なコラボレーションツールです。

なぜZeplinなのか？

製品開発のパズルの重要な部分は、設計と開発が出会う場所です。 設計を開発フェーズ（「ハンドオフ」）に移行する準備ができたら、エンジニアはそれを理解してコードに変換する方法が必要です。

Zeplinは、Sketch、Adobe XD、Figma、およびPhotoshopからデザインを取得し、コードスニペット、スタイルガイド、仕様、およびアセットを簡単に生成できる形式にエクスポートすることで、ハンドオフを容易にします。

「レッドライニング」の時代に別れを告げましょう。 Zeplinは、製品設計者と開発チーム間のコラボレーションの改善に純粋に焦点を当てており、Airbnb、Dropbox、Pinterest、Microsoft、およびその他の多くの主要な製品チームによって使用されています。

Zeplinを使用すると、サイズや余白を手動で書き出したり、コピーを入力したり、アイコンをエクスポートしたりする必要はありません。 それは単に素晴らしく、設計の調査に集中するために多くの時間を節約します。 – Alex Potrivaev、プロダクトデザイナー@Intercom

過去の記事の1つで、ToptalDesignerのMicahBowersは、デジタル製品に取り組んでいる製品チームのさまざまな機能間で効率的に通信するために、標準化された設計言語システムを持つことの重要性について話しました。

デザインアセットをバージョン管理し、コンポーネントライブラリを作成し、リビングスタイルガイドを生成することで、Zeplinに移植されたプロジェクトは、製品チームの「信頼できる唯一の情報源」として機能します。

基本的に、Zeplinはエンジニアリングと協力するための信頼できる情報源であると考えています。 Zeplinにない場合は、公式ではありません。 –デジタルプロダクツ@スターバックスシニアデザイナー、ジェイソン・ストフ

Zeplinの制限

Zeplinには多くの便利な機能がありますが、完璧ではありません。 Zeplinは無料プランを提供していますが、そのプランでは1つのプロジェクトに制限されています。 iOSとAndroidの両方を対象に設計する場合、2つの別々のプロジェクトが必要になります。 その時点で、有料プランが必要になります。

ZeplinとSketch（または上記の他のアプリ）での作業の流れを理解すると、ワークフローが簡単になります。 ただし、Zeplinには少し学習曲線があり、ある程度の時間と注意が必要です。 一般的な概要とその使用方法の詳細については、以下のZeplinデモビデオを参照してください。

SketchとZeplinの操作：手順とヒント

1.Zeplinを使い始めます。

• Zeplinアカウントをまだ持っていない場合は、作成します。 無料でサインアップできます：https：//app.zeplin.io/register
• MacまたはWindows用のZeplinデスクトップアプリをダウンロードします。
• Sketch用のZeplinプラグインをダウンロードします。

2.スケッチファイルを準備します。

• SketchとZeplinの準備ができたので、ZeplinにシームレスにエクスポートするためのSketchファイルを設定します。
• Sketchで、一貫した命名規則を使用してアセットとレイヤーを整理します。 他の設計者と共同作業する場合は、チームの全員に役立つ規則を決定します。 これがどのタイプのプロジェクト（iOS、Android、Webなど）であるかに応じて、Zeplinはアセットの命名規則を自動的に調整し、アセットのエクスポートを1ステップのプロセスにします。
• Sketch内で共通の要素とアセットのシンボルを作成します。 これにより、Zeplinでコンポーネントをセットアップできるようになります。
• 色を「ドキュメントの色」パレットに保存し、フォントをスケッチファイルの「テキストスタイル」として保存します。 これらは、Zeplinで生成されたスタイルガイドに表示されます。

3.アセットをSketchでエクスポート可能にします。

• これは非常に重要なステップです。 アセットがシンボルにグループ化されたら、スケッチファイルの[シンボル]ページを開きます。
• 「ic-menu」（フォルダアイコン）などの記号内のグループをクリックします
• グループを強調表示した状態で、Sketchの「インスペクター」の右下にあるアクション「エクスポート可能にする」を見つけて、このオプションをクリックします。 これで、グループ名の横にスライスアイコンが表示されます。
• この手順により、エンジニアはZeplinからアセットを直接エクスポートできます。

4.Zeplinで新しいプロジェクトを作成します。

• 構築するプロジェクトのタイプを選択します。 デザインが同じであっても、iOSとAndroid用に別々のプロジェクトを用意する必要があることに注意してください。 これは、Zeplinがプロジェクトのタイプに基づいて異なるコードを生成するためです。
• スケッチアートボードに一致するプロジェクト解像度を選択します（例：1x、320px）。

5.SketchアートボードをZeplinにエクスポートします。

• Sketchから、Zeplinにエクスポートするすべてのアートボードを強調表示します。
• [プラグイン]>[Zeplin]>[選択したものをエクスポート... ]に移動するか、キーボードの⌃⌘Eを押します。
• 次に、Sketchからシンボルをエクスポートします。 SketchでSymbolsページを開き、すべてのアートボードを強調表示します。 Zeplinにエクスポートします。

6.Zeplinでプロジェクトを整理します。

• SketchアートボードがZeplinに追加されたので、アートワークをセクションに整理しましょう。
• プロジェクトのダッシュボードビューから、類似した画面を選択してカテゴリにグループ化します。 強調表示されたら、右クリックして[選択から新しいセクション]を選択します。 Zeplinファイルが適切に整理されるまでこれを繰り返します。

7.Zeplinのコンポーネントを利用します。

おそらく、Zeplinの最も便利な機能の1つは、アセットをコンポーネントライブラリに整理する機能です。 これは、プロジェクトの設計がさまざまなチームメンバーによって複数のプラットフォーム用に開発されている場合に重要です。 AirbnbのデザイナーであるKarriSaarinenが視覚言語の構築で概説しているように、デザインの統一は不可欠です。

統一された設計システムは、より良く、より速く構築するために不可欠です。 一貫性のあるエクスペリエンスはユーザーがより簡単に理解できるため、より優れています。また、共通の言語を使用できるため、より高速です。

• Zeplinの上部中央（「ダッシュボード」の横）にある「スタイルガイド」タブを選択します。
• 「スタイルガイド」タブが表示されたら、2番目のタブ「コンポーネント」を選択します。 ここでは、Sketchからエクスポートされたすべてのシンボルが表示されます。
• これらを「アイコン」、「画像」、「共通要素」などのセクションに整理します。Zeplinのプロジェクトスタイルガイドの[コンポーネント]タブについて詳しくは、こちらをご覧ください。

8.Zeplinからスタイルガイドをエクスポートします。

• Zeplinプロジェクトのダッシュボードビューから、アプリケーションの右上隅にある[共有]ボタンを見つけます。
• 「共有」を選択し、メニューの下部にある「シーン」を見つけます。 「有効」、「開く」の順に選択します。 これにより、プロジェクトの動的なスタイルガイドが生成されます。 URLをチームと共有します。

9.Zeplinでデザインに注釈を付けます。

• Zeplinを使用すると、デザインにメモを簡単に追加できます。 画面の詳細ビューから、メモの追加アイコンを選択し、メモをコンポーネントに固定します。
• Cmd （WindowsおよびLinuxユーザーの場合はCtrl ）を押しながら画面上の任意の場所をクリックすると、メモを追加できます。
• 「@」で他のチームメイトに言及することもでき、彼らは通知を受け取ります。

10.バージョン管理を共同作業、共有、および使用します。

• これで、Zeplinファイルをチームと共有する準備が整いました。ユーザーをメールアドレスで招待するか、プロジェクトのURLを送信してください。
• Sketchからアートボードをエクスポートして、Zeplinファイルの更新を続けます。
• Zeplinはファイルを自動的にバージョン管理し、この動的な「信頼できる情報源」を使用してチームメンバーとのコラボレーションを継続できます。

結論

優れたデジタル製品を構築するには、設計チームと開発チームの間で動的で組織化されたコラボレーションワークフローを作成することが不可欠です。 Zeplinのようなワークフローブリッジを使用すると、設計者は画面に注釈を付けることができ、完全で正確な仕様で、しばしば恐ろしいハンドオフフェーズが容易になります。

ZeplinのコンポーネントにエクスポートされたSketchのシンボルのように、1つの中央ソースからアセットを動的に更新する柔軟性は、非常に高い柔軟性を生み出します。 エンジニアはアセットをネイティブコードに簡単にエクスポートできるため、時間と労力を節約できます。

思いやりのあるUXと美的に美しいデザインは成功する製品の根源ですが、そのデザインをユーザーの手に渡すプロセスは重要です。

効率的で信頼できる唯一の情報源に依存したい設計者は、上記のSketchtoZeplinワークフローを検討する必要があります。 これら2つの設計ツール間の強力なソフトウェア関係の背後にある力は、設計者と開発チームがより簡単かつ満足してフィニッシュラインに到達するのに役立ちます。

•••

Toptal Designブログでさらに読む：

• Adobe XDとSketch–どのUXツールがあなたに適していますか？
• 効果的なデザインフレームワークを構築する方法（無料のSketch UIフレームワークを含む）
• Sketchのタイポグラフィについて知らないかもしれないこと
• スケッチプラグインの開発に精通する
• スケッチとルーパーを使ってすぐに心を曲げるイラストを作成する