【Adobe XDからZeplinへ書き出し】連携できない場合はここをチェック
Adobe XDからZeplinへの書き出し（エクスポート）方法を紹介します。
カンタンな作業なんですが、ちょっと準備が抜けてると正しく動作しないので、書き出しできない場合は各工程を改めてチェックしてみてくださいね。
当サイトには、広告が含まれているページがあります。
豊かに引きこもる。
Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。
Zeplin側の準備
まず、Zeplin側では以下まで進めておく必要があります。
・Zeplinアカウントを取得
・Zeplinのデスクトップアプリを用意
・プロジェクトを作成しておく
Zeplinアカウントを取得
Zeplinの公式サイトからアカウントを作成することができます。
Zeplinのデスクトップアプリを用意
こちらも公式のダウンロードページからインストールすることができます。
プロジェクトを作成しておく
Adobe XDで作成した画面の書き出し先となるプロジェクトをあらかじめ作成しておきます。
3つの作業は「【Zeplinの使い方】利用するメリット、インストールからプロジェクト作成まで」でもまとめて紹介しています。
作業にかかる時間は5分程度、フリープランであれば無料で使用する事ができます。
Adobe XD側の準備
次はAdobe XD側。
既にAdobe XDを利用していて、書き出したい画面が用意されている前提でお話を進めます。
今回はこちらの「HOME」という画面をZeplinに書き出します。
Zeplin用のXDプラグイン「Zeplin for XD」を入手
ZeplinとAdobe XDを連携させて、Adobe XD→Zeplinへ画面を書き出すには、Adobe XD側で専用のプラグイン「Zeplin for XD」をインストールしておく必要があります。
Adobe XDの［メニュー］→［プラグイン］→［プラグインを参照］からプラグインの一覧画面を開きます。
「Zeplin for XD」に関わらず、Adobe XDのプラグインはここから検索＆インストールする事ができます。
画面右上あたりの虫眼鏡アイコンを選択して、
表示された検索窓に「Zeplin」と入力します。
プラグインが見つかったら、選択＆インストールしてセッテイング完了です。
Adobe XDからZeplinへの書き出し（エクスポート）
ZeplinとAdobe XD、両者の準備が整ったので、書き出しを行ってみましょう。
書き出し画面を選択してZeplinへ書き出し
Zeplinへ画面を書き出すことをエクスポートと言います。
書き出したい画面をAdobe XD上で選択した状態で、［メニュー］→［プラグイン］→［Zeplin for XD］→［Export Selected…］を選択します。
一度に複数の画面を選択することも可能です。
エクスポート対象のプロジェクトを選択
書き出し対象であるZeplinのプロジェクトを選択して［Export］を押します。
画面下にあるコミットメッセージ欄を使うと、各種コメントをつける事ができます。
コメントはZeplin上で確認できるので、画面に関する説明やメモを入れておくと便利です。
Zeplinへのエクスポート完了
選択した画面がZeplin上に表示されていれば完了です。
こちらは、書き出した画面が一覧表示されるダッシュボード（Dashboard）画面です。
書き出された画面をダブルクリックすると、画面ごとの詳細ページへ移動する事ができます。
違いがわかりにくいですが、こちらが詳細画面。
画面左下にある砂時計アイコンを押すと…。
コミットメッセージを確認する事ができます。
ちなみに、こちらはバージョン履歴欄です。
画面を更新するたびに履歴が蓄積されて、ここから各バージョンを確認する事ができます。
これで、Adobe XDからZeplinへのエクスポート作業が完了しました。
画面を更新する場合
すでに書き出し済みの画面を更新する場合も同様の操作で行いますが、Zeplinは、Adobe XD画面とのペアリングを以下の二種類、いずれかの方法で判断しています。
・画面の名称による判断
・Adobe XDのアートボード単位での判断
画面の名称による判断
Zeplin上での画面名と、Adobe XD上での画面名が一緒であれば、両者は同画面であるとする考え方です。
例えば、先程の画面をレンちゃんからペンタに変更します。
その際にアートボードの名称も「HOME」から「HOME_2」に変更してZeplinにエクスポートすると…。
それぞれが別の画面として認識されます。
これを回避するには、Zeplin側の画面名とAdobe XD側の画面名を揃えておく必要があります。
Zeplin側で書き出した画面の名称は、ダッシュボード上で画面を右クリック→「Rename Screen」から変更することができます。
Adobe XDのアートボード単位での判断
もう一つの方法は、Adobe XDのアートボードを基準とした判別です。
こちらも、先程と同様の条件でエクスポートしてみます。
・画像をペンタに変更
・アートボード名を「HOME_2」に変更
この時に、ダイアログ左下のアイコンから「Update Screens By」→「Corresponding Artboard in Adobe XD」を選択すると…。
画面が上書きされます。
「Update Screens By」→「Name」を選び直せば、最初に紹介した「画面の名称による判断」に戻すことができます。
更新方法を2種類紹介しましたが、個人的には前者の方がわかりやすいかな、と思います。
どちらにしても、意図しない画面を上書きしないよう注意が必要ですよね。
まとめ
Adobe XDからZeplinへ画面をエクスポートする方法をご紹介しました。
- Zeplin側では、デスクトップアプリを用意してプロジェクト作成まで済ませておく
- Adobe XD側では、プラグイン「Zeplin for XD」をインストールしておく
- Adobe XDで画面を作成したら、インストールしたプラグインを使ってZeplinへエクスポートする
- エクスポート時には、コミットメッセージをつけることも可能
- Zeplin側の画面とAdobe XD側の画面のペアリングの考え方は2種類あるので、自分がわかりやすい方を選択する
デザイナー側からすると、正直Zeplinのありがたさはそれほど感じられないわけですが、エンジニアさんの作業効率が良くなると言う事であれば、積極的にマスターしていきたいですよね。
ドキュメントが少なかったり英語だったりして情報が得られにくいZeplin。私も引き続き勉強していきます。
