Zeplinがかなり便利!Adobe XDやPhotoshopからデザインの指示書やスタイルガイドを簡単に自動作成できる

Webサイトやスマホアプリのデザインの指示書やスタイルガイドをわざわざ作成するのは時間がかかり、なかなか面倒です。Adobe XDやPhotoshopなどで作成したファイルから、Zeplinでこれらを自動生成する方法を紹介します。

Zeplinは1プロジェクトまで無料で利用できます。Adobe XDにもデザインスペックという機能でデザイン指示書を自動生成できますが、Zeplinの方が一枚上手だと思います。

Zeplinにファイルをインポート

ZeplinはAdobe XD, Photoshop, Sketch, Figmaに対応しており、ここではAdobe XDを使用して解説します。基本的な使い方は同じです。

準備: Adobe XDとZeplinのインストール

Adobe XDもZeplinもWindows版とmacOS版がリリースされており、無料で利用できます。
ダウンロードするには、どちらも登録(無料)が必要です。

サイトのキャプチャ

Adobe XD

サイトのキャプチャ

Zeplin
ダウンロード -Zeplin

無料版の仕様

機能的な制限はどちらもありません。制限は、数のみです。

Adobe XD 無料版の仕様
  • アクティブな共有プロトタイプ数: 1
  • アクティブな共有デザインスペック数: 1
Zeplin 無料版の仕様
  • プロジェクト: 1

Adobe XDでデザインを開く

今回は無料のUIキットを使用しました。

サイトのキャプチャ

Wires jp

日本語版のUIキットで、日本のWebサイトやスマホアプリで使用頻度が高いUI要素が揃っています。
webサイトやモバイルアプリのワイヤーフレームを作成する時に必要な構成要素の中で、日本でのワイヤーフレーム作成時に使用頻度が高い要素をWiresから厳選して再構築したUIキットです。ラベル等のテキストも日本のサイトらしさを意識して作成されています。

Wires jpをAdobe XDで開いたところ

Wires jpをAdobe XDで開いたところ

Adobe XDからZeplinにファイルをインポート

Zeplinにインポートしたいアートボードを選択し、メニューの「ファイル: 書き出し」から「Zeplin」を選択します。

Adobe XDのキャプチャ

「Zeplin」を選択

Zeplinに移動するので、インポートするプロジェクトを選択し、「import」ボタンをクリックします。

Zeplinのキャプチャ

「import」ボタンをクリック

これで選択したアートボードがZeplinにインポートされました。

Zeplinのキャプチャ

インポート完了

Zeplinは他のアプリにも対応

ZeplinはAdobe XD以外にも、Photoshop, Sketch, Figmaに対応しています。
下記からプラグインをダウンロードできます。

Zeplinでデザインの指示書・スタイルガイドを作成

Zeplinにインポートされたファイルでは、要素のレイアウト情報、カラー情報、文字情報など、XDにある機能も利用できます。

Zeplinのキャプチャ

Zeplinで、デザイン情報の表示

デザインの指示書に必要なのが、コメント機能。
Zeplinではcommand+クリックの簡単操作で、コメントを指定した場所に配置できます。XDも7月のアップデートでデザインスペックにコメントが加えられるようになりましたが、ブラウザでの操作なので快適さではZeplinに軍配があがります。

Zeplinのコメント機能

Zeplinのコメント機能

コメントはプレビュー画面に表示されるだけでなく、一覧で表示することもできるので、見落としてしまうことはないでしょう。

Zeplinのキャプチャ

コメントの一覧表示(右パネル)

共有した時に大切なのが、変更履歴です。
デザインを表示しながら履歴が確認できるのは、非常に嬉しい機能です。

Zeplinのキャプチャ

デザインの変更履歴(左パネル)

XDで「バッチ書き出しマーク」をオンにしておくと、画像密度別に複数のサイズの画像を書き出せます。

Zeplinのキャプチャ

画像の書き出し(右パネル)

カラー情報はデザイン情報にも表示されますが、一覧で表示することもできます。XDでもここまであまり変わらないですが、Zeplinではカラーやテキストのスタイルをまとめて、スタイルガイドを作成することができます。

Zeplinのキャプチャ

カラー情報(右パネル)

必要なカラーとテキストのスタイルをチェックすると、スタイルガイドが自動生成されます。カラーやテキストの情報だけでなく、CSSのコードも生成されます。

Zeplinのキャプチャ

スタイルガイド

sponsors

top of page

©2019 coliss