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

主な手順は？

Dev Modeを使わないFigma Handoff手順

デザイナーからFigmaファイルを共有された後、コーダーとして作業を開始する手順は、主に以下の3ステップです。

ステップ 1: CSSプロパティの取得（コード値の取得）

テキストのスタイル、ボタンの色、要素の影など、HTML/CSSで再現するすべての情報はこの手順で取得します。

No.	アクション	目的	取得方法
1.	要素の右クリック	要素のCSSコードを直接クリップボードにコピーする。	CSSコードを取得したい要素を右クリックし、メニューから「コピー/ペースト」 > 「コードとしてコピー」 > 「CSS」を選択します。
2.	手動での確認	複雑なプロパティ（グラデーションなど）やコンポーネントの構造を確認する。	要素を選択し、右側の「デザイン」パネルで「塗り」「線」「エフェクト」セクションを確認し、カラーコードや数値を手動で取得します。

ステップ 2: レイアウト情報の取得（サイズと余白の測定）

要素の幅、高さ、そして要素間のマージンやパディングを決めるための情報を取得します。

No.	アクション	目的	取得方法
1.	要素間の余白測定	マージンやパディングの値（要素間の距離）を取得する。	任意の要素を選択した状態で、キーボードのAltキー（Windows）またはOptionキー（Mac）を押しながら、別の要素にマウスカーソルを重ねます。正確なピクセル距離が赤線で表示されます。
2.	要素サイズの確認	要素（例：ボタン）の幅(width)と高さ(height)を取得する。	要素を選択し、右側パネルの「デザイン」タブにある「サイズ」セクション（WとH）の数値を確認します。

ステップ 3: 画像アセットのエクスポート

画像としてコーディングで使う素材（写真、ロゴ、背景、複雑なイラスト）をダウンロードします。

No.	アクション	目的	取得方法
1.	個別アセットの確認	デザイナーが設定したエクスポート設定を利用して画像をダウンロードする。	画像化したい要素を選択し、右側パネルを一番下までスクロールして「エクスポート」セクションを確認し、ダウンロード（エクスポート）を実行します。形式（PNG, JPG, SVG）と倍率（1x, 2x）が適切か確認しましょう。
2.	一括エクスポート	設定済みのすべての画像を一度にダウンロードする。	メインメニューの「ファイル」 > 「エクスポート」を選択、またはショートカットShift + Ctrl + E (Windows) / Shift + ⌘ + E (Mac)を実行します。一覧を確認し、一括でダウンロードします。
3.	追加のエクスポート設定	デザイナーが設定を忘れたり、画像化すべき範囲が不適切だった場合に調整する。	対象のレイヤーを選択し、「エクスポート」セクションの「+」ボタンを押して、形式と倍率を設定し、ダウンロードします。

この手順で、Dev Modeに依存することなく、コーディング作業を始めるために必要なすべての情報と素材をFigmaファイルから取得できます。