9月23日、Figmaは公式のリモートMCP（Model Context Protocol）サーバーを正式にリリースしました。このイノベーティブなツールにより、Figmaクライアントに依存することなく、AIコードエージェントがデザインの文脈にスムーズに接続できるようになりました。IDE、ブラウザ、モバイルなど、あらゆる環境で簡単な認証を行うことで、デザインファイルから本番用コードへの高精度な変換が可能です。このアップデートにより、プロトタイプから製品へのプロセスが加速し、設計システムとフロントエンド開発の深く統合される新たな時代を迎えています。

コアアップデートの詳細: リモートアクセス、デザイン文脈を自由に操作

Figma MCPサーバーの核となるのは、標準化されたプロトコルのサポートです。これにより、AIモデルはスクリーンショットや手動の説明ではなく、デザインファイルの意味層情報を直接「読み取る」ことができます。最新バージョンでは以下の主要な機能が追加されています:

 クライアント不要のリモートアクセス: 以前はFigmaのデスクトップアプリをインストールしてローカルサーバーを動作させる必要がありました。今では、サポートされているAIツール（Cursor、Claude Code、VS CodeまたはWindsurfなど）にサーバーURL（https://127.0.1:3845/sse）を追加し、ウェブからワンクリックでOAuth認証を行うだけで、いつでもデザインデータにアクセスできます。このアップデートは、分散チームにとって特に有用で、複数のデバイスにインストールする煩雑さを回避します。

image.png

 Figma Makeとのシームレスな統合: サーバーはMakeファイルからリソースを直接抽出でき、インタラクティブなプロトタイピングをコードレベルの資産に変換します。AIはレスポンシブレイアウト、デザイントークン、インタラクションの詳細を自動的に解析し、生成されたコードが製品の仕様に適合することを保証します。

 Code Connect UIコンポーネントマッピングの最適化: 新たなネイティブマッピングインターフェースが追加され、ユーザーはFigma内で一括してデザインコンポーネントとフロントエンドコードベースを関連付けることができます。チームが成熟したデザインシステムを持っている場合、コンポーネントの利用率が高いほど、AIが生成するフロントエンドコードの復元度が100%に近づきます。例えば、「このデザインをReactコンポーネントとして実装してください」と入力すると、AIは変数、スタイル、レイアウトを含む完全なコードを出力します。

これらの機能はMCPプロトコルによって標準化されており、GPT5CodexやClaudeなどのAIエージェントがデザインの意図を「理解する」ことを可能にし、単なるピクセルのコピーにとどまりません。初期テストでは、開発の反復時間が60〜80%短縮することが確認されています。

操作ガイド: 3ステップで接続、AIがすぐにあなたのデザインを理解

接続プロセスは簡潔で効率的であり、プロフェッショナルプラン以上のお客様向けです:

1. サーバーを有効にする: Figmaのウェブ版の設定でDev Mode MCPサーバーをアクティブ化するか、リモートモードを直接使用します。

2. AIツールに追加する: CursorやClaude CodeのMCP設定でFigmaサーバーの構成を入力し、アカウントを認証します。SSE（Server-Sent Events）プロトコルをサポートするツールであればすべて互換性があります。

3. コードを生成する: Figmaのリンクを貼り付け、AIがコンポーネントの階層、自動レイアウトルール、デザイントークンを自動的に抽出し、TailwindやReactなどのフレームワークのコードをワンクリックで出力します。例として「このレイアウトをモバイル対応に最適化してください」という指示を出すことで、出力をさらに細かく指定できます。

注意: 無料版のユーザーは現在アクセスできません。プロフェッショナル／企業版へのアップグレードが必要です。Figmaは、サーバーがSOC2のセキュリティ基準に適合しており、ユーザーのデータは文脈提供のためにのみ使用され、モデルのトレーニングには参加しないと強調しています。

市場への影響: AIエージェントエコシステムの加速、協力効率の倍増

今回のアップデートは、デザインと開発の脱節という長年の問題を直撃しています。過去にはデザインファイルの手動「翻訳」に何時間も費やすことがありました。今では、MCPサーバーがAIを橋渡しにすることで、特にコンポーネントが多いプロジェクトでは、フロントエンド開発者が一括で高還元度のコードを生成できるようになりました。業界からのフィードバックによると、Affirmなどの企業がこのツールを使って製品プロセスを再構築し、開発速度を「桁違い」に向上させています。

Figmaのこの一歩は、MCPがAIツールチェーンにおいて重要な地位を占めるようにしています。Chrome DevTools MCPやWindsurfとの統合により、「デザイン文脈がどこでも利用可能」なエコシステムが構築されています。今後、Figmaはより多くのコードリポジトリの統合やブラウザネイティブサポートの拡大を目指し、「ビーブコーディング（直感的コーディング）」を主流にしようとしています。

詳細: https://www.figma.com/blog/design-context-everywhere-you-build/