Zeplinとは？
AdobeXDやPhotoshop等と連携し、デザインデータを解析して色や要素間の距離などを可視化してくれるツールです。
2倍3倍サイズの素材書き出しやスタイルガイドの作成まで可能で、デザインから開発への受け渡しコストを大幅に削減できます。
有料ツールですが、1プロジェクトまでは無料で使うことができます。
ここではZeplinのインストールから基本的な使用方法までを紹介していきます。
Zeplinのインストール
下記サイトより会員登録し、OSに合わせてクライアントアプリをダウンロード、インストールします。
Webアプリとしても使用できるようですが今回はMac用のクライアントアプリをインストールしました。
Zeplin: https://app.zeplin.io/
Zeplinプロジェクトの作成
Zeplinを立ち上げるとログイン画面が表示されるので先程登録した内容でログインします。
Photoshop用Zeplinプラグインのインストール
Photoshopと連携するにはZeplinが用意しているPhotoshop用のプラグインをインストールする必要があります。
メニューのZeplin > Photoshop Integration > Install Pluginからプラグインをインストールしましょう。
※PhotoshopはCC 2015以降のバージョンである必要があります
プラグインのインストールが完了するとPhotoshopにてメニュー > ウィンドウ > エクステンション > Zeplin を選択するとZeplinパネルが表示できるようになります。
Zeplinへエクスポート
対象のPhotoshopデータを開きZeplinパネルにて「Export selected artboard to Zeplin」を選択するとZeplinにデータがエクスポートされます。エクスポートされたデータをZeplinを見ると、下記のようにデザインデータを自動で解析し、要素のサイズ、要素間の距離、フォントやフォントサイズ、カラー等コーディングに必要な様々な情報を表示してくれます。
素材の書き出し
素材の書き出しもZeplinで出来ます。2倍、3倍サイズのデータもまとめて書き出してくれるので非常に便利です。
Photoshopにて書き出したいレイヤーを選択し、Zeplinパネルにて「Mark as asset」を選択しアセットに登録します。アセットにはまとめて複数のレイヤーを登録できます。
アセットの登録が終わったら「Export selected artboard to Zeplin」を選択します。
「Replace screens with the same name」（上書き）にチェックを入れてエクスポートを行います。
ZeplinにてAssetsタブを開くと選択した素材が登録されていることがわかります。ここから登録した素材をダウンロードすることができます。
以上、Zeplinの使い方でした。うまく使いこなして開発効率を向上させたいですね。
