コーディングコストを大幅に削減するツールZeplinの使い方

  • このエントリーをはてなブックマークに追加
Zeplin

Zeplinとは?

AdobeXDやPhotoshop等と連携し、デザインデータを解析して色や要素間の距離などを可視化してくれるツールです。

2倍3倍サイズの素材書き出しやスタイルガイドの作成まで可能で、デザインから開発への受け渡しコストを大幅に削減できます。

有料ツールですが、1プロジェクトまでは無料で使うことができます。

ここではZeplinのインストールから基本的な使用方法までを紹介していきます。

Zeplinのインストール

下記サイトより会員登録し、OSに合わせてクライアントアプリをダウンロード、インストールします。

Webアプリとしても使用できるようですが今回はMac用のクライアントアプリをインストールしました。

Zeplin: https://app.zeplin.io/

 

Zeplinプロジェクトの作成

Zeplinを立ち上げるとログイン画面が表示されるので先程登録した内容でログインします。

zeplinサインアップ

 

Photoshop用Zeplinプラグインのインストール

Photoshopと連携するにはZeplinが用意しているPhotoshop用のプラグインをインストールする必要があります。

メニューのZeplin > Photoshop Integration > Install Pluginからプラグインをインストールしましょう。

※PhotoshopはCC 2015以降のバージョンである必要があります

 

zeplinでphotoshopプラグインをインストール

 

プラグインのインストールが完了するとPhotoshopにてメニュー > ウィンドウ > エクステンション > Zeplin を選択するとZeplinパネルが表示できるようになります。

 

Photoshopにでzeplinパネル

 

Zeplinへエクスポート

対象のPhotoshopデータを開きZeplinパネルにて「Export selected artboard to Zeplin」を選択するとZeplinにデータがエクスポートされます。エクスポートされたデータをZeplinを見ると、下記のようにデザインデータを自動で解析し、要素のサイズ、要素間の距離、フォントやフォントサイズ、カラー等コーディングに必要な様々な情報を表示してくれます。

zeplinでのデザインアナライズ

 

素材の書き出し

素材の書き出しもZeplinで出来ます。2倍、3倍サイズのデータもまとめて書き出してくれるので非常に便利です。

Photoshopにて書き出したいレイヤーを選択し、Zeplinパネルにて「Mark as asset」を選択しアセットに登録します。アセットにはまとめて複数のレイヤーを登録できます。

アセットの登録が終わったら「Export selected artboard to Zeplin」を選択します。

「Replace screens with the same name」(上書き)にチェックを入れてエクスポートを行います。

zeplinで素材のインポート

 

ZeplinにてAssetsタブを開くと選択した素材が登録されていることがわかります。ここから登録した素材をダウンロードすることができます。

zeplinで素材の書き出し

 

以上、Zeplinの使い方でした。うまく使いこなして開発効率を向上させたいですね。

 

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。