11 / 12

レッスン 11

本文約7分

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

※このページには広告（PR）リンクが含まれます

PRこのレッスンで使う:Audible ↗

🎯 このレッスンのゴール：最後の3問に答えられること

Dev Modeで生成されたCSSを使う前に、本文が実際のCSSとの照合を特に勧めている値はどれですか？
ホバー時に色が変わるアイコンを実装したい場合、本文が推奨する書き出し形式はどれですか？
ボタンのアニメーションの意図をエンジニアに正確に伝えたい場合、本文に沿った対応はどれですか？

本文は約7分で読めます。先に問題を頭に入れてから読むと、答えの箇所が見つけやすくなります。

すぐに問題に挑戦する ↓

▶

解説動画は無料登録で視聴できます

全26コース・260レッスンが完全無料。登録は1分、クレジットカードは不要です

無料登録して動画を見るアカウントをお持ちの方はログイン

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とデザインモードの違い

機能	デザインモード	Dev Mode
要素の編集	可能	読み取り専用
CSSコード表示	なし	自動生成
寸法・間隔の確認	可能	より詳細に表示
アセット書き出し	可能	設定済みのみ一括
コメント	可能	可能
Zoomレベル	自由	自由

CSS確認方法

基本的なCSS確認手順

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

生成される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」セクションで「+」をクリックします。

主要な書き出し設定:

形式	用途	推奨設定
PNG 1x	低解像度ディスプレイ向け	通常サイズ
PNG 2x	Retina/高解像度ディスプレイ向け	2倍サイズ
SVG	アイコン・ロゴ・シンプルイラスト	スケーラブル
WebP	Webパフォーマンス最適化	品質80〜90%
PDF	印刷物・プレゼン資料	高品質

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

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

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

開発者コラボレーション

コメント機能の活用

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

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

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

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

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

◆Viewerとして招待 — 無料。ファイルを閲覧・コメントのみ可能。Dev Modeは使えない（利用にはDevシートなどの有料シートが必要）
◆共有リンク（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のプロトタイプやコメントで補足説明を加えましょう。

🏋️実践ワーク

◆前のレッスンで作成したコンポーネントライブラリのファイルを開き、Dev Modeに切り替えてください。
◆Buttonコンポーネントをクリックし、右パネルに表示されるCSSをコピーしてテキストエディタに貼り付けてください。
◆2つの要素を選択して間隔を計測し、その値をコメントで残してください。
◆アイコンを1つ選択し、SVG形式のExport設定を追加してダウンロードしてください。
◆ハンドオフチェックリストを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で真価を発揮するトークン設計
◆レスポンシブデザイン — 実装を見据えたオートレイアウト設計

理解度チェック

3問

全問正解でこのレッスンが「完了」になり、コースの全レッスンを完了すると修了証が発行されます。何度でも挑戦でき、全問正解すると全問の解説が読めます（不正解のときは正解した問題の数だけ表示され、30秒後に答え直せます）。

Q1.Dev Modeで生成されたCSSを使う前に、本文が実際のCSSとの照合を特に勧めている値はどれですか？
Q2.ホバー時に色が変わるアイコンを実装したい場合、本文が推奨する書き出し形式はどれですか？
Q3.ボタンのアニメーションの意図をエンジニアに正確に伝えたい場合、本文に沿った対応はどれですか？

すべての問題に答えると押せます

「実践Webデザイン - Figma完全マスター講座」全12レッスンを無料で修了しよう

✓ 理解度チェックの採点と、合格レッスンの記録
✓ 全レッスン合格で修了証を発行（URLでシェア・LinkedInに追加できます）
✓ 全レッスンの解説動画と、続きから再開できる学習ダッシュボード

無料で受講をはじめる（1分）

完全無料・クレジットカード不要

このレッスンで使うツール・次の学び方 PR

Audible（Amazonのオーディオブック） ↗
ビジネス書・マーケティングの本を通勤中や家事の合間に聴いて学べる。プレミアムプランは30日間の無料体験あり（2026年11月時点）

運営者のサービス

自分で作るのが大変なら、制作を任せる方法もあります

運営者のオムニウェブでは、ホームページ制作を初期費用0円・月額1,000円〜で承っています。

ホームページ制作を相談する（無料） ↗