Zeplinがかなり便利！Adobe XDやPhotoshopからデザインの指示書やスタイルガイドを簡単に自動作成できる
Post on:2018年10月26日
sponsors
Webサイトやスマホアプリのデザインの指示書やスタイルガイドをわざわざ作成するのは時間がかかり、なかなか面倒です。Adobe XDやPhotoshopなどで作成したファイルから、Zeplinでこれらを自動生成する方法を紹介します。
Zeplinは1プロジェクトまで無料で利用できます。Adobe XDにもデザインスペックという機能でデザイン指示書を自動生成できますが、Zeplinの方が一枚上手だと思います。
ZeplinはAdobe XD, Photoshop, Sketch, Figmaに対応しており、ここではAdobe XDを使用して解説します。基本的な使い方は同じです。
準備: Adobe XDとZeplinのインストール
Adobe XDもZeplinもWindows版とmacOS版がリリースされており、無料で利用できます。
ダウンロードするには、どちらも登録（無料）が必要です。
無料版の仕様
機能的な制限はどちらもありません。制限は、数のみです。
- Adobe XD 無料版の仕様
-
- アクティブな共有プロトタイプ数: 1
- アクティブな共有デザインスペック数: 1
- Zeplin 無料版の仕様
-
- プロジェクト: 1
Adobe XDでデザインを開く
今回は無料のUIキットを使用しました。
日本語版のUIキットで、日本のWebサイトやスマホアプリで使用頻度が高いUI要素が揃っています。
webサイトやモバイルアプリのワイヤーフレームを作成する時に必要な構成要素の中で、日本でのワイヤーフレーム作成時に使用頻度が高い要素をWiresから厳選して再構築したUIキットです。ラベル等のテキストも日本のサイトらしさを意識して作成されています。
Wires jpをAdobe XDで開いたところ
Adobe XDからZeplinにファイルをインポート
Zeplinにインポートしたいアートボードを選択し、メニューの「ファイル: 書き出し」から「Zeplin」を選択します。
「Zeplin」を選択
Zeplinに移動するので、インポートするプロジェクトを選択し、「import」ボタンをクリックします。
「import」ボタンをクリック
これで選択したアートボードがZeplinにインポートされました。
インポート完了
Zeplinは他のアプリにも対応
ZeplinはAdobe XD以外にも、Photoshop, Sketch, Figmaに対応しています。
下記からプラグインをダウンロードできます。
- Photoshopのプラグイン -Zeplin
- Sketchのプラグイン -Zeplin
- Figmaはデフォルトの機能で備えています。
Zeplinでデザインの指示書・スタイルガイドを作成
Zeplinにインポートされたファイルでは、要素のレイアウト情報、カラー情報、文字情報など、XDにある機能も利用できます。
Zeplinで、デザイン情報の表示
デザインの指示書に必要なのが、コメント機能。
Zeplinではcommand+クリックの簡単操作で、コメントを指定した場所に配置できます。XDも7月のアップデートでデザインスペックにコメントが加えられるようになりましたが、ブラウザでの操作なので快適さではZeplinに軍配があがります。
Zeplinのコメント機能
コメントはプレビュー画面に表示されるだけでなく、一覧で表示することもできるので、見落としてしまうことはないでしょう。
コメントの一覧表示（右パネル）
共有した時に大切なのが、変更履歴です。
デザインを表示しながら履歴が確認できるのは、非常に嬉しい機能です。
デザインの変更履歴（左パネル）
XDで「バッチ書き出しマーク」をオンにしておくと、画像密度別に複数のサイズの画像を書き出せます。
画像の書き出し（右パネル）
カラー情報はデザイン情報にも表示されますが、一覧で表示することもできます。XDでもここまであまり変わらないですが、Zeplinではカラーやテキストのスタイルをまとめて、スタイルガイドを作成することができます。
カラー情報（右パネル）
必要なカラーとテキストのスタイルをチェックすると、スタイルガイドが自動生成されます。カラーやテキストの情報だけでなく、CSSのコードも生成されます。
スタイルガイド
sponsors
