Figma Dev Modeは「ただのコード生成器」ではない。開発スピードを極限まで高めるための「実装の正典」だ。
こんにちは。テックリードとして数々のプロダクトを世に送り出してきた経験から断言する。Dev Modeを「CSSをコピペするためのウィンドウ」と捉えているなら、君はまだその真価の10%も引き出せていない。
デザインから実装への翻訳作業は、現代のソフトウェア開発における最大の「負債発生源」だ。しかし、Figma Dev Modeを正しく使いこなせば、デザイナーとの対話コストをゼロにし、実装の解像度を極限まで高めることができる。
今日は、現場で即座に生産性を倍にする「Dev Modeの深淵」を伝授しよう。
—
1. Dev Modeは「差分」を見るためにある
多くのエンジニアは、完成したデザインの値をコピーするだけだが、真のプロは「Ready for dev」ステータスと「Compare changes」機能を武器にする。
- Compare changesの活用:
以前のバージョンとの差分を一瞬で可視化せよ。「どこが変わったか」をデザイナーに聞く時間は無駄だ。Dev Mode右側の「History」からバージョンを指定し、差分をハイライトさせることで、修正漏れは確実に撲滅できる。
2. 絶対に導入すべき「神」プラグイン
標準機能だけでは足りない。以下のプラグインは、もはやDev Modeの標準装備としてチーム全体で共有すべきだ。
- [Figma to Code](https://www.figma.com/community/plugin/741460596350320488):
Tailwind CSSやFlutter、Compose向けに最適化されたコードを生成する。単なるCSSではなく、プロジェクトのDesign Systemに合わせたクラス名を書き出す設定を詰め込め。
- [Token Studio for Figma](https://www.figma.com/community/plugin/843461159747178978):
これが最も重要だ。Figmaのデザイン値と、コード側のデザインシステム（Style Dictionary等）を同期させる。これを導入すれば、「余白の値が微妙に違う」といった無益な議論は過去のものとなる。
3. 実装効率を極めるキーボードショートカット
思考を止めないために、指に覚えさせるべきショートカットがこれだ。
- `Shift + D`: デザインモードとDev Modeの爆速切り替え。
- `Cmd + /` (Mac) / `Ctrl + /`: クイックアクションの呼び出し。ここから「Inspect」設定やプラグインを瞬時に起動する。
- コンポーネント選択中の `Enter` / `Shift + Enter`: レイヤー階層を潜る。Dev Modeで複雑なAuto Layoutの中身を探る際に必須。
—
4. チームで共有すべき「デザインシステム設定」のベストプラクティス
CSSの値をそのままコピペしてプロダクトが散らかるのを防ぐために、「JSONでのトークン管理」を徹底せよ。Figmaから書き出したトークンを、プロジェクトの `theme.json` に落とし込むフローを確立する。
実践：プロジェクト設定例 (theme.json)
{
“colors”: {
“primary”: { “value”: “#3B82F6” }, // FigmaのPrimary Colorと同期
“surface”: { “value”: “#FFFFFF” }
},
“spacing”: {
“xs”: { “value”: “4px” },
“md”: { “value”: “16px” }, // 8pxグリッドシステムを強制する
“lg”: { “value”: “32px” }
},
“typography”: {
“heading”: { “fontSize”: “24px”, “fontWeight”: “700” }
}
}
これらを `Style Dictionary` 等のビルドツールで各言語（CSS, Swift, Kotlin）に展開する。Figma上のデザイン値が変更されたら、このJSONが自動更新されるパイプラインを構築するのが、真のテックリードの仕事だ。
—
5. VS Codeとのシームレスな連携
VS Codeの「Figma for VS Code」拡張機能は必須だ。
ブラウザを行き来する必要はない。VS CodeのサイドバーにFigmaを表示し、デザインコードを直接エディタにドラッグ＆ドロップせよ。
【現場の極意】
- コメント機能を活用せよ: 実装で迷った箇所は、Figmaのコメント機能にスクリーンショットと共に投げ込む。エンジニアの「ここ、レスポンシブどうします？」という質問が、Figmaの画面上で完結する。メールやSlackでコンテキストを説明する時間は、最も生産性の低い時間だ。
—
最後に：デザインは「仕様書」ではなく「ソースコード」である
FigmaのDev Modeは、デザイナーが作った「絵」を、エンジニアが「推測」して実装するためのツールではない。デザインシステムという「共通言語」を使って、デザイナーとエンジニアが同じコードベースを操作するための場所だ。
もし君が今のプロジェクトで、デザインと実装の乖離に苦しんでいるなら、まずはチームで「トークンの命名規則」と「Figma上のAuto Layoutのルール」を統一することから始めてほしい。
ツールを使いこなすのではない。ツールを通じて、チームの「思考の同期」を行うのだ。それが、最高峰のプロダクトを生み出すための唯一の道である。
さあ、Dev Modeを開いて、無駄な迷いをすべてコードに置き換えにいこう。