ツールとチュートリアル

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

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

C ++でコーディングすることを学ぶ

Sketchハンドオフ：ZeplinとSketchソフトウェアが連携

なぜZeplinなのか？

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

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

「レッドライニング」の時代に別れを告げます。 Zeplinは、純粋に間のコラボレーションの改善に重点を置いていますプロダクトデザイナーおよび開発チームであり、Airbnb、Dropbox、Pinterest、Microsoft、およびその他の多くの主要な製品チームによって使用されています。

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

Zeplin for Sketchにより、設計仕様が不要になりました

Zeplinなどのツールの前の従来の設計仕様（別名「レッドライニング」）。

過去の記事の1つで、ApeeScape Designer ミカバウアーズ標準化することの重要性について話しましたデザイン言語システムデジタル製品に取り組んでいる製品チームのさまざまな機能間で効率的に通信するため。

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

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

Zeplinの制限

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

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

adobe xdvsスケッチ2018

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

1.Zeplinを使い始めます。

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

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

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

Sketchは、Zeplinに表示するドキュメントの色を追加します

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

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

Zeplinにエクスポートする前にエクスポート可能なアセットをスケッチする

デザインの5つの原則は何ですか

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

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

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

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

スケッチアートボードが強調表示され、Sketchアセットを管理できるZeplinにエクスポートする準備ができました

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

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

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

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

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

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

Zeplin forSketch-Zeplinのコンポーネント

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

SpringBootトークンベースの認証

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

スケッチとZeplin：Zeplinシーンを使用してスタイルを共有します。

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

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

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

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

結論

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

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

企業におけるCFOの役割

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

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

•••

ApeeScapeデザインブログの詳細：

基本を理解する

Zeplinの用途は何ですか？

Zeplinは、デザイナーとエンジニアの間のギャップを埋めるために特別に設計されたMacおよびWindows用のプラグインおよびスタンドアロンデスクトップアプリケーションです。 Sketch、Adobe XD CC、Figma、またはAdobe Photoshop CCからデザインを取得し、コードスニペット、デザインスペック、およびアセットを生成する形式にエクスポートします。

コードスニペットとは何ですか？

プログラミングのコードスニペットは、再利用可能なコードの一部です。「スニペット」は、再利用可能なソースコード、マシンコード、またはテキストの小さな領域を表すプログラミング用語です。通常、これらは、より大きなプログラミングモジュールに組み込むために正式に定義された運用ユニットです。

Sketchアプリとは何ですか？

Sketchは、さまざまなデバイスのさまざまな忠実度でデザインを作成するための、macOSプラットフォーム上の包括的なベクターベースのデザインツールキットです。これには、デザインツール、デザインライブラリ管理、ライブラリスタイル、カラーマネジメント、再利用可能なコンポーネント、マスキングなどの包括的なセットが含まれています。