Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

こんにちは、現在Web制作歴3年のしょーごです。

今回は『Adobe XDからのコーディング方法』を解説していきます。

XDはとても直感的に操作できるので、そこまで難しくないと思います。

しょーご

今回は私が無料で配布しているXDカンプを例にしていきます。

この記事の反響

無料XDカンプはこちらから

XDのデザインカンプには２種類ある

①XDデータ

XDファイルをデザイナーから貰って、XDファイルをAdobe XDアプリで開いてコーディングしていく流れです。

XDアプリが必要ですが、無くても無料でダウンロードし使用することができます。

複数ページを一度に俯瞰できるので便利なのですが、

編集可能なので、下手に触って元のデザインを崩してしまう可能性があります。

②URLカンプ

クラウド上にデザインが保存されており、パスワードを入力すればXDソフトがなくてもデザインを開くことができます。

XDファイル版と違って編集できない分、下手に触って元のデザインを崩すリスクがないので、コーダー的には扱いやすいかもしれません。

1ページずつしか見れないので、全体を俯瞰することはできません。

デザインデータから取得するもの【XD,フォトショイラレ共通】

①XDデータからのコーディング

このようなファイルからXDデータを開いたなら、それは『XDデータからのコーディング』になります。

①画像の取得

まずは取得したい画像を選択してください。

そこで、Windows民は【Ctrl + E】、Mac民は【Command + E】を押下。

すると、

このような画面になるはずです。

フォーマットに関しては、

書き出し先は『Web』、『倍率は1X』で問題ないです。

これで画像を書き出すことができます。

各要素の詳細確認

フォントはダブルクリックでコピペしたり編集できるようになります。

フォント周りの確認

colorはクリックすると確認することができます。

ちなみにシャドウの透明度は無視されがちですが、忘れると全く違う色になるので、注意。

幅と高さ

余白の取得はWindows民は『Altを押しながらホバー』　Mac民は『optionを押しながらホバー』をするといいです。

②URLカンプからのコーディング

URLカンプからのコーディングの場合は、大抵このようなパスワード管理されたページから開いていると思います。

各要素の詳細確認

URLカンプの場合も詳細情報は右側に出ています。

画像のダウンロード

画像を複数選択すれば、一気に複数ダウンロードすることができます。

WIndows民は『Altを押しながらクリック』Mac民は『optionを押しながらクリック』すればいいです。

各要素の取得

テキストは『コンテンツ』の部分をクリックするだけでコピーすることができます。

フォント周りの確認

ちなみにたまに#00000029みたいなカラーコードを見るかもですが、RGBAで指定するとデザイン通りになります。

CSSは当てにならない、参考程度に

ここに出力されるCSSはあくまで参考程度に見ましょう。というかほぼ見なくてもいいかなと。

余白

基本的にクリックするだけなので、XDデータからのコーディングよりも楽です。

要素の幅と高さ

これもクリックするだけでわかります。

XDは直感的で難しくない

実際に触ってみるとすぐに慣れることができます。

デザインデータの数値に厳密にコーディングを行うためにも、しっかりと使い方を練習しておきましょう！

\\\コーディング教材公開中///

HTML初心者からWordPress実案件レベルまでのコーディング演習課題をnoteで公開しています。

1. XD,PSDデザインからのコーディング
2. 2回の表示確認特典
3. ポートフォリオOK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編はWordPressの実案件を模擬体験できるレベル感にしています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります！

さらに、まとめて購入していただくとかなりお得になります。

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください！！

コーディング教材販売ページへ

各教材の解説ページへ