デザイナーがXDで作ったデザインの画像をコーディングで使用する方法

ステップ1: 開発用リンクへのアクセス

1　リンクの受け取り: デザイナーから、XDファイルの閲覧・
インスペクト用の公開URL（Design Specs）を受け取ります。

2　ブラウザで確認: そのリンクをブラウザで開くと、デザインカンプが表示され、
右側のパネルがインスペクトモードになっています。

XDのブラウザビューワーの右側パネルを利用して、CSS情報（スタイル）を取得します。

1　要素の選択: カンプ上のテキスト、ボタン、背景など、スタイルを取得したい要素をクリックします。

2　右側パネルの確認: 右側のパネルに、その要素の**「外観」「テキスト」「レイアウト」**
などの情報が、CSSコードとして表示されます。

3　コードのコピー: 必要なCSSプロパティ
（background-color、font-size、border-radiusなど）の横にある
「コピー」ボタンをクリックして、エディタに貼り付けます。

XDでも、Figmaと同様に要素間の距離を簡単に測定できます。

対象要素の選択: 基準となる要素（例：ヘッダー）をクリックして選択します。

余白の測定: **Altキー（Windows）またはOptionキー（Mac）**を押しながら、
別の要素（例：ナビゲーション）にマウスカーソルを重ねます。

距離の確認: 要素間の正確な距離（マージンやパディングの値）がピクセル単位で表示されます。

コーディングで<img src="...">
として使用する画像（ロゴ、写真、アイコン）をダウンロードします。

1　アセットの選択: 画面左下の**「アセット」**パネル、
またはカンプ上のエクスポート対象要素をクリックします。

2　形式の確認: 右側パネルの「アセット」セクションに、
デザイナーが書き出し設定をしたアセットの一覧が表示されます。
デザイナーは、PNG、JPG、SVGなどの形式を設定しています。

3　ダウンロード: ダウンロードしたいアセットを選択し、
「エクスポート」ボタン（または一括ダウンロードのオプション）をクリックすると、
画像ファイルがダウンロードされます。