FigmaのDev Mode（開発モード）とは、デザインを実装する人のための表示モードで、余白や色、文字の設定値、コードの参考、書き出す画像などを、デザインを崩す心配なく読み取れる画面です。デザイナーとコーダーの受け渡しを1つのファイルの中で完結させたいときに役立ちます。この記事では、Dev Modeでできること、使える席とプラン、切り替えから受け渡しまでの手順、Dev Modeを使わない場合の受け渡し方法を順番に説明します。

FigmaのDev Modeとは

Dev Modeは、Figmaのデザインファイルを「作る画面」ではなく「読み取る画面」として開くモードです。ツールバーの切り替えか、キーボードの Shift＋D で、通常のデザインモードとDev Modeを行き来できます。

デザインモードとの違い

デザインモードは図形を描いたり動かしたりする編集の画面です。Dev Modeに切り替えると、右側のパネルが「検査」中心の表示に変わり、選んだ要素のサイズ、余白、色、フォント、適用されているスタイルやバリアブル、コンポーネントの情報がまとまって表示されます。編集のための道具が前に出てこないので、コーダーが値を確認している途中でうっかり図形を動かしてしまう、といった事故が起きにくくなります。

Dev Modeでできること

Dev Modeでできることは、大きく「値を読む」「コードの参考を見る」「素材を書き出す」「進み具合と変更を共有する」の4つです。いずれもデザインファイルの中で完結するため、別の仕様書を作らなくても受け渡しができます。

検査パネルで値を読む

要素を選ぶと、検査パネルにレイヤー名と種類、幅と高さ、余白、角の丸み、色、文字の大きさや行間などが表示されます。色やフォントがスタイルやバリアブルとして登録されていれば、その名前も出ます。要素の上でマウスを動かすと、隣り合う要素との距離も確認できます。コーディングでは「この余白は16pxなのか20pxなのか」で迷う場面が多いので、ここで正確な値を拾えるのは大きな利点です。

コードスニペットで書き方の参考を見る

検査パネルには、選んだ要素をCSSなどで書いた場合の参考コードが表示されます。言語と単位は切り替えられ、プラグインを入れると出力の種類を増やすこともできます。ただし、表示されるのはその要素単体の見た目を写したコードで、ページ全体の構造や、レスポンシブの書き方まで考えてくれるわけではありません。値の確認用と考え、組み立ては実装する人が行います。

画像やアイコンを書き出す

Dev Modeでは、選んだ範囲の中にあるアイコンや画像が一覧で表示され、そこからダウンロードできます。デザイナーが書き出し設定（PNG、JPG、SVG、PDF）を付けておけば、その設定どおりに書き出せます。ロゴやアイコンはSVG、写真はJPGやPNGというように、使う場面に合った形式を選びます。

Ready for devと変更の比較

デザイナーがセクションやフレームに「Ready for dev（開発準備完了）」の印を付けると、Dev Modeの一覧でその部分だけを探せるようになります。印を付けたあとにデザインが直された場合は、以前の版との違いを比べる機能で、どこが変わったかを確認できます。Organization と Enterprise のプランでは「完了」のステータスも使えます。あわせて、注釈（仕様のメモ）や寸法の表示をデザインの上に残すこともできます。

Dev Modeを使える席とプラン

Dev Modeを使えるのは、有料プランの「フル」または「開発」の席を持つ人です。無料の Starter プランでは使えず、有料プランでも閲覧や共同作業向けの席では基本的な検査にとどまります。

対象のプランと席の種類

Figmaの公式ヘルプでは、Dev Modeの対象を Professional、Education、Organization、Government、Enterprise の各プランとしています。席ごとの使える範囲は、料金ページで次のように案内されています。

席の名前やプランの構成は、これまでにも何度か見直されています。導入前に Figma の料金ページで最新の内容をご確認ください。

料金を確認するときのポイント

料金は席ごと・月ごとの金額で、プランと席の種類、年払いか月払いかによって変わります。コーダーやエンジニアがデザインを編集しないのであれば、フルの席ではなく開発の席を割り当てるのが一般的です。外部の制作会社に実装を頼む場合は、相手側がどの席でファイルを開くのか、誰の契約で席を用意するのかを最初に決めておくと、受け渡しの直前で困りません。金額は為替や改定で変わるため、Figma の料金ページで最新の内容をご確認ください。

Dev Modeの使い方の手順

Dev Modeは、ファイルを開いて切り替え、要素を選んで値を読む、という流れで使います。ブラウザ版でもデスクトップアプリでも操作は同じです。

ステップ1｜デザインファイルを開く

共有されたリンク、またはファイルブラウザからデザインファイルを開きます。開発の席やフルの席が割り当てられているかは、自分のアカウントのプラン表示で確認できます。

ステップ2｜Dev Modeに切り替える

画面下部（または上部）のツールバーにあるDev Modeの切り替えを押すか、Shift＋D を押します。画面の色味が変わり、右側が検査パネルになれば切り替え完了です。もう一度 Shift＋D を押すとデザインモードに戻ります。

ステップ3｜Ready for devの部分を探す

左側のパネルに「Ready for dev」の印が付いたセクションやフレームがまとまって表示されます。デザイナーが実装してよい範囲を決めている場合は、ここから見ていくと、作業途中の案を誤って実装することを防げます。

ステップ4｜要素を選んで値とコードを確認する

実装したい要素をクリックし、検査パネルでサイズ、余白、色、文字の設定を確認します。コードの欄では言語と単位を、実装する環境に合わせて選びます。値をクリックするとコピーできるので、手で打ち写す手間と打ち間違いを減らせます。

ステップ5｜素材を書き出し、進み具合を伝える

必要なアイコンや画像を書き出し、実装が済んだ部分は、プランに応じてステータスを更新するか、コメントで知らせます。コメントの付け方は「Figmaコメント機能の使い方」で詳しく説明しています。

受け渡しの前にデザイナーが整えておくこと

Dev Modeの読みやすさは、元のデザインデータの作り方で決まります。値が拾いやすいファイルにしておくと、受け渡しの質問の往復がぐっと減ります。

レイヤー名とオートレイアウトを整える

「Frame 123」「Rectangle 45」のような初期の名前のままだと、実装する人はどれが何の部品なのか判断できません。ボタンやカードなど、役割が分かる名前を付けておきます。余白はオートレイアウトで組んでおくと、間隔や並び方が数値で表示され、CSSのFlexboxの考え方にも置き換えやすくなります。制作の現場では、オートレイアウトで組まれていない画面ほど、実装後に余白のずれが見つかる傾向があります。

スタイル・バリアブルと注釈を用意する

色や文字の設定をスタイルやバリアブルとして登録しておくと、検査パネルにその名前が出て、サイト全体で同じ値を使い回せます。ホバー時の色、スマートフォンでの並び方、文字数が増えたときの扱いなど、静止画だけでは伝わらない決まりごとは注釈で残します。スタイルとバリアブルの作り方は「Figmaのスタイルとバリアブルの使い方」も参考にしてください。

Dev Modeがなくてもできる受け渡し

Dev Modeの席がない場合でも、閲覧の権限があれば基本的な受け渡しはできます。案件の規模や関わる人数によっては、こちらの方法で十分なこともあります。

閲覧者の基本の検査を使う

有料プランの閲覧の席や、リンクで共有された閲覧者でも、要素を選ぶと基本的な寸法や色などを確認できます。コードの言語切り替えやReady for devの一覧、変更の比較といった機能は使えませんが、ページ数が少なく、デザインがほぼ確定している案件なら値の確認は可能です。

書き出し設定とコメントで補う

デザイナーがあらかじめ書き出し設定を付けておけば、閲覧者でも素材を書き出せます。実装上の決まりごとはコメントや、ファイル内に置いた仕様メモのページで伝えます。ただし、デザインの修正がどこに入ったかは自分で見比べる必要があるため、修正が多い案件では、修正箇所をコメントで知らせる約束をしておくと安心です。

よくある失敗とトラブル対処

Dev Modeの困りごとの多くは、席の割り当てと、コードの扱い方の思い違いから起きます。症状ごとに確認する点をまとめます。

Dev Modeに切り替えられない

自分の席が閲覧や共同作業向けになっていないか、ファイルが無料の Starter プランのチームに置かれていないかを確認します。席を変える権限は管理者にあるため、チームやOrganizationの管理者に開発の席を割り当ててもらいます。

表示されたコードをそのまま貼って崩れる

コードスニペットは要素単体の見た目を写したもので、固定の幅や位置の指定が入ることがあります。そのまま貼ると、画面幅が変わったときに崩れる原因になります。値だけを参考にし、レイアウトは実装の方針に合わせて組み直します。

デザインと実装で余白がずれる

オートレイアウトを使っていない部分や、要素を手で並べた部分は、検査パネルの距離表示が見る位置によって変わります。どの値が正しいのか迷ったら、デザイナーに確認し、元データをオートレイアウトで組み直してもらうのが確実です。

よくある質問

Q. 無料プランでもDev Modeは使えますか？

A. 使えません。Dev Modeは Professional 以上の有料プランで、フルまたは開発の席を持つ人が使える機能です。無料の Starter プランでは、閲覧時の基本的な検査のみになります。

Q. Dev Modeで開くとデザインが変わってしまうことはありますか？

A. Dev Modeは読み取りが中心の画面で、注釈やステータスなどの受け渡し用の情報を除き、デザインそのものを編集する機能は前に出てきません。デザインを直すときはデザインモードに戻ります。

Q. コーダーにはどの席を用意すればよいですか？

A. デザインを編集しないのであれば、開発（Dev）の席が向いています。デザインの修正もお願いする場合はフルの席が必要です。料金と席の構成は Figma の料金ページで最新の内容をご確認ください。

Q. Dev Modeのコードはそのまま本番に使えますか？

A. そのまま使うことはおすすめしません。値の確認や書き方の参考として使い、ページの構造やレスポンシブの対応は実装する人が組み立てます。

Q. デスクトップアプリとブラウザ版で違いはありますか？

A. Dev Modeの基本の操作はどちらも同じです。Shift＋D で切り替え、要素を選んで検査パネルを見る流れは変わりません。

THREE D PLUS は大阪の Web 制作会社です。ホームページ制作から公開後の運用・改善までまとめてご相談いただけます。お問い合わせはこちら。