概要
https://developers.cyberagent.co.jp/blog/archives/58115/
詳細内容
## Figma MCP Serverで変わるWeb開発
https://developers.cyberagent.co.jp/blog/archives/58115/
Figma Dev Mode MCP Serverは、デザインデータから高精度なコードを生成し、Web開発ワークフローを革新します。
**Content Type**: ⚙️ Tools
**Scores**: Signal:4/5 | Depth:4/5 | Unique:3/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 81/100 | **Annex Potential**: 77/100 | **Overall**: 80/100
**Topics**: [[Figma Dev Mode, AIコード生成, デザインシステム, 開発ワークフロー改善, フロントエンド開発]]
Figma Dev Mode MCP Serverは、デザインからコード生成の精度を飛躍的に向上させ、Web開発ワークフローに大きな変革をもたらします。従来、Figmaデザインからのコーディングは、視覚情報に頼るため、色の値やコンポーネント情報、デザインシステムとの連携が不正確になりがちでした。これに対し、Figma公式のDev Mode MCP Server（ベータ版）は、Figma APIでは取得できないCode Connectの情報に直接アクセスできる点が画期的です。
このツールは、`get_code`機能を通じてReactやTailwind形式のコードを生成し、必要に応じてVanilla CSSへの変換も指示できます。また、デザインシステムで定義された変数やトークン、オートレイアウト設定などの詳細なメタデータや構造情報を正確に取得し、AIによる推測ではなく実際のデータに基づく実装を可能にします。
特に重要なのは、既存のコンポーネントライブラリとの連携を強化するCode Connect情報を活用できる点です。これにより、UIコンポーネントの詳細なスタイルを再生成する代わりに、既存のコードベースからコンポーネントをインポートして利用できるため、開発者はゼロからスタイルを記述する手間が省けます。検証では、Code ConnectされたSpindleコンポーネントが、プロジェクトのCSS Modulesに合わせて適切にインポートされることが確認されました。
この導入により、開発者はこれまで手作業で行っていた余白やフォントサイズなどの調整ミスが減り、手戻りが削減されます。また、セレクタ命名のような時間がかかりがちな作業もAIが補完してくれるため、実装の大枠をAIに任せ、より複雑なロジックやインタラクションの実装に集中できるようになります。
一方で、デザインの自動生成精度はFigmaファイルの作り込み具合（特にオートレイアウトの利用状況）に依存するという課題も示されています。しかし、Figmaのアノテーション機能がコンテキストとして利用できるようになるなど、将来的にはデザイン上の動作仕様までコードに反映できるようになり、さらなる開発効率とコード品質の向上が期待されます。Webアプリケーションエンジニアにとって、デザインと開発の連携をかつてないレベルでスムーズにする、実用性の高いツールです。