Figma Dev Modeを「ただの閲覧ツール」で終わらせるな：エンジニアとの境界線を消滅させる注釈戦略
こんにちは。プロダクトの命運を握るテックリードの皆さん、そしてUI/UXデザイナーの皆さん。
Figmaの「Dev Mode」がリリースされて久しいですが、多くの現場では「CSSをコピペするためのツール」としてしか機能していません。それは宝の持ち腐れです。Dev Modeは、デザイナーの頭の中にある「曖昧な仕様」を、コードと密結合した「厳密な仕様」へと昇華させるための最強のインターフェースです。
本稿では、ドキュメントの更新に追われる日々を終わらせ、エンジニアが「見れば勝手に実装できる」状態を作るための、現場で震えるほど役立つ実践的アプローチを伝授します。
—
1. 脱・仕様書：Dev Modeの「Annotation」でコンテキストをコードに埋め込む
「仕様書はどこですか？」と聞かれるたびに開発が止まる。この負のループを断ち切るには、「デザインのすぐそばに、エンジニアが読むべきコンテキストを置く」ことが唯一の解です。
開発者が一目で理解するための「Annotation」構成ルール
Annotationを闇雲に置くのはノイズです。以下のカテゴリで運用ルールを徹底してください。
- [Logic]: 条件分岐や計算ロジック（例：`if user.is_premium: show_badge`）
- [API]: データ取得先とパラメータ（例：`GET /v1/user/settings`）
- [State]: 状態遷移（例：`Hover: opacity 0.8`, `Active: transform scale(0.95)`）
- [Edge]: 境界条件（例：`Max-width 300px, exceed with ellipsis`）
鉄則: コメントには「何を表示するか」ではなく、「どう振る舞うべきか（State/Logic）」を書くこと。
—
2. 開発スピードを加速させる「神・ショートカット」と運用ハック
エンジニアがDev Modeで時間を溶かすのは「どこに何があるか探す時間」です。以下の運用をチームの共通言語にしてください。
絶対に入れるべき神プラグイン：『Locofy』と『Builder.io』
これらは単なるコード生成プラグインではありません。FigmaのプロパティをReact/Tailwindのコンポーネント構造に変換する、「デザインシステムの翻訳機」です。
- Locofy: デザインをReactコンポーネントのPropsとして定義し、プレビューできる。
- Annotation Manager: 大規模開発で必須。Annotationをレイヤー管理し、一括でON/OFFできる。
隠れたキーボードショートカット
- `Shift + D`: デザインモードとDev Modeの爆速切り替え。
- `Cmd + /`: 最近のFigmaはコマンドパレットが優秀。「Annotation」と打つだけで注釈の追加・フィルタリングに即座にアクセスできる。
—
3. 認識のズレを防ぐ：JSONによる「仕様の型定義」共有
デザイナーとエンジニアが議論する際、口頭で「この値は…」とやるのは非効率です。デザインシステムの一部として、「仕様をJSONで管理する」というアプローチを推奨します。
これをFigmaのDev Modeの「Plugin」エリアや、ドキュメントリンクとして埋め込んでおくと、エンジニアはそのまま型定義に流し込めます。
// design-system-spec.json
{
“component”: “Button”,
“variants”: {
“size”: [“small”, “medium”, “large”],
“priority”: [“primary”, “secondary”]
},
“behavior”: {
“hover”: {
“transition”: “all 0.2s ease-in-out”,
“cursor”: “pointer”
},
“accessibility”: {
“ariaLabel”: “Required: 動的に生成されるボタン名を入れること”
}
}
}
—
4. チーム開発で役立つ「設定の共有化ルール」
最後に、生産性を最大化するための運用フローです。
1. 「Ready for Dev」セクションの厳格化:
- Figmaの各ページに「Ready for Dev」のステータスを作成。ここにあるもの以外は「まだ実装不可」とする。
2. Lintの設定:
- `eslint-plugin-figma` のようなツールを導入し、デザイントークン（JSON）からCSS変数を自動生成するCIを組む。
3. 定期的な「Dev Modeシンク」:
- 週に一度、エンジニアが「今のAnnotationで実装しにくい点」をフィードバックし、デザインシステムを修正する時間を設ける。
—
結論：エンジニアとデザイナーの「距離」をゼロにせよ
優秀なテックリードは、ツールを「作るためのもの」としてだけでなく、「コミュニケーションのラグを埋めるためのもの」として捉えています。
Dev ModeのAnnotationを使いこなし、デザインとコードの境界線を曖昧にしていく。そうすれば、ドキュメントのメンテナンスという不毛な作業から解放され、私たちは「いかにより良い体験をユーザーに届けるか」という本質的な議論に全力を注げるようになります。
さあ、今日からFigmaのツールバーにある「Annotation」を、チームの最強の武器に変えてください。現場からは以上です。