【入門編】Figmaの「Dev Mode」におけるカスタムAnnotation（注釈）機能の活用法！エンジニアとのコミュニケーションを極限まで円滑にする方法 – UI/UX・デザインツール活用バイブル

Figma Dev Modeの「注釈」で、エンジニアとの“言語の壁”を破壊せよ

こんにちは。プロダクト開発の最前線で「いかにして無駄を削ぎ落とし、本質的なものづくりに集中するか」を追求し続けているエンジニアです。

皆さんは、エンジニアにデザインを渡したあと、こんな経験はありませんか？
「この余白の意図は何？」「このアニメーション、どういう動きが正解？」「今の実装でこの状態（エラー時など）の表示はどうするの？」

その都度チャットツールでやり取りし、膨大な仕様書を書き換える……。これ、もうやめませんか？

今回は、Figmaの「Dev Mode」にある注釈（Annotation）機能を使い、「ドキュメントを探す時間」をゼロにし、エンジニアがコードを書くことに集中できる環境を作る極意を伝授します。

—

かつての僕たちは、Figmaの外にPDFやNotionで仕様書を書いていました。しかし、これには致命的な欠陥があります。「デザインと仕様が分離する」ことです。

Dev Modeの注釈機能は、デザインのその場所（コンポーネント）に直接、仕様を埋め込むことができます。エンジニアはコードを見ながら、横にある注釈をタップするだけで「意図」を理解できる。この「文脈の近接性」こそが、開発効率を劇的に高める鍵です。

—

適当にテキストを置くだけではいけません。エンジニアは「構造」を愛します。以下のルールでカテゴリ分けを行い、テンプレート化しましょう。

注釈に必ず以下のプレフィックス（接頭辞）を付けます。

[Logic] フォーム入力制限

このように、「条件・動作・制約」を箇条書きで書くのが鉄則です。文章ではなく「データ構造」として読ませることで、エンジニアはそのままロジックに変換できます。

—

まだDev Modeの注釈機能を触ったことがない方へ。今日から使える最短セットアップです。

画面右上の「＜ / ＞」アイコン（Dev Mode）をクリックします。これだけで、デザインファイルが「エンジニア専用のビュー」に切り替わります。

毎回テキストを打つのは非効率です。デザインシステムの一部として「Annotationコンポーネント」を作りましょう。

1. ベースを作る: 小さな付箋のような枠を作成し、オートレイアウトを設定。
2. バリアントを作る: 「Logic」「Layout」などのカテゴリごとに色を変えたバリアントを作成。
3. Dev Modeで使う: 必要な箇所にペタペタ貼る。

これだけで、デザインデータ全体が「生きた仕様書」へと進化します。

—

最後に、最も重要な「運用」の話をします。ツールが良くても、使い方がバラバラだと意味がありません。

1. 「Ready for Dev」のステータス管理
Figmaの機能で、完了したデザインには「Ready for Dev」のタグを付けます。このタグが付いているコンポーネントには、必ず「注釈」がセットになっていることをルール化してください。

2. レビューは「注釈」で行う
エンジニアからの質問は、チャットではなく「そのコンポーネントの注釈」に対してコメントしてもらうようにしましょう。解決した質問は「Resolve」する。これにより、過去の決定事項がデザインの横にアーカイブとして残ります。

—

この方法を取り入れると、エンジニアはあなたに「これどういう意味ですか？」と聞く回数が激減し、あなた自身も「仕様書を修正する」という非生産的な作業から解放されます。

デザインとは、描画することではなく「意図を伝えること」です。

Dev Modeの注釈機能を使い倒して、チーム全体の開発体験（DevX）を最高のものにしていきましょう。明日からのあなたの作業が、少しでもクリエイティブで楽しいものになることを願っています！

—
何か特定のコンポーネントで「注釈」の書き方に迷ったら、いつでも相談してくださいね。また次の記事で会いましょう！