Adobe XDのデザインカンプからコーディングに必要な画像や値を取得する方法

WebコーダーはAdobe XDを完全に扱える必要はありませんが、コーディングに必要な値やデータを取得できなければなりません。

この記事ではXDのデザインカンプからコーディングする際に必要な値や画像を取得する方法を紹介していきます。

Photoshop、Illustratorに比べると、XDはめっちゃ操作が簡単です！！！

たぶん説明するまでもなくポチポチやってれば理解できると思いますが、ザッと操作方法をおさらいしておきましょう！

📝 XDからのコーディング時によく使うショートカット

✅ 選択ツール → V
✅ グループ化 → Ctrl + G（解除は + Shift）
✅ アセット書き出し → Ctrl + E
✅ 距離測る → Vでオブジェクト選択 → alt押しながら別のオブジェクトにホバー
※ ほぼこれ

XDは楽すぎる…。

— はにわまん (@haniwa008) 2018年10月15日

XDから画像素材を書き出す

XDから画像を書き出しは、対象のオブジェクトを選択した状態（選択ツールでクリック）で、メニュー → 書き出し → 選択済み になります。

ショートカットを覚えた方が圧倒的に早いので、Ctrl + Eを確実に覚えて起きましょう！

ポップアップが表示されるので、条件を変更して保存しましょう。「書き出し形式」だけは確実に「Web」を選びます。

それぞれの設定項目は以下のような意味になります。ちょっとだけ頭を使うのは「形式」を「pngかsvgかjpgのどれにしようかな」って部分くらいかと思います。

形式	以下の3パターンが選べます。 png svg jpg
書き出し形式	Webサイトの制作なら「Web」の一択です。
設定サイズ	「1x」と「2x」が選べます。1倍か2倍って意味ですが、1倍を選んでも2倍のキャパがある画像なら2倍の画像も出力されます。特に気にせず「1x」でいいかと思います。
書き出し先	画像を保存するフォルダを選択してください。

必要な画像の分だけ、同様に書き出していきましょう！

XDから各種値を取得する

続いてはXDから色々な値を取得していく方法です。正確なコーディングをするには正確な値を取得しないといけません。

文字テキスト自体を取得

選択ツールの状態でダブルクリックすると文字の中に入ることができます。テキストツールに切り替えなくてもいい点が素晴らしいですね。

文字に関する値を取得

選択ツールで文字エリアを選択すると右のエリアに各種値が表示されます。

今回の例だと、それぞれ以下のような値になります。

• font-family → メイリオ
• font-weight → normal
• font-size → 16px
• line-height → 1.5（24px ÷ 16px）
• letter-spacing → 1.2px（16px × 0.75）
• color → #3C3C3C（塗りのチェック付いている箇所）

XDはシンプルに必要な情報しか出しませんし、かつ余計なパネルがないので、本当に直感的に使えると思います。

オブジェクトに関する値を取得

オブジェクトについても選択ツールで選択すると右のエリアに値が表示されます。XDに関してはほぼ全て選択ツール経由でいけます。

今回の例だと、それぞれ以下のような値になります。

• width → 360px
• height → 360px
• border → none
• border-radius → 8px
• background-color → #fff
• opacity → 1
• box-shadow → 0 0 5px 0 rgba(17, 51, 72, 0.2);

ちょっとザックリしすぎているので、もう少し細かく見ていきましょう。

幅や高さ

Wが幅、Hが高さにあたります。

ボーダー

border-radiusやborderが分かります。

border-radiusは全ての角が8px。borderは境界線にチェックが付いていないので「なし」という扱いでいいかと思います。

キャプチャに混ざってしまったので、、、背景色については、「塗り」の箇所の色が背景色に相当します。文字を選択している時の塗りは文字の色ですが、オブジェクトを選択している時の塗は背景色です。

ちょっとややこしいいかもしれませんが、選択しているものの色って考えると、そんなに困らないかと思います。

影

影の取得も分かりやすく出してくれています。

xがx軸の距離、yがy軸の距離、bがぼかしの距離、そして#113348の20%が影の色ということです。CSSの記述だとbox-shadow: 0 0 5px 0 rgba(17, 51, 72, 0.2);といった感じで表現できるはずです！

ちなみに、RGBの値へは簡単に変換できます。XD使いやすぅうう！

透過

透過は「不透明度」から見ることができます。

100%だと1で全く透過させていない状態です。

例えば、以下のように70%だとCSSの割合の表現だと0.7にあたります。

opacity: 0.7;であったりrgba(x, x, x, 0.7);といった感じの指定で表現します（xは該当の文字コードの数字が入ります）。rgbaが無難かもしれません。

余白の幅を取得

XDは余白の値を取得しやすいのが特徴だと思います。

余白を測りたい対象のオブジェクトを選択した状態で、Altを押しながら他のオブジェクトにホバーすれば、リアルタイムで画面上に余白の値を表示してくれます。

線ツールで測る

値が取りづらい箇所は線ツールで一時的に線を引いて、その線の距離から判断するということもやったりします。Lで線ツールに切り替えてドラッグすれば線は引けます。

右のエリアの「W」か「H」の値が線の長さになります。（横に引けば「W」、縦に引けば「H」）

この値を参考に大雑把に作っていくとおおよそ合うかと思います。

おわり

XDのデザインカンプからコーディングに必要な値を取得できる箇所を並べました。XDに関しては勉強とか前準備とかマジで必要ないほど直感で使えるようになっています。

マスターする一番早い方法はとにかく触ってみることだと思います。PhotoshopもIllustratorもXDで読み込めたりするので、XDに触り慣れていない方は手持ちのカンプをXDで起動してみてポチポチしてみてください！