FigmaのDev Mode MCPサーバーは、AIやコーディングアシスタントが構造化されたデザインデータ（コンポーネント階層、変数／デザイントークン、自動レイアウトルール、スタイルなど）に直接アクセスできるようにし、スクリーンショットの解析を不要にします。複数の実用アプリケーションとレビューにより、Claude CodeがMCPクライアントとして機能し、ターミナルまたはIDEで選択したフレームワーク／コンポーネントのコンテキストを取り込み、デザインシステムと連携したフロントエンドコードを生成することが実証されています。また、特定のデザインをリンクして反復処理することも可能です。
Figmaは最近、MCP機能を拡張し、Make内のプロトタイプコードへのリモートアクセスと接続を可能にしました。これにより、AIはビジュアルを「見る」だけでなく、その基盤となる生成されたコードを読み取ることができるため、忠実度が向上します。公式ガイドラインとレポートによると、VS Code、Cursor、Windsurf、Claude Codeはすでにエコシステムを形成しています。Code Connect UI（ベータ版）は、コードベースをFigmaコンポーネントにさらにマッピングすることで、設計から実装までのプロセスを短縮します。ただし、実際の実装には開発者による検証と微調整が必要であり、複雑なページでは精度に管理可能な誤差が生じる可能性があります。
よくある質問
Q: クロード・コードはどのようにデザインを「理解」しているのでしょうか?
A: MCP を介して、画像だけでなく、Figma から構造化データと変数を読み取ります。「選択」または「リンク」でデータを取得できます。
Q: 前提条件は何ですか?
A: Figma デスクトップで開発モード MCP サーバーを有効にし、Claude Code またはその他の MCP 対応クライアントをローカルにインストールします。
Q: 製品レベルのコードを直接入手できますか?
A: 忠実度の高いドラフトを生成することは可能ですが、複雑なシナリオでは依然として手動による検証と再構築が必要であり、これは「開発者が関与する」プロセスです。
Q: リモート/クロスツール呼び出しをサポートしていますか?
A: はい。Figma は Make とのリモートアクセスと接続性を追加し、IDE とエージェントがローカルおよび外部からデザインコンテキストにアクセスできるようになりました。
Q: Code Connect UI との関係は何ですか?
A: Code Connect UI はコードベース コンポーネントを Figma コンポーネントにマッピングし、MCP と連携して一貫性と再利用性を向上させます。
