プログラミング

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

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

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

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

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

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

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

この記事の反響

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

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

①XDデータ

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

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

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

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

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

Windows7が入ってるような古いPCでたまにAdobe XDファイル開けないという人がいますが、流石に買い替えたほうがいいですね…

②URLカンプ

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

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

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

今回は両方からのコーディング方法を見ていきます。

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

  • 画像、アイコンなど
  • フォント情報
  • 余白
  • 影や丸み、色など

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

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

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

①画像の取得

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

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

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

すると、

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

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

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

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

  • PNGは『アイコンや透過画像など。容量が重くなりやすい』
  • SVGは『アイコンなどで、pngより画質が荒くならない、軽いなど特徴。ただしXFREEなど無料サーバーだと表示に対応してなかったり』
  • PDFは基本コーディングには使わない
  • JPGは『写真』。『写真=JPG』で基本問題ないはず。

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

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

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

各要素の詳細確認

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

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

フォント周りの確認

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】
  1. font-family
  2. font-size及びfont-weight
  3. line-height(font-size / 数値で計算、ここではline-heightは1.5となる)
  4. text-align
  5. color
  6. letter-spacing

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

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】
Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】
  1. border-radius
  2. box-shadow

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

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

幅と高さ

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

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

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

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

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

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

各要素の詳細確認

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

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

画像のダウンロード

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

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

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

各要素の取得

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

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

フォント周りの確認

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】
  1. font-family、font-weight
  2. font-size
  3. text-align
  4. letter-spacing
  5. line-height
  6. color
  7. opacity
Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】
色確認
box-shadow

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

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

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

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

余白

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

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】
30pxの余白がある

要素の幅と高さ

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

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

XDは直感的で難しくない

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

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

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

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

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

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

しょーご

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

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

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

あなたに是非読んでほしい記事です!