【手順】Figma Dev Modeを制作現場で使う手順

FigmaのDev Modeは、デザインと実装の間の値を拾うための機能です。私はディレクションとコーディングを兼ねているので、デザイナーに渡す前のチェックと、自分でコーディングするときの両方で使います。全案件で必須ではありませんが、チーム制作では標準になりつつあります。この記事では、制作現場でDev Modeを使う手順と、見送り基準をまとめます。

先に結論

• 向いている人: デザインからコーディングする人。エンジニアとデザイナーの間に立つディレクター。コンポーネントベースのUIを実装する人。
• 向いていない人: 静的HTML1枚を画像見ながら書くだけの小規模案件。Figmaを使わないワークフローのチーム。
• 私のおすすめ: デザイン側でAuto Layoutと変数を整えてからDev Modeに渡す。実装側はブラウザの検証ツールと併用する。

この記事には、Google AdSense による広告およびアフィリエイトリンクが含まれる場合があります。紹介経由で購入や申し込みがあると、私に紹介料が入ることがあります。

Dev Modeでできること — 一覧

Dev Modeは「値を見る」モードです。デザインファイルを編集するモードではありません。デザイナーは通常のデザインモード、実装側はDev Mode、という役割分担が基本です。

導入前にデザイン側で整えること

Dev Modeが効くのは、Auto Layout、コンポーネント、スタイル（色・テキスト）が整理されたファイルです。グループだけで雑に置かれたデザインだと、寸法が信頼できません。導入前チェックリストです。

1. ページとフレームの命名が意味を持っているか。
2. 繰り返しUIはコンポーネント化されているか。
3. 色とテキストはスタイルまたは変数に紐づいているか。
4. レスポンシブの意図がフレームまたは注釈で伝わるか。
5. 画像は適切な解像度で配置されているか。

私は実装に入る前に、デザイナーと15分だけ画面共有で「このフレームが実装の正」と合意します。認識ズレがここで減ります。

Dev Modeの基本操作手順

1. Figmaファイルを開き、右上またはショートカットでDev Modeに切り替える。
2. 左パネルで対象フレームまたはコンポーネントを選択する。
3. 右パネルで寸法、色、フォント、エフェクトを確認し、必要な値をコピーする。
4. アイコンや画像は Export 設定に従って書き出す。SVGはパスが複雑すぎないかプレビューで確認。
5. バリアントがあるコンポーネントは、状態ごとに値を確認する（hover、disabledなど）。
6. 不明点はFigmaコメントに残し、@メンションでデザイナーに確認する。

コピーした値をそのままCSSに貼るのではなく、プロジェクトのデザイントークン（CSS変数やTailwind設定）にマッピングするのが現場では一般的です。

実装ワークフローとの接続

私の典型的な流れは次のとおりです。Dev Modeでトークン一覧をメモ → プロジェクトの variables.css または Tailwind config に反映 → コンポーネント単位でHTML/CSSまたはReactを組む → ブラウザでFigmaと並べて目視比較。ピクセルパーフェクトを目指しすぎると時間が溶けます。8pxグリッドとタイポの階層が合っていれば、1〜2pxの差は許容することが多いです。クライアント次第なので、事前に「どこまで一致させるか」を決めてください。

チームでの権限とプラン

Dev Modeの利用には、Figmaのプランとシート種別（Full/Devなど）の確認が必要です。組織によっては実装者にDevシートだけ渡す運用があります。フリーランスがクライアントのOrgに招待される場合、権限がViewのみだとExportできないことがあります。契約前に「Dev Modeが使えるロールか」を確認してください。外部パートナーには、必要最小限のファイルだけ共有する方が安全です。

よくあるトラブルと対処

寸法が合わない: 親フレームのAuto Layout設定、paddingの二重カウント、borderの有無を疑います。色が違う見える: 色空間、sRGB前提、透明度の重ねを確認します。フォントが置換される: Webフォントのライセンスと、フォールスタックの指定をデザイナーと合意します。SVGが重い: パスの簡略化や、小アイコンはSVG、写真はWebPなど形式を分けます。コンポーネントが古い: ライブラリの更新通知をデザイナーが見逃しているケースがあります。バージョン固定のルールをチームで決めます。

Code Connectやプラグインとの関係

Code Connectは、コンポーネントとコードベースの対応を明示する拡張です。小規模案件では不要なことも多いです。プラグインでCSS一括出力などを試す人もいますが、生成コードはそのまま使わず、参考程度にするのが無難です。最終的な品質は人間のレビューと、プロジェクトの規約に合わせた整形が必要です。Dev Modeはあくまで仕様の参照元です。

見送り基準 — Dev Modeを使わない方がいい案件

デザインが最終PNGのみで、Figmaファイルがない。1ページのランディングで、デザイナーがいない。クライアントがFigmaのライセンスを持たず、共有できない。納期が24時間以内で、セットアップ時間が取れない。こうした場合は、従来通り画像とスプレッドシートの仕様書で進めます。無理にDev Modeを入れると、逆に遅くなることがあります。

価格やキャンペーンは執筆時点（2026年6月18日・日本時間）の情報です。変わることがあります。

WordPressや既存サイトへの当て込み

CMS案件では、Dev Modeの値をテーマのCSSに落とし込みます。ブロックテーマなら theme.json のカラー・タイポグラフィにマッピングすると、エディタ側でも一貫しやすいです。既存サイトの改修では、レガシーCSSとの衝突に注意します。新規クラスを増やしすぎない命名規則を、最初の1コンポーネントで決めてから広げます。

品質チェックリスト — 実装後

1. ブレークポイント3点（モバイル・タブレット・PC）でレイアウト崩れがないか。
2. ホバー・フォーカス状態がデザインと一致するか。
3. 画像のretina対応（2x）が必要か確認したか。
4. アクセシビリティ（コントラスト、フォーカスリング）を最低限満たすか。
5. クライアント承認用に、FigmaとステージングURLのスクショ比較を残したか。

デザイントークンとCSS変数への落とし込み

Dev Modeで読んだ色 #1A1A1A を、そのまま10箇所に書かず、--color-text-primary のように変数化します。Figmaの変数機能とプロジェクトのCSS変数を名前で対応表を作ると、デザイン更新時の差分が追いやすくなります。Spacingも8pxグリッドに丸めるルールをチームで決めておくと、コピペした奇数値が減ります。私はスプレッドシートかNotionに1ページだけ対応表を置いています。

クライアント納品前のDev Modeチェック会

実装完了前に、デザイナーまたはディレクターと15分、Dev Modeを共有しながら主要画面をなぞります。ホバー状態、エラー表示、空データ状態がデザインにあるかを確認します。実装側が勝手に補った状態を、このタイミングで合意します。記録はFigmaコメントに残し、後から「言った言わない」を防ぎます。

小規模案件向け — 軽量ワークフロー

1ページLPなどでは、Dev Modeを使わず、FigmaのInspect相当の値を数カ所だけ読む方法でも足ります。工数が半日以下なら、セットアップコストをかけない判断も正解です。チームが2人以下で、口頭で合意できる距離感なら、ツールよりコミュニケーションを優先してもよいです。Dev Modeは、規模が大きくなったときに導入しても遅くありません。

コンポーネントライブラリとDev Mode

組織のデザインシステムがある場合、ライブラリのコンポーネントをDev Modeで読むのが本領です。ローカルコンポーネントだけのファイルでは、恩恵が半分になります。ライブラリの更新通知をデザイナーが承認するフローを決め、実装側は「どのバージョンのライブラリで組んだか」をPRに書くと、後追いが楽です。

レスポンシブ実装 — ブレークポイントの読み方

Figmaにモバイル・タブレット・PCのフレームがある場合、Dev Modeで各ブレークポイントの値を読み、CSSのメディアクエリに落とします。フレームが1つだけの場合は、注釈または別ページでブレークポイントを確認します。推測で実装すると、クライアント確認で差し戻しが増えます。min-widthかmax-widthか、プロジェクトのCSS方針に合わせて統一します。

引き継ぎ資料 — Dev Mode以外に残すもの

Dev Modeは生きた仕様書ですが、PDFやREADMEに「実装の決定事項」（例：アニメーションはCSSで統一、画像はWebP）を残すと、半年後の自分や別のエンジニアに親切です。フリーランスは案件終了後にFigma権限が外れることもあるので、エクスポートした仕様メモを自分のナレッジベースに保存しておくと安心です。クライアントの機密は守り、個人のメモにも共有範囲を意識してください。

アニメーションとマイクロインタラクション

Dev Modeでトランジションの値を読める場合もありますが、実装はCSSまたはフロントエンドライブラリの方針に合わせます。すべてを再現すると工数が膨らむので、クライアントと「動く要素の優先度」を決めます。hoverの0.2s ease程度は再現しやすく、複雑なスクロール連動は後回しにする交渉もあります。

デザインレビューとの役割分担

デザインレビューは見た目の承認、Dev Modeは数値の参照、実装レビューはブラウザでの確認、と役割を分けると混乱が減ります。同じ会議で全部やろうとすると長くなります。フリーランス一人の場合も、自分の中でフェーズを分けると、手戻りが減ります。

ハンドオフツールとの比較 — Zeplin、Avocodeなど

チームが既に別ツールを使っている場合、Dev Modeを無理に導入しない方がよいです。ツールが二重になると、どちらが正か分からなくなります。新規チームならFigma内完結のDev Modeが学習コスト低めです。移行期間は、旧ツールと並行しないよう、カットオフ日を決めます。

実装後のデザイン変更 — 差分の追い方

デザインが更新されたら、Figmaのバージョン履歴とDev Modeで差分を確認します。全部作り直さず、変更コンポーネントだけ実装し直す。CSS変数を使っていれば、トークン変更だけで済むこともあります。変更管理はGitとFigmaの両方で行い、PRにFigmaのリンクを貼る習慣があると、後から追えます。

初めてDev Modeを使う日の30分プラン

1. 練習用のFigmaファイルを開く（自分のテストファイルで可）。2. Dev Modeに切り替え、1フレームを選ぶ。3. 色・フォント・余白を1つずつコピーし、VS Codeのtest.cssに貼る。4. ブラウザでプレビューし、ズレをメモ。5. ズレの原因（border、line-heightなど）をFigma側で確認。6. コメントで分からない点を自分用に残す。本番案件の前に、この30分をやるだけで心理的ハードルが下がります。

チームが2人以下のときの現実的な運用

デザイナー1＋実装1（または兼業）なら、Dev Modeより口頭＋コメントの方が速い日もあります。Dev Modeは、値のすり合わせに使い、細かい議論はビデオ通話5分で済ませる。ツールに時間を取られないよう、フレームの命名とコンポーネント化だけはデザイン側で守る。実装側は、勝手に値を推測しない。これだけでも手戻りは減ります。

InspectからDev Modeへの移行

以前Inspectでやっていた作業は、Dev Modeの右パネルに集約されています。ショートカットやUIの位置が変わっただけで、やることは同じです。チーム内で「Inspectと言っていた用語をDev Modeに統一する」と一言共有すると、コミュニケーションが楽になります。

プラグイン「Figma to Code」の扱い

自動生成HTML/CSSは、ほぼ必ず手直しが必要です。学習用に一度試す価値はありますが、本番納品のベースにはしません。Dev Modeで値を読み、自分のコンポーネント設計に落とす方が、保守性は高いです。クライアントに「自動生成で安く」と言われた場合は、品質リスクを説明してください。

オフライン・権限が外れたあと

案件終了でFigma権限が外れたら、エクスポートしたPNGと、自分用の仕様メモが頼りになります。機密を守りつつ、トークン表と主要寸法だけは自分のナレッジに残す運用を。Dev Modeはライブの仕様書なので、終了後は参照できません。終了前に必要な値をスプレッドシートへ写す日を1日設けると安心です。

よくある質問

Q. Dev Modeは無料で使えますか？

A. Figmaのプランと席の種類によります。2026年9月時点の公式料金ページで確認してください。個人の無料枠では制限がある場合があります。

Q. デザイナーがDev Modeに慣れていない場合は？

A. 実装側だけDev Modeを使い、デザイナーには通常モードのままでも進められます。ただしファイルの整理はデザイナー協力が必要です。

Q. FlutterやSwiftUIのコード出力は信頼できますか？

A. 参考程度です。プロジェクトの構成に合わせて手で直す前提が安全です。

Q. バージョン履歴とDev Modeの併用は？

A. 履歴でデザイン変更を追い、Dev Modeで最新の正を読む運用がおすすめです。古いフレームを実装しないよう、フレーム名にバージョンを付けるとよいです。

まとめ

Figma Dev Modeは、整理されたデザインファイルがあるときに、実装の速度と精度を上げる道具です。導入前にAuto Layoutとコンポーネントを整え、値はトークンにマッピングして使ってください。次の一手は、手元の案件で1フレームだけDev Modeで寸法を読み、CSSに落としてブラウザ比較することです。1回やればワークフローが見えます。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。 練習ファイルで1フレームだけDev Modeを試すと、本番前の不安が減ります。

Figmaの公式サイト