Figma Dev Mode 注釈の使い方｜実装者が「聞く前に」欲しい情報

「この余白、何pxですか」——数年前までは、実装中にこの手の質問をよく投げていました。Dev Modeが標準になってから、その種の質問はほぼ消えました。要素を選べば余白もフォントも色も数値で出る。聞く必要がなくなったんです。

ところが、質問が全部消えたわけではありません。動き・条件・状態——この3つは、Dev Modeで数値を見ても分からない。だから今でも「ここホバーでどうなりますか」「0件のときの表示は」と聞くことになる。デザイナーやディレクターからすると、せっかくDev Modeで渡したのに、という感覚かもしれません。

この「数値では伝わらない情報」を、Dev Modeの注釈(Annotations)で先回りして渡してもらえると、実装者は迷いなく着手できます。実装者側からの「お願い」として、何をどう注釈に書くと効くのかをまとめました。

Dev Modeの注釈でできること（と、できないこと）

Figmaの注釈は、Dev ModeまたはDesignから、ツールバーの Annotation（ショートカット Shift+T）でレイヤーに紐づけて追加できます。フリーテキストのメモに加えて、そのレイヤーに定義済みのプロパティ（配置方向やサイズなど）を選んで添えられるのが特徴です。Dev Modeのキャンバス上では緑のドットで表示され、クリックすると中身が開きます。

数値そのもの（余白・フォント・色）は、注釈を書かなくてもDev Modeのインスペクトで拾えます。だから注釈に数値を書き写す必要はありません。注釈が本当に効くのは、インスペクトでは出てこない「意図」や「条件」のほう。ここを住み分けると、注釈が短く、読む側も楽になります。

実装者が着手前に本当に欲しい6つの情報

見た目のスクショだけでは組み始められない、というのが実装者の本音です。特に次の6つが注釈にあると、質問のラリーを挟まず一気に進めます。

• 状態の違い：hover・押下・無効・選択中で見た目がどう変わるか。カンプは基本状態だけのことが多く、ここは推測になりがちです。
• 動きの意図：何をきっかけに、どこへ、どのくらいの速さで動くか。「フェードイン」だけだと、0.2秒なのか0.6秒なのかで印象がまるで変わります。
• 条件分岐：0件のとき・エラーのとき・ログインの有無で、何を出し分けるか。正常系のカンプ1枚だと、この分岐が抜け落ちます。
• 余白の根拠：その余白が8pxの倍数などのルールに沿っているのか、その箇所だけの決め打ちなのか。ルールが分かると、CMSで内容が変わっても崩れない組み方ができます。
• 可変の想定：テキストが長い／要素が大量／空のとき、どう伸縮させたいか。CMS連動のブロックほど、ここの指定が効きます。
• 遷移先：ボタンやリンクの飛び先URL、別タブで開くかどうか。プロトタイプのつながりだけでは、実URLまでは分かりません。

この6つは、私が実装中に「聞かないと進めない」と感じてきた項目そのものです。全部を毎回書く必要はなくて、そのコンポーネントで推測が入りそうな箇所にだけ注釈を置いてもらえれば十分です。

注釈があると、実装はこう変わる

注釈がないと、実装者は二択を迫られます。推測で組み進めて後からズレが発覚するか、質問を投げて返事を待つあいだ手を止めるか。どちらも手戻りか停止で、時間を食います。

注釈で意図が先に渡っていると、着手の時点で迷いが消えます。動きは秒数と起点が明確、状態は一通り揃っている、条件分岐も見えている。質問のラリーが減るぶん、着手から完成までが素直に短くなる。デザインの再現度（強み①のFigma忠実コーディング）も、意図が分かっているほど上がります。「動きや状態、条件分岐まで面倒を見る」のがこちらの仕事なので（強み③）、その材料を注釈で渡してもらえると、精度と速度の両方に効くわけです。

注釈の運用でつまずきやすいのは、「状態」と「条件」の抜けです。この2つは実装前に洗い出す観点を実装前に返す「状態の抜け」チェックにまとめました。注釈をどこに何個置くか迷ったら、実装しやすいFigmaデータのチェックリストも合わせて見てもらえると、渡す前の準備がしやすいはずです。テキストの指示書と注釈をどう分担するかは実装が速く・正確になる指示書の書き方で触れています。

注釈は「全部書く」より「推測が入る所だけ」

注釈を丁寧に付けようとすると、かえって数値の書き写しで埋まってしまうことがあります。数値はインスペクトで拾えるので、注釈は意図・条件・状態に絞るのがコツ。緑のドットが多すぎると、どれが重要か埋もれてしまいます。「ここは推測が入るな」と感じた箇所にだけ置く、くらいの密度が、実装者にはいちばん読みやすいです。

Dev Modeと注釈を前提にデータを渡してもらえる制作会社さんとは、やり取りが驚くほど減ります。動き・条件・状態まで含めて実装を任せたい、Figmaの渡し方から相談したい、という方はお問い合わせからお気軽にご連絡ください。

本記事は2026年7月時点の情報です。Figmaの注釈機能は仕様が更新されることがあるため、最新の操作は公式のヘルプをご確認ください。