Figmaは正式に、そのDev Mode MCP（Model Context Protocol）サーバーのベータ版をリリースし、デザインと開発のワークフローがさらに融合したことを示しました。このサービスは、標準化されたプロトコルを通じてFigmaのデザインデータをAIコードツールに直接送信することで、デザインからコードへの変換効率と正確性を大幅に向上させます。

image.png

Dev Mode MCP サービスが正式に稼働開始

FigmaのDev Mode MCPサーバーは現在ベータテスト段階にあり、複数のAIコードツールとシームレスに統合できるようになっています。これは、VS Code with Copilot、Cursor、Windsurf、Claude Codeなどです。ユーザーはFigmaデスクトップアプリの「環境設定」でDev Mode MCPサーバーを有効にし、対応する開発環境にURLを入力するだけで、デザインデータのリアルタイム転送が可能です。このサービスにより、AIツールはFigmaのデザインコンテキスト（コンポーネント、変数、スタイル、スペース、カラーなど）に直接アクセスできるため、従来の手動プロセスやエラーを排除できます。

Figmaの公式ブログによると、MCPサーバーは現在、DevまたはFull Seatライセンスを持つユーザーのみが利用可能です。将来的には、リモートサーバー機能やより深いコードベースの統合を導入し、さらなる用途拡張を目指す予定です。

MCP: デザインと開発の「共通インターフェース」

Model Context Protocol（MCP）は、AIアプリケーションの「USB-Cポート」として称賛されており、Anthropicによって開発されオープンソース化されています。MCPの目的は、AIモデルと外部ツールやデータソース間のやり取り方法を標準化することです。Figmaの公式MCPサーバーは、このプロトコルを利用して、設計ファイル内の構造化データ（レイアウト、デザイントークン、コンポーネント名など）をAIコードアシスタントに直接提供し、より精度の高いコードを生成させることが可能です。従来の視覚的な推測に頼る手法よりも、MCPはコード出力を忠実度や一貫性において大幅に向上させています。

ソーシャルメディア上では、開発者たちがFigmaの公式MCPサービスの登場に高い期待を寄せています。コミュニティが提供していた非公式のMCPソリューションに比べて安定しており、機能も豊富だと評価されています。多くのユーザーは、Figmaのネイティブサポートにより、デザインシステムと開発環境の融合が進むと述べており、特に素早い反復が必要なスタートアップや大規模チームでの活用が期待されています。

Figma Makeとのシナジー効果

FigmaのMCPサービスは最近公開されたFigma Makeプラットフォームとも補完的な関係にあります。Figma Makeは、自然言語プロンプトを使ってインタラクティブなUIやプロトタイプを生成する機能を持っていますが、一方でMCPはデザインデータを開発ツールに送信することに特化しています。この組み合わせにより、製品チームには迅速なプロトタイピングから本番環境のコード生成までの一連のワークフローが提供されます。たとえば、開発者はまずFigma Makeで初期UIを作成し、その後MCPサーバーを使って設計詳細をReact、SwiftUI、Jetpack Composeなどのコード形式に変換することができます。

コメントによれば、Figmaのこの動きはAdobe、Canva、そしてWordPress、WixなどのAI駆動型デザイン＆開発プラットフォームに対する直接的な挑戦であると考えられています。MCPの導入により、Figmaはデザイン-開発協業分野におけるリーダーシップをさらに強固なものにしました。

Figma公式のMCPサービスのリリースは、AIがデザインと開発協業における役割を一段と深めることを示しました。ソーシャルメディアのフィードバックでは、開発者がMCPの使いやすさと安定性を高く評価していることがわかりました。特にCursorやVS Codeとの統合において、デザインからコードへの手動作業量が大幅に減少しました。ただし、現在のベータ版ではいくつかの制約があります。例えば、ローカルサーバーでの実行しかできず、フルシートユーザー以外にはまだ開放されていません。

将来的には、Figmaが数カ月以内にリモートサーバー機能やより深いコードベースの統合を導入する計画があるため、MCPはデザインと開発協業の標準ツールとして広く受け入れられる可能性があります。AIbaseによれば、このサービスは開発者の技術的な敷居を下げ、クロスファンクションチーム間の新たな協力可能性をもたらし、AI駆動型デジタル製品開発のさらなる推進に寄与すると考えられます。

公式紹介: https://www.figma.com/blog/introducing-figmas-dev-mode-mcp-server/