【2022年最新版】Adobe XDのデザインカンプからコーティング【データの書き出し方法】

※本サイトはアフィリエイト広告を利用しています。

【Adobe XDのデザインカンプからのコーディングに悩んでいる人】

 

こういった疑問に答えます。

この記事を書いている僕は、
過去にWeb制作のエンジニアをしており、
Adobe XDのデザインカンプから
データを書き出してコーディングをする
という作業をたくさん経験してきました。

Adobe XDは、Photoshopなど
他のAdobeソフトと比べ
かなり直感的に使えるので、
本記事を最後まで読めば、初心者の方でも
確実に操作方法をマスターできますよ。

Adobe XDのデザインカンプからコーティング【データの書き出し方法】

コーディングでほぼ必ず使う
下記3つのデータについて解説していきます。

• その①：要素の横幅・高さ、要素間の余白
• その②：テキスト情報
• その③：画像データ

その①：要素の横幅・高さ、要素間の余白

まずは、要素の『横幅』と『高さ』の取得方法から。
 
といっても、
こちらめちゃくちゃ簡単でして、
XDの左メニューから [選択]ツールを選び、
横幅・高さを知りたい要素をクリックするだけ。

 

すると上記のように、
画面右端に、横幅（W）と高さ（H）が表示されます。

要素の“大枠しか選択できない”場合の対処法

少し見づらいかもですが、
上の画面左のレイヤー一覧を見ると
今は [グループ01] を選択している状態です。
（※背景がうっすら青くなっています。）
 
しかし実際には、
このグループ内の要素
（※例えば、左上の画像など）
のサイズを知りたいことも多いでしょう。

その場合には、サイズを知りたい要素
の上にカーソルを合わせ、何回かダブルクリックしてみてください。
そうすることで、その要素に向けて
1つずつ下の階層に進み、いずれその要素が選択されます。

要素間の『余白』の取得方法

次に、要素間の余白（距離）の取得方法です。

まずは、[選択]ツールを選んだ状態で
余白（距離）を知りたい要素をクリックします。

そうしたら、あとは
option（Alt）キーを押したまま、
先ほどクリックした要素との距離
を知りたい要素の上にカーソルを乗せるだけ。

すると上記のように、
要素間の距離（28.7px）が表示されます。

その②：テキスト情報

次は、フォントサイズやフォントカラー
などの、テキスト情報を取得する方法です。

これも簡単で、データを取得したい文字エリアを選択するだけ。
すると、画面右側にそのテキスト情報が表示されます。

各値は、それぞれ以下のようになります。

• font-family：Yu Gothic
• font-weight：Bold
• font-size：24px
• line-height：1.17（28 ÷ 24px）
• letter-spacing：12px（24px × 0.5）
• color：#62a429（塗りのチェックが付いている箇所）

その③：画像データ

最後に、画像の書き出し方法です。

手順としては、以下の3ステップ。

• ステップ①：画像を選択し、書き出し対象にする
• ステップ②：ショートカットキーで書き出し条件の指定画面へ
• ステップ③：フォーマットなど条件を指定し画像を書き出す

ステップ①：画像を選択し、書き出し対象にする

まずは例のごとく、[選択]ツールで
書き出したい画像を選択し、
画面右下の『書き出し対象にする』に✓を入れます。

 

ステップ②：ショートカットキーで書き出し条件の指定画面へ

次に、以下のショートカットキー
を入力し、選択した画像を書き出す際の
詳細条件の指定画面を表示します。

• command（Ctrl）+ E

ステップ③：フォーマットなど条件を指定し画像を書き出す

ショートカットキーを入力すると
以下のような画面が表示されるので、
各項目を入力して画像を書き出します。

• 名前：任意のファイル名を入力。
• フォーマット：PNG・SVG・PDF・JPGから、任意の形式を選択。
• 書き出しサイズ：『2x』以上を推奨。『Web』は、1xと2x が書き出される。

ちなみに、書き出しサイズで
2倍以上を推奨しているのは、
等倍（1x）で書き出すと
画像がボヤけてしまうことが多いため。
 
なるべく融通の効くように
基本的には2x以上のサイズで
書き出すようにしましょう。

 

今回はこれで以上です！
 
Adobe XDと同じぐらい
デザインカンプによく使用される
Photoshopからのデータの書き出し方法
に関しても、以下の記事で解説してるので、
興味のある方はこちらも合わせてご覧ください。

≫ Photoshopのデザインカンプからコーディング【データの書き出し方法】

Photoshopのデザインカンプからコーディング【データの書き出し方法】

Photoshopデザインカンプからの、データの書き出し方法を知りたいですか？本記事ではPhotoshopの実際の画面を載せながら、コーディングに必要なデータの書き出し方法について解説しています。Photoshopデザインカンプからのコーディング方法が知りたい方は必見です。