【完全版】Adobe XDデザインカンプからのコーディング方法(無料デザインカンプ付き)

この記事で解決できるお悩み
  • XDからコーディングする方法を知りたい
  • コーディング初心者なので1から教えてほしい
  • XDソフト版と共有リンク機能の違いは?

Web制作の実案件では、依頼主から提供されたデザインを元にコーディングを行います。
そのためには、コーディング作業に必要なデザインツールの使い方を知っていなければなりません。

デザインツールには様々なものがありますが、中でもAdobe XDはコーディングに必要なデータを読み取りやすい特徴があり、多くのWeb制作会社で使用されています。また、初学者向けの教材などでもXDを使用しているものは多く、はじめに習得するデザインツールとしてもXDはおすすめです。

しかし、XDを元にコーディングするやり方を体系的に解説しているものはあまり多くなく、特にProgateを終えたばかりの初学者の方は迷ってしまいがちなポイントだと思います。

この記事では、Adobe XDデザインカンプからコーディングする方法を、初心者の方にもわかりやすく1から解説していますので、是非ご覧ください。
無料のXDデザインカンプを配布しているので、実際に手を動かしながら学ぶことも出来ます。

目次

XDカンプは2種類ある(デスクトップアプリ版 / 共有リンク版)

依頼主の方からデザインカンプとして提供されるXDデザインの形式には、①デスクトップアプリ版、②共有リンク版の2種類があります。
前提として、まずはこれら2つの形式の特徴や違いを押さえておきましょう。

①デスクトップアプリ版

自身のPCにインストールしたXDのデスクトップアプリを利用してデザインカンプを確認・編集する方法です。

クライアントから、拡張子が「.xd」の形式のファイルを提供された場合は、デスクトップアプリでそのデザインファイルを開く必要があります。

拡張子が「.xd」のXDファイル

XDのデスクトップアプリは以前まで無料版がありましたが、現在は無料版はありません。
また、XD単体で購入することも出来なくなっており、現在XDのデスクトップアプリを使用するためにはAdobe CCコンプリートプランを購入することが必須となっています。

Adobe CCコンプリートプランは公式サイトから通常価格で買うと結構なお値段なのですが、Adobeプラチナスクールパートナーを介して購入することで、3万円以上安く購入が可能です。(既に通常価格で購入済みの方でも使える方法です)
詳細は以下の記事で解説していますので、是非ご覧ください。

②共有リンク版

XDには、共有リンクというURLを発行する機能があります。
このURLを開くことで、XDアプリ本体を持っていない方でも、Web上でデザインを確認することができます。

クライアントからURL形式でXDデザインを提供された場合は、それが共有リンクになります。
(クライアントによって共有リンクにパスワードを設定している場合があります)

共有リンク機能はあくまでデザインを共有するための機能なので、デスクトップアプリ版と比較して使える機能に制限があります。

共有リンクで出来ないこと

  • デザインの編集
  • デザインからの画像書き出し
  • 1画面で複数ページを俯瞰的に見る(共有リンクは1画面に1ページしか表示できない)

特に「デザインからの画像書き出し」が出来ないことは大きなデメリットであり、画像素材の用意はクライアント(発注者)側にしていただく必要があります。(クライアント側もアイコンなどの細かい画像は見落としていることも多く、その度に書き出しを依頼しなければならないので手間がかかりやすいです)

また、「デザインの編集」は基本的にコーダーは行いませんが、邪魔な要素を一時的に非表示にしてデータを読み取ったり、マスク機能で特定の範囲を指定して画像を書き出したりなど、編集機能が使えた方が便利な場面は多くあります。

以上の点から、実務では可能な限りデスクトップアプリ版のデザインカンプ(XDファイル)を共有していただいて、コーディング作業を行うことを推奨します。

XDデザインカンプの無料配布

XDデザインデータをお持ちでない方のために、無料のXDデザインカンプを配布しています。

配布しているデザインのイメージは以下になります。

無料配布中のXDデザインカンプのイメージ

デスクトップアプリ版共有リンク版の2種類を用意しているので、必要な方は以下からダウンロードしてください。

デスクトップアプリ版(XDファイル形式)のダウンロードはこちら

https://morning-soap-0f1.notion.site/XD-8117cbff25e748f49cd6f4dca824b7ff?pvs=4

共有リンク版(URL形式)はこちらから

https://xd.adobe.com/view/9a6aaf19-b19e-4ac6-6719-441cbc071840-ec5b/
パスワード: Webspe123

共有リンク版を使用する場合、コメント機能を使用したコメント送信はご遠慮ください。

デザインを受け取ったら確認すること

デスクトップアプリ版の場合

デスクトップアプリ版のデザインカンプを受け取ったら、デザイン内で使用されているフォントが自身のPCに存在するか確認しましょう。

まずは、XD画面左下のメニューからライブラリ表示に切り替えます。

XDでライブラリ表示に切り替え

左サイドバーに「環境にないフォント」という表示がある場合、ここに記載されたフォントがPCにインストールされていません。

XDで「環境にないフォント」が表示されている例

この場合、代替フォントが適用されてデザインの正確な見た目が確認できないため、足りないフォントデータをインストールしましょう。

Google Fontsからインストールする例

Google Fontsにアクセスし、必要なフォント名を検索して、該当のフォントをクリックします。

Google Fontsでフォントを検索し、該当のフォントをクリック

フォント詳細ページに移動したら、右上の「Get font」ボタンをクリックしてください。

Google Fontsのフォント詳細ページで「Get font」ボタンをクリック

画面が遷移し、これまでに選択したフォントが一覧表示されます。
選択状態のフォントは、画面右上の(鞄)マークをクリックすることで、いつでも確認できます。

Google Fontsで選択したフォント一覧の表示例

他にも必要なフォントがある場合は、同様の手順でフォントを選択状態にしてください。

「Download all」ボタンをクリックで選択状態のフォントを一括ダウンロード、各フォントの右側のをクリックで個別にダウンロードが可能です。

Google Fontsで選択したフォントのダウンロード方法

ダウンロードしたフォルダを開き、「.ttf」形式のファイルをダブルクリックします。

Google Fontsからダウンロードしたフォルダ内

以下のようなウィンドウが表示されるので、「インストール」をクリックします。

フォントのインストール画面

これで、フォントが自身のPCにインストールされました。
XDに戻り、環境にないフォントの表示がなくなっているか確認しましょう。
(Google Fontsからダウンロードしてきたファイル類は削除して大丈夫です)

※ 上記の手順はあくまで、自身のPC(ローカルな環境)でフォントを使用するためのものなので、公開するWebサイト側には別途フォント読み込みのための対応(scriptタグ埋め込みなど)が必要です。

共有リンク版の場合

共有リンク版のデザインを受け取った場合、① 開発モードが有効化されているか② 画像素材の用意があるかを確認しましょう。

① 開発モードが有効化されているか

共有リンクからコーディングに必要なデータを読み取るためには、共有リンク発行時に開発モードが有効化されている必要があります。

共有リンクを開き、右サイドメニューに</>のアイコンが表示されていれば、開発モードが有効です。
こちらをクリックすることで、コーディングに必要な各データを取得できる開発モードに切り替わります。

共有リンクの開発モードへの切替えボタン

もし上記のような表示がない場合は、デザイン作成者に問い合わせましょう。

② 画像素材の用意があるか

共有リンク上では、デスクトップアプリ版のような画像の書き出し機能がなく、デザイン作成者がアセットとして登録した画像のダウンロードのみ可能です。

アセットとして登録された画像は以下のように表示され、ここからダウンロードできますが、登録されていない画像はダウンロードできません。その場合はクライアント側にアセット登録していただくか、別途画像ファイルを送信していただくことになります。

共有リンクに画像アセットが登録されている例

デスクトップアプリ版の使い方

ここから、デスクトップアプリ版のXDデザインを元にコーディングを行う方法を解説していきます。
(共有リンク版の使い方を知りたい方はこちら

画像の書き出し方法

まずは書き出したい対象の要素をクリックして選択状態(青い枠が表示された状態)にします。

XDで書き出す対象をクリック

画像に付いている角丸やドロップシャドウなどの装飾は、CSSで実装するのが望ましいです(理由は後ほど解説)。
そのため、これらの装飾は書き出しの時だけ解除しておきます。

XDで書き出し対象画像の装飾を解除

画像が選択された状態のままcommand ⌘+E(Windowsの場合Ctrl+E)とキーボード入力すると、以下のような画面が表示されます。

XDから書き出す画像の保存

書き出す画像のフォーマットをPNG / SVG / PDF / JPGの中から選択します。

XDから書き出す画像のフォーマット選択

フォーマットは、画像の特徴に応じて以下のように選択すると良いです。(画像フォーマットに関する詳しい解説はこちらの記事をご覧ください)

  • PNG:イラストやロゴなど、色数の少ない人工的な画像
  • SVG:アイコンやテキストなど、色が数色でシンプルな形状の図形
  • PDF:基本的に使用しない
  • JPG:写真など、色数の多い実写的な画像

JPGを選択した場合は、書き出す画像の画質を設定できます。100%だとファイル容量が重くなりやすいので、80%程度がおすすめです。(最終的には自分の目で画質に問題ないかチェックしましょう)

XDから書き出すJPG画像の画質選択

PNGJPGを選択した場合、画像の書き出しサイズを選択します。1xなら等倍サイズ、2xなら2倍サイズで画像が書き出されます。

XDから書き出す画像のサイズ選択

高解像度ディスプレイ対策のため、「2x」を選択して2倍サイズで書き出しましょう。(詳しい理由はこちらの記事で解説しています)

注意点① 画像の装飾(角丸やドロップシャドウ等)は含めずに書き出す

画像に付いている角丸やドロップシャドウなどの装飾は書き出す画像には含めず、CSSで実装しましょう。
理由は以下の通りです。

  • JPGの場合、透明度を扱えないため、角丸やドロップシャドウを表現できない
  • ドロップシャドウを含む画像は、影の領域分だけデザイン上の画像サイズより大きくなってしまう(widthやmarginなどの計算が面倒になる)
  • 後に画像を差し替える場合に、加工した画像を用意しなくて済む

・角丸つきで書き出したJPG画像の例

JPGの場合、角丸で削られた領域が塗り潰されてしまう

・ドロップシャドウつきで書き出したPNG画像の例

ドロップシャドウの領域分だけ画像サイズが大きくなってしまった

注意点② テキストのSVG化はアウトライン化が必要

テキストをSVG画像として書き出す場合は注意が必要です。

SVGとして書き出したテキストに使用されているフォントが閲覧ユーザーのデバイスに存在しない場合、違うフォントが適用されてSVG画像の見え方が変わってしまいます。そのため、テキストを文字情報から図形に変換する「アウトライン化」をする必要があります。

アウトライン化の手順はとても簡単です。
まずはSVG画像として書き出したいテキストをクリックして選択します。

SVGとして書き出すテキストを選択

テキストを選択状態のまま、command ⌘+8(WindowsはCtrl+8)とキーボード入力すれば、アウトライン化できます。
レイヤーを確認した際に、テキストが「パス」に変換されていれば、アウトライン化成功です。

アウトライン化すると、テキストがパス(図形)に変換される

要素情報の取得

幅や高さ、背景色など、その要素自身の情報を読み取る方法です。
情報を取得したい要素をクリックして選択状態にすると、右側にその要素の各情報が表示されます。

選択した要素に関する各情報が表示される

主に以下の要素情報を読み取ることができます。

  • 幅と高さ(width, height)
  • 回転(transform: rotate)
  • 不透明度(opacity)
  • 背景色(background-color)
  • ボーダー(border)
  • 角丸(border-radius)
  • 影(box-shadow, filter: drop-shadow)

幅と高さ(width, height)

要素の幅(width)と高さ(height)の値はそれぞれ、W, Hと記載された箇所から取得できます。

XDにおけるwidth, heightの表示箇所

記入例:

width: 600px;
height: 400px;

回転(transform: rotate)

下画像の赤枠部分が0°でない場合は、要素の回転度合いが指定されています。

XDにおける回転度の表示箇所

記入例:

transform: rotate(45deg);

不透明度(opacity)

アピアランスの値が100%でない場合は、要素の不透明度が指定されています。

XDにおける不透明度の表示箇所

記入例:

opacity: 0.75;

背景色(background-color)

「塗り」と記載されたエリアのボックスをクリックすることで、要素の背景色を取得できます。

XDにおけるカラーの表示箇所(Hex表示)

記入例:

background-color: #FFFFFF;

色が透過されている(不透明度が100%でない)場合、「Hex」を「RGB」に切替え、rgba形式で色指定します。

XDにおけるカラーの表示箇所(RGB表示)

記入例:

background-color: rgba(255, 255, 255, 0.5);

ボーダー(border)

「線」と記載されたエリアのカラーボックスをクリックするとボーダー色(border-color)を、サイズからボーダー幅(border-width)を取得できます。

XDにおけるボーダーの表示箇所

記入例:

border: 1px solid #2099EB;

角丸(border-radius)

下画像の赤枠部分が0でない場合、角の丸み(border-radius)が指定されています。

XDにおける角丸の表示箇所

記入例:

border-radius: 20px;

下記の通り、4つの角にそれぞれ違う値が指定されている場合もあります。

XDにおける角丸の表示箇所(4つの角に異なる値)

記入例:

border-radius: 20px 20px 0 0;

影(box-shadow, filter: drop-shadow)

「ドロップシャドウ」にチェクマークが入っている場合、要素の影が指定されています。
(通常はbox-shadowを、PNG画像など透過性のある要素に影をつける場合はfilter: drop-shadowを指定します)

XDにおけるドロップシャドウの表示箇所

記入例:

box-shadow: 0 3px 20px rgba(0, 0, 0, 0.4);
  /* or */
filter: drop-shadow(0 3px 20px rgba(0, 0, 0, 0.4));

要素間の距離(余白)の取得

基準となる要素をクリックして選択状態にし、option ⌥ キー(Windowsの場合Altキー)を押しながら距離を測りたい対象にマウスカーソルを合わせると、2つの要素間の距離が表示されます。

margin

XDでmarginを取得する例

記入例:

margin-top: 40px;

padding

XDでpaddingを取得する例

記入例:

padding: 15px 69px;

文字情報の取得

テキスト要素をクリックして選択状態にすると、文字情報を含む各情報が右側に表示されます。

XDで文字情報を取得するテキストを選択

テキスト関連の以下のCSSプロパティに相当するデータを取得できます。

  • font-family
  • font-size
  • font-weight
  • text-align
  • line-height
  • letter-spacing
  • color

font-family

XDにおけるfont-familyの表示箇所

記入例:

font-family: "Outfit", sans-serif;

font-size

XDにおけるfont-sizeの表示箇所

記入例:

font-size: 40px;

rem表記にする場合、対象テキストのfont-sizeを、ルートのhtml要素のfont-sizeで割った値になります。
(上の画像の場合、html要素のfont-sizeが16pxなら、40 / 16 = 2.5rem)

記入例:

font-size: 2.5rem;

font-weight

XDにおけるfont-weightの表示箇所

記入例:

font-weight: bold;
  /* or */
font-weight: 700;

text-align

XDにおけるtext-alignの表示箇所

記入例:

text-align: left;

line-height

行送り(行の高さ)を指定するプロパティです。

XDにおけるline-heightの表示箇所

XD上ではpx単位で表記されていますが、line-heightの値は倍率(行送りの値 / フォントサイズ)で指定することが推奨されます。上の画像の場合、line-heightは 32 / 16 = 2 となります。

記入例:

line-height: 2;

letter-spacing

文字の間隔を指定するプロパティです。
「AV」の値を使いますが、この値をそのままCSSに記述するわけではありません。

XDにおけるletter-spacingの表示箇所

letter-spacingに記述する値は、(AVの値 / 1000)という計算で求められます。(単位はem)
上の画像の場合、30 / 1000 = 0.03em となります。

記入例:

letter-spacing: 0.03em;

color

「塗り」と記載されたエリアのボックスをクリックすることで、文字色を取得できます。

XDにおけるカラーの表示箇所(Hex表示)

記入例:

color: #FFFFFF;

色が透過されている(不透明度が100%でない)場合、「Hex」を「RGB」に切替え、rgba形式で色指定します。

XDにおけるカラーの表示箇所(RGB表示)

記入例:

color: rgba(255, 255, 255, 0.5);

ホバー・トグル状態の切替え

要素によっては、マウスホバー時など状態が変化した際の表示(ステート)が定義されている場合があります。

要素を選択した際に、右側のコンポーネントという領域を見れば、ステートが定義されているかわかります。(ステートが定義された要素は、選択すると緑の枠で囲われます)

XDで要素にステートが定義されている例

ステートは要素のバリエーション(状態変化)を表すものであり、以下の3種類があります。

  • 初期設定のステート(初期状態)
  • ホバーステート(マウスホバー時の状態)
  • トグルステート(ラジオボタン、チェックボックスなどがONの状態)

各ステートをクリックすることで、ステートを切り替えることができます。
(下の画像の例では、マウスホバー時にボタンの背景色が青に、文字色が白に変化しています。)

XDで要素のステートを切り替えた場合の表示例

画像のダウンロード方法

共有リンクを使用する場合、デザイン作成者が書き出し対象として登録した画像のみダウンロード可能です。
(書き出し対象への登録が漏れている画像がある場合、デザイン作成者に確認しましょう)

共有リンクを開き、開発者モード(スペックを表示)にした状態で、画面右側の「アセット」という部分に、そのページで使用されている画像素材が一覧表示されています。
(表示されていない場合は、ページの領域外の薄グレーの部分をクリックするか、再読み込みしてください)

XD共有リンクのアセット表示

書き出したい画像をクリックして選択すると右下にダウンロードウィンドウが表示されます。
画像アセットは複数選択することで、一括ダウンロードすることも出来ます。

XD共有リンクでダウンロードするアセットの選択

ダウンロード設定にて、「ビットマップアセットの形式」、および「ベクターアセットの形式」を選択します。
(ビットマップアセットは一般的な画像ファイル、ベクターアセットはテキストや図形などの素材です)

フォーマットは、画像の特徴に応じて以下のように選択すると良いです。(画像フォーマットに関する詳しい解説はこちらの記事をご覧ください)

  • PNG:イラストやロゴなど、色数の少ない人工的な画像
  • SVG:アイコンやテキストなど、色が数色でシンプルな形状の図形(ベクターアセットでのみ選択可能)
  • PDF:基本的に使用しない
  • JPG:写真など、色数の多い実写的な画像

※ JPG画像の場合、デスクトップアプリ版のような画質設定(圧縮)ができないため、そのまま使用するとファイル容量が重い場合があります。squooshなどを使用して画像を別途圧縮することを推奨します。

画像フォーマットを選択したら、[ダウンロード]ボタンをクリックすると画像がダウンロードされます。
画像はそれぞれ、等倍サイズと2倍サイズの2種類が書き出されます。ファイル名に@2xと付いているものが2倍サイズの画像です。(SVGには画像倍率の概念がないため1種類のみ)

XD共有リンクからダウンロードした画像

基本的には、高解像度ディスプレイ対策のため、2倍サイズの画像を使用することが推奨されます。
(詳しい理由についてはこちらの記事をご覧ください)

要素情報の取得

幅や高さ、背景色など、その要素自身の情報を読み取る方法です。
情報を取得したい要素をクリックして選択状態にすると、右側にその要素の各情報が表示されます。

共有リンクで情報を取得したい要素を選択

主に以下の要素情報を読み取ることができます。

  • 幅と高さ(width, height)
  • 回転(transform: rotate)
  • 不透明度(opacity)
  • 背景色(background-color)
  • ボーダー(border)
  • 角丸(border-radius)
  • 影(box-shadow, filter: drop-shadow)

幅と高さ(width, height)

要素の幅(width)と高さ(height)の値はそれぞれ、W, Hと記載された箇所から取得できます。

共有リンクにおけるwidth, heightの表示箇所

記入例:

width: 600px;
height: 400px;

回転(transform: rotate)

下画像の赤枠部分が0°でない場合は、要素の回転度合いが指定されています。

共有リンクにおける回転度の表示箇所

記入例:

transform: rotate(270deg);

不透明度(opacity)

不透明度の値が100%でない場合は、opacityの指定が必要です。

共有リンクにおける不透明度の表示箇所

記入例:

opacity: 0.45;

背景色(background-color)

「カラー」と記載されたエリアのボックスをクリックすると、カラーコードをコピーできます。

共有リンクにおけるカラーの表示箇所(Hex表示)

記入例:

background-color: #333333;

色が透過されている(不透明度が100%でない)場合、「Hex」を「RGBA」に切替え、rgba形式で色指定します。

共有リンクにおけるカラーの表示箇所(RGBA表示)

記入例:

background-color: rgba(0, 0, 0, 0.45);

ボーダー(border)

「線」と記載されたエリアのカラーボックスをクリックするとボーダー色(border-color)を、サイズからボーダー幅(border-width)を取得できます。

共有リンクにおけるボーダーの表示箇所

記入例:

border: 1px solid #2099EB;

角丸(border-radius)

アピアランスの中に以下の赤枠のような表示があれば、角の丸み(border-radius)が指定されています。

共有リンクにおける角丸の表示箇所

記入例:

border-radius: 20px;

影(box-shadow, filter: drop-shadow)

アピアランス内に「ドロップシャドウ」の表示があれば、要素の影が指定されています。
(CSSに記載する場合、通常はbox-shadowを、PNG画像など透過性のある要素に影をつける場合はfilter: drop-shadowを指定します)

共有リンクにおけるドロップシャドウの表示箇所

記入例:

box-shadow: 0 3px 20px #00000065;
  /* or */
filter: drop-shadow(0 3px 20px #00000065;

要素間の距離(余白)の取得

基準となる要素をクリックして選択状態にしたまま、距離を測りたい対象の要素にマウスカーソルを合わせることで、2つの要素間の距離が表示されます。

margin

共有リンクでmarginを取得する例

記入例:

margin-top: 40px;

padding

共有リンクでpaddingを取得する例

記入例:

padding: 15px 69px;

文字情報の取得

テキスト要素をクリックして選択状態にすると、文字情報を含む各情報が右側に表示されます。
「コンテンツ」の部分をクリックすることで、テキストをコピーすることも可能です。

共有リンクで文字情報を取得する要素の選択

テキスト関連の以下のCSSプロパティに相当するデータを取得することができます。

  • font-family
  • font-size
  • font-weight
  • text-align
  • line-height
  • letter-spacing
  • color

font-family

共有リンクにおけるfont-familyの表示箇所

記入例:

font-family: "Outfit", sans-serif;

font-size

共有リンクにおけるfont-sizeの表示箇所

記入例:

font-size: 28px;

rem表記にする場合、対象テキストのfont-sizeを、ルートのhtml要素のfont-sizeで割った値になります。
(上の画像の場合、html要素のfont-sizeが16pxなら、28 / 16 = 1.75rem)

記入例:

font-size: 1.75rem;

font-weight

共有リンクにおけるfont-weightの表示箇所

記入例:

font-weight: bold;
  /* or */
font-weight: 700;

text-align

共有リンクにおけるtext-alignの表示箇所

記入例:

text-align: left;

line-height

行送り(行の高さ)を指定するプロパティです。

共有リンクにおけるline-heightの表示箇所

XD上ではpx単位で表記されていますが、line-heightの値は倍率(行送りの値 / フォントサイズ)で指定することが推奨されます。上の画像の場合、line-heightは 32 / 16 = 2 となります。

記入例:

line-height: 2;

letter-spacing

文字の間隔を指定するプロパティです。
スタイルの中の「AV」という部分に記載されています。

共有リンクにおけるletter-spacingの表示箇所

共有リンク上ではpx単位で表記されていますが、CSSにはem単位で記載することが推奨されます。
em単位の値は、(AVの値 / フォントサイズ)の計算で求められます。(上の画像の例では、0.48 / 16 = 0.03em となります)

記入例:

letter-spacing: 0.03em;

color

「カラー」と記載されたエリアのボックスをクリックすると、カラーコードをコピーできます。

共有リンクにおけるカラーの表示箇所(Hex表示)

記入例:

color: #333333;

色が透過されている(不透明度が100%でない)場合、「Hex」を「RGBA」に切替え、rgba形式で色指定します。

共有リンクにおけるカラーの表示箇所(RGBA表示)

記入例:

color: rgba(0, 0, 0, 0.45);

ホバー・トグル状態の切替え

要素によっては、マウスホバー時など状態が変化した際の表示(ステート)が定義されている場合があります。

要素を選択した際に、右側のコンポーネントという領域を見れば、ステートが定義されているかわかります。(ステートが定義された要素は、選択すると緑の枠で囲われます)

共有リンクで要素にステートが定義されている例

ステートは要素のバリエーション(状態変化)を表すものであり、以下の3種類があります。

  • 初期設定のステート(初期状態)
  • ホバーステート(マウスホバー時の状態)
  • トグルステート(ラジオボタン、チェックボックスなどがONの状態)

各ステートをクリックすることで、ステートを切り替えることができます。
(下の画像の例では、マウスホバー時にボタンの背景色が青に、文字色が白に変化しています。)

共有リンクで要素のステートを切り替えた場合の表示例

まとめ

Adobe XDデザインカンプからコーディングを行う方法について解説しました。

数あるデザインツールの中でもXDはコーディングがしやすく、使用人口も多いため、まずはじめに習得しておくことをおすすめします。この記事が一人でも多くの初学者の役に立てたら嬉しいです。

これから本格的に実案件に臨む方は、XDデスクトップアプリ版やPhotoshop等を使用するためにも、Adobe CCコンプリートプランへ加入しましょう。
Adobe CCコンプリートプランを3万円以上安く購入する方法を、以下の記事で解説しています。

内容が良かったらSNSでシェアしていただけると嬉しいです!
目次