【Adobe XD】コーディングが捗る!ZeplinとXDを連携する活用方法

AdobeXDで使えるZeplinの使い方

みなさんこんにちは。Webデザイナーのしゅん(@shun_webdesign)です。

XDを使ってデザインを作る方も多いと思いますが、XDのデータからコーディングする際はどのようにしていますか?

Macを使ってる人は⌥キー(option)、Windowsの人はaltキーを押しながらマウスホバーすると、サイズを測ることができるのはご存知だと思います。

でも、いちいち押しながらサイズを測るのが面倒くさい…

という方も多いと思います。

そんな皆様に今回は便利なツール、Zeplinの使い方を紹介します。

XDで作成したデザインを効率よくコーディングが可能になります!

Zeplinとは?

Zeplinロゴ

XDなどのデザインツールで作成したデザインカンプをコーディングを行うコーダーに共有できるツールです。

作成したデザインをZeplinに読み込ませ、対象をクリックするだけで要素との距離、カラーコードやサイズがひと目でわかるようになります。

読み込んだデザインをURLで共有することもできます!

合わせて読みたい

【Adobe XD】脱初心者!サッと使える知っておくと便利なTips集 Quick Mockupでワイヤーフレームを作る 【Adobe XD】Quick Mockupを使って瞬時にワイヤーフレームを作る

Zeplinの使い方

操作手順
  1. Zeplinをインストール
  2. XD for Zeplinをインストール
  3. デザインカンプの準備
  4. デザインを読み込む
  5. Zeplinからコーディング
STEP.1
Zeplinをインストール

PCにZeplinをインストールします。

インストールはこちらから。

STEP.2
XD for Zeplinをインストール

ZeplinをXDで使うためにプラグイン「XD for Zeplin」をインストールします。

プラグインの検索画面もしくは、下記ボタンから。

「XD for Zeplin」をインストール

STEP.3
デザインカンプの準備

XDで作成したデザインカンプを用意してください。

今回は下記画像のデザインを読み込ませます。

STEP.4
デザインを読み込む

読み込ませたいアートボードを選択してください。

プラグイン一覧から「Zeplin for XD」→「Export Selected」をクリック。

Zeplinが起動し、ウィンドウが表示されるのでプロジェクトを選択して「Export」をクリックします。

STEP.5
Zeplinからコーディング

Zeplinの画面から先程選択したプロジェクトをクリック。

読み込んだアートボードが表示されているのでさらにクリックするとデザインの画面が表示されます。

対象をクリックすることでピクセルサイズが表示され、画面右側にテキスト、HTML/CSSコードが現れます。

コピーのアイコンをクリックすることでそのままのコードを貼り付けることが可能です。

まとめ:Zeplinを使う前に…

今回はXDで作成したデザインを効率よくコーディングできるツールZeplinについて以下を紹介しました。

  1. Zeplinをインストール
  2. XD for Zeplinをインストール
  3. デザインカンプの準備
  4. デザインを読み込む
  5. Zeplinからコーディング

Zeplinは使いこなせれば便利なツールです。

しかし、デザインとして不揃いな箇所も数値やコードとして現れる部分もあります。

デザイナーからコーダーへデザインを共有する際に使われるかたもいると思います。

共有する際はカンプをよく見直してから使ってみてください。

最後まで見ていただきありがとうございます!是非記事の共有をよろしくお願いします。

参考 Zeplin for Adobe XD プラグインを使ってデザインを共有しよう!Adobe Blog

 

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA