figma/mcp-server-guide

解決する課題

このプロジェクトは、AIコーディングエージェントがFigmaのデザインデータに直接アクセスできるようにするModel Context Protocol (MCP) サーバーを提供します。レイアウト、コンポーネント、変数などの必要なコンテキストをエージェントに提供することで、デザインシステムの「信頼できる唯一の情報源（source of truth）」に一致する高精度なコードを生成できるようにし、デザインとコードのギャップを埋めます。

仕組み

このサーバーは、FigmaとMCP互換クライアント（VS Code、Cursor、Claude Codeなど）の間の仲介役として機能します。ユーザーがAIエージェントにFigmaのURLを提供すると、エージェントはMCPサーバーを使用して特定のノードIDを抽出し、構造化されたデザインデータを取得します。サーバーは、get_design_context（React + Tailwindの表現を返す）や get_variable_defs（色やスペーシングなどのデザイントークンを抽出する）などのツールを提供します。

対象者

既存のデザインシステムとの一貫性を維持しながら、Figmaのデザインをプロダクションレベルのコードに変換するためにAIエージェントを使用する、プロダクトチーム、開発者、デザイナー。

ハイライト

• 双方向のインタラクション: デザインコンテキストの読み取りと、AIクライアントからのネイティブなFigmaコンテンツ（フレーム、コンポーネント、変数）の直接書き込みの両方をサポートします。
• Code Connectの統合: エージェントが推測するのではなく、実際のコードベースのコンポーネントを再利用できるようにし、一貫性を確保します。
• マルチクライアント対応: VS Code (GitHub Copilot経由)、Cursor、Claude Code、Gemini CLI向けの即時利用可能な設定を提供します。
• Web-to-Design: AIエージェントを介して、ウェブページをFigmaデザインとしてキャプチャおよび変換する機能。
• ワークフロースキル: UIの録画をストーリーボードに、PRDをFigJamのプロジェクトプランに変換するスタンドアロンのスキルが含まれています。