Dev Modeは、Figmaのデザインを開発向けに確認する画面です。対象の部品を選び、寸法・色・書式・素材・変更点・注釈を確認して実装へ渡すために使います。表示されるコードを、アプリ全体の完成コードと混同しないようにしてください。
利用条件と、切り替え方
公式案内ではDev Modeは有料プランで利用でき、FullまたはDev席が必要です。ファイルへアクセスする権限も確認します。契約に含まれる席と、ファイルの編集・閲覧権限は別の条件です。公式：Dev Modeのガイド
Figma Designファイルを開き、ツールバーのDev Mode切り替え、またはShift+Dを使います。同じショートカットでDesign modeへ戻れます。項目が使えない場合は、所属チームのプラン、割り当てられた席、対象ファイルを確認してください。
最初に、確認するフレームと版を揃える
開発へ渡すフレーム・コンポーネント・インスタンス・セクションを選び、Mark as ready for devで状態を示します。対象は左サイドバーのReady for developmentから探せます。状態だけで承認や仕様確定を保証するものではないため、チームで「実装に進める条件」を共有してください。
確認用のURL、対象名、仕様を確定した版、実装する状態を控えます。通常表示だけでなく、長い文字、エラー、非表示の部品、スマホ幅の条件も決めておくと、見た目だけでは分からない仕様を伝えられます。
Inspectで、必要な仕様を確認する
| 対象 | 確認すること |
|---|---|
| フレーム・レイアウト | 幅・高さ、余白、配置、リサイズ条件 |
| テキスト | フォント、サイズ、行間、文言、折り返し |
| 色・効果 | 塗り、線、シャドウ、スタイル・変数の参照 |
| コンポーネント | バリアント、プロパティ、接続した実装情報 |
| 素材 | 書き出すレイヤー、形式、寸法、使用先 |
インスタンスの個別変更は元部品と異なる場合があります。オーバーライドの確認方法とVariablesの参照も参照してください。
Codeで言語と単位を選ぶ
| 分野 | 公式の言語候補 |
|---|---|
| Web | CSS |
| iOS | SwiftUI・UIKit |
| Android | Compose・XML |
InspectのCodeで言語と単位を確認し、必要なスニペットをコピーします。CSSのpxとremなどでは基準が違うため、単位の設定も実装側と揃えます。テキストの選択と他のレイヤーの選択では表示される情報が異なります。公式：コードスニペットと単位
生成スニペットは、選択対象の見た目や仕様を実装するための資料として扱います。データ取得、画面遷移のロジック、意味のあるHTML、入力操作、画面幅ごとの実装まで完了したと判断せず、使用するコード側で確認してください。
変更比較と、メインとの比較を使い分ける
Compare changesは、現在のデザインと前の版を比較するための機能です。Compare with main componentは、インスタンスとメインの差を確認します。最新版への変更を調べるのか、個別の上書きを調べるのかで使い分けます。
変更対象、追加・削除された要素、寸法・文言・色、実装済みの版との差を確認し、影響する画面や状態を控えます。旧版と比較しただけで、すべての画面への影響を確認したことにはなりません。
注釈と寸法を残す条件
注釈・保存できる寸法の追加は、公式では有料プランのFull席とcan edit権限が条件です。閲覧はFullまたはDev席と、少なくともcan view権限が条件です。Design mode・Dev Modeから注釈を追加できます。公式：寸法と注釈
例えば「この文言は改行しない」「エラー時はメッセージを表示する」など、数値だけでは分からない条件を残します。Alt／Optionで一時的に距離を見る操作と、共有用のMeasurementを保存する操作も区別してください。
VS Code・Code Connect・MCPとの違い
| 機能 | 主な役割 |
|---|---|
| Figma for VS Code | エディターの中でFigmaを確認する |
| Dev Modeプラグイン | コード出力や開発用の連携を追加する |
| Code Connect | デザイン部品と実際のコード部品を結び付ける |
| Figma MCP | 対応するAIツールへデザイン情報を渡す |
Code Connectで接続したコードの表示には、プラン・席・設定方法の条件があります。現在の公式では、UIで接続しただけではInspectにスニペットを表示せず、表示用にはCLIの設定が必要と案内されています。Code Connectの設定、Figma MCPの使い方、Figma for VS Codeで各手順を確認してください。
実装へ渡す前の確認
対象URLと版、使用する部品・変数、素材の形式、必要な状態、未確定の仕様を揃えます。開発側ではコードに反映した結果をPC・スマホで確認し、Figma側の数値と、実際のブラウザーやアプリの表示を照合してください。