Figma Dev ModeはShift + D1つで開ける開発者向け画面で、コードスニペット取得からアセット書き出しまで一括対応できます。Figma公式ヘルプによると、Ready for dev機能を使えばエンジニアへの受け渡し漏れを防げます。この記事では、切り替え方法から納品前チェックまで実務で使える手順を解説します。
▶ 3日で初案件PR
この記事でわかること
Shift + Dの切り替えから納品前7項目チェックまで、エンジニアへの差し戻しを減らす実務フローが全部わかります。Ready for devの正確な意味と設定手順を3分で把握できます。フリーランスが単価と信頼を上げるための5つのハックを、根拠とともに習得できます。
今の仕事について、一番近いものは？
この記事の結論
Figma Dev Modeを実務で使いこなすには、Shift + Dで瞬時に切り替え、Ready for devで実装可能な状態を明示し、コードスニペットとアセット書き出しを納品フローに組み込むことが核心です。この3点を習慣化するだけで、エンジニアからの差し戻し回数を大幅に減らせます。フリーランスにとって、ハンドオフの精度が単価と信頼の両方に直結します。
今日やるべき1つ
手持ちのFigmaファイルを開き、Shift + Dを押してDev Modeに切り替え、任意のframeを選択してコードスニペットタブを確認してください（5分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| Dev Modeの場所がわからない | Figma Dev Modeの開き方は3手順で完了 | 3分 |
| Ready for devの意味が不明 | Ready for devは実装許可サインの機能 | 5分 |
| コードスニペットを活用したい | Figma Dev Modeは5つの仕組みで納品品質を上げる | 10分 |
| 納品前チェックを体系化したい | Figma Dev Mode納品前確認は7項目でチェック | 7分 |
| 差分確認のやり方を知りたい | Figma Dev Modeの対応を3分で診断 | 3分 |
Figma Dev Modeの開き方は3手順で完了
切り替えボタンの場所を一度把握してしまえば、以降は迷わずに済みます。Dev Modeへのアクセス方法は2つあり、どちらもデザインファイルを開いた状態で操作します。
Figma Dev Modeへの切り替えは画面右上で操作
Figma Dev Modeへのアクセスは、デザインファイルを開いた状態で行います。画面右上のツールバーに「Dev Mode」トグルスイッチが表示されており、これをクリックするだけでデザインモードからDev Modeへ切り替わります。もう1つの方法はキーボードショートカットのShift + Dです。ファイルを開いている状態でShift + Dを押すと、即座にDev Modeへ遷移します。ショートカット1回で画面が切り替わるため、作業効率の観点ではShift + Dを覚えることが最優先です。
なお、Dev ModeリンクからFigmaを開いた場合は自動的にDev Modeで表示されます（Figma公式ヘルプ: Dev Modeのガイド）。エンジニアからリンクを共有された場合はこの自動遷移が起きるため、通常モードとの違いに戸惑わないよう事前に認識しておきましょう。
Dev Modeでのフレーム選択が操作の起点
Dev Modeに入ったら、画面上で操作したいframe / component / instance / sectionをクリックして選択します。選択すると右パネルに当該要素のデザイン仕様、コードスニペット、書き出し設定が表示されます。ここで重要なのは選択する要素の粒度です。frameを選べばページ全体の仕様が、componentを選べばパーツ単位の詳細が表示されます。実務では「どの粒度でエンジニアに渡すか」を決めてから選択すると、コードスニペットの取得が効率化します。なにも選択していない状態では右パネルが空になるため、必ず要素を選んでから確認作業を進めましょう。
Dev Modeとデザインモードの違いは表示目的の違い
Dev Modeとデザインモードは同じファイルを見ていますが、インターフェースの目的が根本的に異なります。デザインモードは「デザインを作成・編集する」ための画面で、レイヤーの操作やプロパティの変更ができます。Dev Modeは「デザインを実装するための情報を読み取る」ための画面で、要素の編集はできないものの、コードに直結する寸法・色・フォントの値が整理されて表示されます。フリーランスの場合、デザイナーとエンジニアを1人で兼ねるケースも多いです。作業効率を上げる方法を知っておくと、モードの切り替えを含む実務フローがよりスムーズになります。作業フェーズに応じてモードを切り替えることで、確認ミスを防げます。
CHECK
▶ 今すぐやること: Figmaのデザインファイルを開き、Shift + Dを押してDev Modeへの切り替えを体験する（3分）
Q: Dev ModeはFigmaの無料プランでも使えますか？
A： Dev Modeの一部機能は有料プランが必要です。最新のプラン条件はFigma公式サイトの料金ページで確認してください。
Q： Dev Modeトグルが表示されない場合はどうすればいいですか？
A： ファイルの権限設定によってはDev Modeトグルが表示されません。ファイルオーナーに権限の確認を依頼してください。
Ready for devは実装許可サインの機能
「このデザイン、実装していいタイミングなのかわからない」というエンジニアの悩みを解決するのがReady for devです。この機能の意味を正確に理解しておくと、クライアントへの納品前フローが大幅に整理されます。
Ready for devの設定手順は選択後1ステップ
Ready for devの設定は非常にシンプルです。Dev Mode上で対象のframe / component / instance / sectionを選択し、右クリックメニューまたは右パネルから「Mark as ready for dev」をクリックするだけです（Figma公式ヘルプ: Ready for devビュー）。マークされた要素には視覚的なインジケーターが付き、Dev Modeを確認するエンジニアが「このセクションは実装可能」と判断できるようになります。デザイナー側が意図的にGoサインを出す仕組みであり、エンジニアが「どの画面から実装すればいいか」を迷わずに済む構造です。
Ready for devビューで対象画面を絞り込む
Dev ModeにはReady for devビューがあり、マークされた要素だけをフィルタリングして表示できます。画面が多いプロジェクトでは、「どの画面が実装対象か」を口頭やドキュメントで伝える必要がなくなります。フリーランスとして複数案件を抱えている場合、この機能でセクション単位の作業状況を管理すると、クライアントへの進捗報告も簡潔になります。Ready for devをマークしないまま共有すると、エンジニアは全画面を対象とみなして実装を始める可能性があり、手戻りの原因になります。
Ready for devをフリーランス業務に組み込む運用方法
フリーランスの業務では、「デザイン完成 → Ready for devマーク → エンジニアへ共有」という3ステップのルールを固定化することが実用的です。具体的には「デザインレビューが完了したセクションのみMarkする」と自分のルールを決め、マーク状況を納品チェックリストの1項目にします。この運用を取り入れることで、「まだデザインが変わるかもしれない箇所」を誤って実装されるリスクを防げます。1画面ずつMarkするよりもsectionを使って画面グループ単位で管理する方が、作業効率が高くなります。フリーランスが外注契約書テンプレートなどで業務範囲を明文化しているように、Figma内でも実装可能範囲を明示する習慣がトラブル防止につながります。
CHECK
▶ 今すぐやること: 手元のFigmaファイルで1つのframeを選択し、「Mark as ready for dev」を実行してマークの見え方を確認する（5分）
Q: Ready for devのマークを外すにはどうすればいいですか？
A： マーク済みの要素を右クリックし、「Mark as ready for dev」の選択を解除すると元の状態に戻せます。
Q： Ready for devは誰でもマークできますか？
A： 権限設定によって操作できる役割が異なります。詳細は管理者向けDev Mode設定を参照してください。
Figma Dev Modeの対応を3分で診断
以下の質問に答えることで、現在のDev Mode活用レベルと次のアクションが明確になります。
Q1: Dev ModeへはShift + Dで切り替えていますか？
Yesの場合 → Q2へ進んでください。Noの場合 → まずShift + Dをショートカットとして習得することが先決です（Result C）。
Q2: エンジニアに渡すファイルでReady for devマークを使っていますか？
Yesの場合 → Q3へ進んでください。Noの場合 → Ready for devマークの運用化が次のステップです（Result B）。
Q3: コードスニペットをエンジニアに確認してもらうフローがありますか？
Yesの場合 → Result A（上級活用フェーズ）。Noの場合 → コードスニペットの共有フロー整備が課題です（Result B）。
Result A: 基本運用は完成。Compare changesと注釈活用で精度をさらに上げましょう。
次のアクション: 修正が発生した際にCompare changes機能を使い、変更箇所を視覚的に共有する運用を追加します（10分で設定可能）。
Result B: Ready for devまたはコードスニペットのフロー化が必要です。
次のアクション: 本記事のハックセクションを参照し、納品フローにReady for devチェックを追加します（15分）。
Result C: まずDev Modeへのアクセス自体を習慣化しましょう。
次のアクション: 次回のデザイン作業終了後に必ずShift + Dを押し、コードスニペットタブを1回確認します（3分）。
CHECK
▶ 今すぐやること: Q1から順に答えて自分のResult（A/B/C）を確認し、対応するネクストアクションを実行する（3分）
Q: チームメンバーがいない1人作業でもDev Modeは有効ですか？
A： 有効です。1人作業でもデザインモードとDev Modeを使い分けることで、実装視点でのチェックを漏らさずに行えます。デザイナーとエンジニアを兼ねるフリーランスにとって特に価値があります。
Q： Dev Modeで作業するとファイルが変更されますか？
A： Dev Modeでは基本的に閲覧・コピーのみで、デザイン要素を編集することはできません。ファイルの内容は変更されません。
PR提供: 日本デザインスクール（デザスク）
Figma Dev Mode納品前確認は7項目でチェック
「どこまで整えれば納品OKか」という判断基準がないまま渡してしまうケースは、フリーランスに珍しくありません。実際の納品フローに組み込めるチェックリストを整理します。
納品前に確認すべき3つの基本項目
まず確認すべきは、Shift + DでファイルがDev Modeで問題なく表示されるかです。ツールバーの切り替えが機能しない場合、エンジニア側で操作できない可能性があります。次に、全フレームに適切なネーミングがついているかを確認します。「Frame 1」「Frame 2」のようなデフォルト名のままでは、エンジニアがどの画面を実装すべきか判断できません。そして実装対象フレームにReady for devマークが設定されているかも必ず確認します。この3点がゼロベースのチェック項目であり、ここが揃っていないとDev Modeの機能を提供しても受け取る側が使えません。
コードと書き出しに関する2項目
コードスニペットについては、主要コンポーネントのコードスニペットタブでCSSやその他のコード値に異常がないかを確認します。フォントサイズが意図しない値になっている、カラーコードがデザイントークンと乖離しているといった問題を事前に発見できます。アセット書き出しについては、SVGやPNG等のアセットに書き出し設定（形式・サイズ）が設定されているかを確認します。書き出し設定がない状態でエンジニアに渡すと、規格外のサイズで書き出されるリスクがあります。この2項目を抑えることで、実装フェーズでの問い合わせ件数を減らせます。画像圧縮で画質落とさない方法と同様に、アセットの品質管理は納品後のトラブルを未然に防ぐ重要な工程です。
注釈と差分確認に関する2項目
インタラクションやホバー状態など、静止画では伝わらない挙動に注釈（アノテーション）が付いているかを確認します。注釈がない状態でハンドオフすると、エンジニアが独自判断で実装し、後から修正が発生します。直近のデザイン変更がCompare changes機能で確認できる状態になっているかも重要です。修正履歴を追跡できることで、「前の仕様と変わったこと」をエンジニアに明示できます。この2項目は、チーム開発経験が少ないフリーランスが見落としがちな領域です。
CHECK
▶ 今すぐやること: 直近の納品ファイルを開き、7項目のうち未実施の項目を1つ特定して対処する（7分）
Q: 注釈はDev Mode内で追加できますか？
A： Figmaの注釈（アノテーション）はデザインモードで追加し、Dev Modeで確認する運用が基本です。Dev Mode内での操作は閲覧が中心になります。
Q： アセット書き出しの設定はどこで行いますか？
A： デザインモードで対象要素を選択し、右パネルの「エクスポート」セクションで形式とサイズを設定します。設定後はDev Modeからも書き出しが可能です。
Figma Dev Modeは5つの仕組みで納品品質を上げる
フリーランスが実務で差をつけるための5つのハックを、なぜ効くのかの根拠とともに解説します。
ハック1: コードスニペット取得で実装確認の往復を削減
【対象】: エンジニアからの「この値ってどこで確認できますか？」という問い合わせを減らしたいフリーランスデザイナー。
【手順】: Dev ModeでShift + Dに切り替え、対象コンポーネントを選択します（1分）。右パネルの「コード」タブを開き、CSS / iOS / Android等の言語を選択します（2分）。コードスニペットをコピーし、共有ドキュメントまたはFigmaリンクに添付して渡します（3分）。
【ポイントと理由】: コードスニペットはデザイナーが事前に確認・整備した状態で渡す方が実装速度が上がります。エンジニアがコードスニペットを確認するにはFigmaへのアクセス権とDev Modeの操作知識が必要だからです。多くのエンジニアは「Figmaを開く」という行為自体に摩擦を感じており、デザイナー側がスニペットを抜き出して添付することでその摩擦を解消できます。「渡す」ではなく「設置する」という発想の転換が、往復確認の件数を減らす根本的なメカニズムです。
【注意点】: CSSスニペットをそのまま本番コードに貼り付ける必要はありません。あくまで実装のたたき台であり、環境に応じた調整は必要です。スニペットを完成品として渡すことは逆効果になる場合があります。
ハック2: sectionで画面を分けて実装単位を明確化
【対象】: 画面数が多く、エンジニアが「どの画面から実装すればいいか」を把握できていないと感じるフリーランス。
【手順】: デザインモードでsection（Sキー）を使い、機能単位または画面グループ単位でフレームをまとめます（5分）。sectionに「01_ログイン」「02_ダッシュボード」のような番号付きの命名をつけます（3分）。Dev Mode上で各sectionをReady for devマークし、実装優先順位をフローとして見える化します（5分）。
【ポイントと理由】: 「sectionで番号管理してからフレームを整理する」順序が実務でうまくいきます。フレームを先に整理しようとすると、整理中にデザインが変更されて作業が無駄になるからです。sectionに番号を振ることでエンジニアが実装順序を自律的に判断でき、デザイナーへの確認コストがゼロになります。「整理の単位」を最初に決めることが、後続のすべての作業を効率化する起点です。
【注意点】: sectionを細かく分けすぎると、Figmaのキャンバスが見づらくなります。1section = 1機能グループ（3〜7画面程度）を目安にしてください。
ハック3: Compare changesで修正差分を視覚的に共有
【対象】: デザイン修正後にエンジニアへ「どこが変わったか」を言語で説明するのが難しいと感じているフリーランス。
【手順】: Dev Modeで修正後のframeを選択し、ツールバーの「Compare changes」ボタンをクリックします（1分）。変更前後の差分が視覚的にオーバーレイ表示されるので、変更点を確認します（3分）。Compare changesを表示した状態のスクリーンショットまたはFigmaリンクを共有し、変更点を端的に説明します（5分）。
【ポイントと理由】: 「修正しました」という一言連絡ではなく、Compare changesを活用して「具体的にどのプロパティが変わったか」を視覚的に示します。言語での説明は受け取る側の解釈に依存しますが、視覚的な差分は解釈の余地がありません。Compare changesを使う運用が定着すると、エンジニア側も変更箇所を自分で確認できるようになり、「どこが変わったか」の確認コストがゼロになります。Figma内で完結することが、フリーランスの作業時間を削減する根拠です。
【注意点】: Compare changesはバージョン履歴が残っていないと差分を表示できません。デザイン変更前に意図的にバージョン保存（Ctrl + Alt + S / Cmd + Option + S）する習慣をつけてください。バージョン保存なしでのCompare changesは機能しないため、後付けで対応しようとすることは避けましょう。
ハック4: 注釈（アノテーション）でインタラクション仕様を補完
【対象】: ホバー状態・トランジション・エラー表示など、静止画のデザインだけでは伝えきれない仕様があるフリーランス。
【手順】: デザインモードで注釈ツールを選択し、補足が必要な要素の近くに注釈を配置します（5分）。注釈に「ホバー時: bg-colorを#F5F5F5に変更」「エラー時: テキストを赤#E53E3Eで表示」のように具体的な値で記述します（5分）。Dev Modeに切り替えて注釈が正しく表示されることを確認し、エンジニアにDev ModeリンクをSlackやメールで共有します（3分）。
【ポイントと理由】: 「インタラクションがある要素にはすべて注釈を入れる」原則から始めると実装精度が早く上がります。エンジニアが「この状態はどうなるのか」を独自判断した結果が修正依頼として返ってくる、という悪循環が注釈の不足から生まれるからです。注釈によって「デザイナーが責任を持って仕様を定義した」という証拠が残るため、後からの認識相違トラブルを防げます。フリーランスの場合、トラブルは直接的に報酬交渉に影響するため、事前投資として注釈を入れることは費用対効果が高いです。著作権とはわかりやすく解説した記事でも触れているように、制作物の仕様を明文化しておくことは権利関係のトラブル防止にもつながります。
【注意点】: 注釈は簡潔に書かないと読まれません。1注釈 = 1仕様という原則を守り、長文の説明を1つの注釈に詰め込まないでください。
ハック5: アセット書き出し設定でエンジニアの作業工数を削減
【対象】: アイコンや画像の書き出しをエンジニア任せにしており、規格外のサイズやフォーマットで受け渡されて困ったことがあるフリーランス。
【手順】: デザインモードで書き出し対象のアセット（アイコン / イラスト / バナー）を選択し、右パネル「エクスポート」から形式（SVG / PNG / WebP）とサイズ（1x / 2x / 3x）を設定します（10分）。Dev Modeに切り替えると設定したエクスポート設定がそのまま表示されるため、エンジニアが設定を変更せずにそのまま書き出せる状態になっているか確認します（3分）。アイコンはSVG、写真はWebPを基本設定とする命名規則をREADMEに1行記載し、FigmaファイルのDescriptionに貼り付けます（5分）。
【ポイントと理由】: 「デザイナーがエクスポート設定まで完成させた状態で渡す」アプローチを取ります。エンジニアが書き出し設定を都度判断するのは時間のムダというだけでなく、プロジェクトによって形式やサイズの要件が異なるため、都度確認コストが発生するからです。書き出し設定をFigma内に埋め込んでおくことで「口頭説明なし」で正しい形式が渡せる構造になり、フリーランスの案件管理コストを削減できます。画像フリーアイコン選びでも解説しているように、SVGとPNGの使い分けを事前にルール化しておくことが品質の安定につながります。
【注意点】: すべてのアセットにエクスポート設定を入れる必要はありません。設定が必要なのはエンジニアが独立したファイルとして書き出す画像・アイコン・イラストのみです。テキストやレイアウトコンポーネントには設定不要です。
CHECK
▶ 今すぐやること: 手元のFigmaファイルで1つのアイコンを選択し、エクスポートをSVG設定にしてDev Modeからの見え方を確認する（10分）
Q: VS Code連携はどのように使いますか？
A： Figma Dev ModeとVS Codeを連携させるには、Figmaの公式VS Code拡張機能をインストールします。VS Code上からFigmaのデザインを直接確認でき、コードと照合しながら実装できます。詳細はFigma公式ヘルプ: Dev Modeセクション（英語）を参照してください。
Figma Dev Modeで納品精度を上げる：5機能の実践まとめ
Figma Dev Modeの本質は、デザインとコードの間にある認識齟齬をゼロにする仕組みです。Shift + D、Ready for dev、コードスニペット、注釈、Compare changesという5つの機能を組み合わせることで、エンジニアへの受け渡し品質が構造的に上がります。フリーランスとして単価と信頼を積み上げるには、納品物の「受け取りやすさ」が長期的に最も重要な差別化要因になります。
Dev Modeは覚えることが多く見えますが、「Shift + D → 要素選択 → コードスニペット確認」という3ステップが9割の場面をカバーします。まず1案件の納品前にこのフローを1回実行し、体に覚えさせることが最速の習得方法です。Figma AIデザイン完全ガイドでも解説しているように、Figmaのツール機能を積み上げることで一人でこなせる案件の幅が広がります。
| 状況 | 次の一歩 | 所要時間 |
| まだDev Modeを触ったことがない | Shift + Dを押してコードスニペットを1回確認する | 5分 |
| Ready for devを使いたい | 1フレームを選択してMark as ready for devを実行する | 5分 |
| 次回納品前にチェックしたい | 7項目チェックリストと照合してから共有リンクを送る | 10分 |
Figma Dev Modeの使い方に関するよくある質問
Q: Figma Dev ModeはFigmaのどのプランから使えますか？
A： Dev ModeはProfessional以上のプランで利用できます。無料プランでは一部機能に制限があります。最新のプラン条件はFigma公式サイトで確認してください。
Q： Dev Modeでコードスニペットを確認できるプログラミング言語は何ですか？
A： CSS、iOS（Swift）、Android（Kotlin）などに対応しています。右パネルのコードタブで言語を切り替えて確認できます（Figma公式ヘルプ）。
Q： Dev Modeで確認した情報はどうやってエンジニアに渡せばいいですか？
A： Dev ModeのリンクをSlackやメールで共有するのが最も効率的です。受け取ったエンジニアはリンクを開くとDev Modeで自動表示されるため、操作説明が不要になります。