🧩 1️⃣ ハンドオフ前の準備（5分）
まず、開発者が見やすいように整理します：
各画面（Frame）にわかりやすい名前をつける
例：Login, Home, Profile
不要なレイヤーやテスト用要素を削除
コンポーネントやスタイルを整備（色・文字スタイルを登録済みにしておく）
💡Tip：命名規則を統一（例：btn/primary, text/titleなど）
🧭 2️⃣ 「Inspect（検査）」タブを開く（10分）
任意のオブジェクト（ボタン・テキストなど）を選択
右サイドバーのタブを切り替え：
Design
Prototype
👉 Inspect（検査）
すると以下の情報が自動で表示されます👇
項目 内容
Position / Size X, Y 座標・幅・高さ
Typography フォント、サイズ、行間、文字間、太さ
Color カラーコード（HEX / RGBA）
Border / Radius / Shadow 枠線や角丸、影など
CSS / iOS / Android コード 各環境での実装用コード
例：
button {
background-color: #FAF0E6;
border-radius: 8px;
font-family: "Inter";
font-size: 16px;
padding: 12px 20px;
}
開発者はここを直接コピーできます ✨
🖼 3️⃣ 画像やアイコンの「書き出し」設定（10分）
書き出し対象の設定
アイコンや画像レイヤーを選択
右パネル下部の Export セクション → + をクリック
出力形式を選択：
PNG（汎用的）
SVG（アイコンなどベクター）
JPG（写真など）
PDF（印刷・資料用）
書き出しサイズの調整
倍率を設定できます：
1x（標準）
2x（Retina対応）
3x（高解像度）
💡Tip：iOSやAndroidアプリ用では 1x / 2x / 3x をまとめて出すことが多いです。
🪄 4️⃣ 開発者との共有（10分）
開発者モードで共有（最も便利！）
右上の 「Dev Mode（ アイコン）」 をクリック
リンク共有（右上の「Share」ボタン）
開発者にリンクを渡すだけでOK！
👀 開発者は：
Inspect情報を閲覧できる
画像・SVGをダウンロードできる
コードスニペットをコピーできる
※ 開発者は 無料Figmaアカウントでも閲覧可能（編集は不可）
🧾 5️⃣ 書き出しファイルの確認（10分）
選択したレイヤーを Command + Shift + E（Mac）または Ctrl + Shift + E（Win）
書き出し先を選択して保存
💡書き出し後にファイル名を自動で付けたい場合は：
レイヤー名を「icon/home」などにしておくと、書き出し時にフォルダ構造風に出力されます
⚙️ 6️⃣ チェックポイント（5分）
✅ Inspectで正しくスタイル情報が見えるか
✅ Export設定が正しく（PNG / SVG）されているか
✅ 開発者がDev Modeリンクでアクセスできるか
