開発者への引き継ぎ（Dev Mode）

Dev Mode — デザインとエンジニアリングをつなぐ橋

Figma Dev Modeは、2023年にFigmaが正式リリースした開発者向け機能です。デザイナーが作成したデザインをエンジニアが実装する際、従来は「このボタンのパディングは何px？」「このフォントのweightは？」と逐一確認が必要でした。Dev Modeを使えば、エンジニアはFigmaを直接操作してすべての実装値を確認でき、CSSコードも自動生成されます。このレッスンでは、Dev Modeの各機能を実際の開発ワークフローに沿って解説します。

Figma Dev Mode — エンジニアが見るパネル構成

---

Dev Modeの有効化と切り替え

Dev Modeの起動方法

ツールバーにある「Dev Mode」の切り替えスイッチをクリックするか、ショートカット Shift + D でDev Modeに切り替えられます。Dev Modeに入ると、画面の見た目が通常のデザインモードとは変わり、コードパネルが右側に表示されます。

💡 Dev Modeは有料プランの機能で、利用するにはフルシートまたはDevシートが必要です。閲覧のみの権限ではDev Modeは使えません。プランや席種の条件は改定されることがあるため、最新の情報はFigma公式のヘルプで確認してください。

Dev Modeとデザインモードの違い

---

CSS確認方法

基本的なCSS確認手順

1. ◆Dev Modeに切り替える
2. ◆確認したい要素をクリックして選択する
3. ◆右パネルの「Code」タブに自動生成されたCSSが表示される
4. ◆コピーボタンでクリップボードにコピーする

生成されるCSSの内容

Figmaが自動生成するCSSには以下の値が含まれます。

レイアウト系:

• ◆display: flex / display: grid
• ◆width / height
• ◆padding
• ◆gap（Auto Layoutのスペーシング）
• ◆align-items / justify-content

スタイル系:

• ◆background / background-color
• ◆border-radius
• ◆border
• ◆box-shadow
• ◆opacity

テキスト系:

• ◆font-family
• ◆font-size
• ◆font-weight
• ◆line-height
• ◆letter-spacing
• ◆color

⚠️ FigmaのCSSはそのままコピーして使えるケースが多いですが、font-family のフォント名がWebフォントのものと若干異なる場合があります。必ず実際のCSSファイルのフォント名と照合してください。

---

寸法・間隔の確認（Inspect機能）

要素間の距離を計測する

Dev Modeで要素を選択した後、別の要素にマウスをホバーすると、2つの要素の間隔がピクセル値で表示されます。この機能により、「このカードとヘッダーの間隔は？」という質問をデザイナーに聞かなくても、エンジニアが自分で計測できます。

計測のコツ:

• ◆要素を選択した状態で Alt/Option キーを押しながら別の要素にホバーすると距離が表示される
• ◆親フレームとの距離を確認するには、フレームを選択した状態でパディング値を確認する
• ◆Auto Layoutを使ったフレームなら、GapとPaddingの値が右パネルに明示される

スタイルトークンの確認

要素にColor StylesやText Stylesが適用されている場合、Inspectパネルにトークン名が表示されます（Primary/500 など）。エンジニアはこのトークン名をコード内の変数名として使えるため、実装とデザインの命名を一致させられます。

---

アセット書き出し設定

Export設定の追加方法

デザインモードで画像・アイコン・イラストなど書き出したい要素を選択し、右パネル下部の「Export」セクションで「+」をクリックします。

主要な書き出し設定:

Dev Modeでのアセット書き出し

Export設定が完了した要素は、Dev Modeの「Export」パネルから一括ダウンロードできます。エンジニアはデザイナーに書き出しを依頼する必要がなく、自分で必要なタイミングで最新のアセットを取得できます。

💡 アイコンは原則SVG形式で書き出すことを推奨します。SVGは拡大縮小しても劣化せず、CSSで色を変更できるため、状態変化（ホバー時に色が変わるアイコンなど）の実装に柔軟に対応できます。

---

開発者コラボレーション

コメント機能の活用

Dev ModeでもFigmaのコメント機能（C キーでコメントツール起動）を使えます。エンジニアが「このアニメーションのeasing関数は？」「このフォントはGoogleフォントのどれ？」といった質問をコメントとして残すと、デザイナーに通知が届きます。

効果的なコメントの書き方:

• ◆質問は具体的に（「何px？」より「ボタンとテキストの間隔は何px？」）
• ◆スクリーンショットより要素を直接選択してコメントを添付する
• ◆解決したコメントは「Resolve」マークをつけて閉じる

Figmaの閲覧権限を開発者に付与する

エンジニアがFigmaにアクセスできる方法は2つあります。

1. ◆Viewerとして招待 — 無料。ファイルを閲覧・コメントのみ可能。Dev Modeは使えない（利用にはDevシートなどの有料シートが必要）
2. ◆共有リンク（Anyone with link can view） — 最も手軽。アカウント不要で誰でも閲覧できる。社外への共有には注意が必要

---

ハンドオフチェックリスト

エンジニアにデザインを渡す前に確認すべき項目を網羅したチェックリストです。このリストをFigmaのDocumentationページに貼り付けておくことで、毎回の確認漏れを防げます。

必須チェック項目:

• ◆すべてのフレームに適切な名前がついている
• ◆コンポーネントのすべてのバリアント（Default / Hover / Disabled / Error）が存在する
• ◆Color Styles / Text Stylesが適用されている（ハードコードされていない）
• ◆書き出しが必要なアセットにExport設定が完了している
• ◆モバイル・タブレット・デスクトップの3サイズのフレームが揃っている
• ◆スクロール時の挙動が注釈または Prototype で示されている

推奨チェック項目:

• ◆エラー状態・空状態（Empty State）の画面が用意されている
• ◆ローディング状態のUIが存在する
• ◆アクセシビリティ上の注意点（コントラスト比 4.5:1 以上など）がコメントされている
• ◆アニメーションが必要な箇所にEasing・Duration・方向が明記されている

⚠️ 「デザインの意図」はCSSコードだけでは伝わらないことがあります。特にアニメーション、マイクロインタラクション、スクロール時の動作は、Figmaのプロトタイプやコメントで補足説明を加えましょう。

---

🏋️実践ワーク

1. ◆前のレッスンで作成したコンポーネントライブラリのファイルを開き、Dev Modeに切り替えてください。
2. ◆Buttonコンポーネントをクリックし、右パネルに表示されるCSSをコピーしてテキストエディタに貼り付けてください。
3. ◆2つの要素を選択して間隔を計測し、その値をコメントで残してください。
4. ◆アイコンを1つ選択し、SVG形式のExport設定を追加してダウンロードしてください。
5. ◆ハンドオフチェックリストをFigmaのDocumentationページに作成し、各項目をチェックしてください。

📝まとめ

Dev ModeはデザイナーとエンジニアのコミュニケーションコストをCSSの自動生成・寸法確認・アセット書き出しによって大幅に削減する機能です。ハンドオフ前に必須・推奨チェックリストを確認し、エンジニアが自己解決できる情報をデザインファイルに揃えておくことが、高品質な実装につながります。次のレッスンでは、これまで学んだすべての知識を活かしたポートフォリオ制作に入ります。

---

よくある質問

FigmaのDev Modeは無料で使えますか？

Dev Modeは有料プランの機能で、利用する人ごとにフルシートまたはDevシートが必要です。閲覧権限（Viewer）のままではDev Modeを使えないため、実装を担当するエンジニアにはDevシートを割り当てます。

Dev Modeとデザインモードの違いは何ですか？

デザインモードは「作る」ためのモード、Dev Modeは「実装するために読む」ためのモードです。Dev Modeでは要素を選択するだけでCSS・寸法・アセットが確認でき、誤ってデザインを編集してしまう心配がありません。

開発者にFigmaファイルを共有するとき編集権限は必要ですか？

不要です。Devシートがあれば、編集権限なしでDev Modeの寸法確認・CSSコピー・アセット書き出し・コメントまで行えます。編集権限は誤操作のリスクとライセンス費用が増えるため、実装者にはDevシートでの共有が原則です。

学習を深める関連レッスン

• ◆デザインシステム構築 — Dev Modeで真価を発揮するトークン設計
• ◆レスポンシブデザイン — 実装を見据えたオートレイアウト設計