Dev Mode

デザインデータからのコーディングは、スクリーンショットの貼り付けや手作業での数値確認が必要で、開発の大きなボトルネックになりがちです。Figma MCPサーバーは、この課題をAIエージェントとの直接連携で解消する仕組みとして注目されています。 本記事では、Figma MCPサーバーの基本的な仕組みから具体的なセットアップ手順、料金プランとの関係、実務で成果を出すための活用テクニックまでを体系的に整理しています。 Figma MCPサーバーとは？デザイン情報をAIに直結させる仕組み Figma MCPサーバーは、Anthropicが策定した**Model Context Protocol（MCP）**に準拠したサーバーです。Figmaのデザインファイルから、レイアウト構造・カラー・タイポグラフィ・変数・コンポーネント情報などを構造化データとしてAIコーディングツールに提供します。 従来のワークフローでは、デザインを確認しながらCSSの値を手動でコピーしたり、コンポーネントの仕様をドキュメントで共有したりする必要がありました。MCPサーバーを導入すると、AIエージェントがFigmaのデザインデータを直接読み取り、そのコンテキストに基づいたコード生成を行えるようになります。 MCPの基本アーキテクチャ MCPは「クライアント─サーバー」型のプロトコルです。Figma MCPサーバーにおける構成要素は以下の通りです。 構成要素 役割 具体例 MCPサーバー デザインデータを構造化して配信 Figma MCPサーバー（デスクトップ/リモート） MCPクライアント サーバーからデータを受け取りAIに渡す VS Code、Cursor、Claude Codeなど AIモデル デザインコンテキストを基にコードを生成 Claude、GPTなど 開発者はMCPクライアント（エディタ）上でプロンプトを入力するだけで、AIがFigmaの正確なデザイン情報を参照しながらコードを出力します。 デスクトップ版とリモート版の違い Figma MCPサーバーにはデスクトップサーバーとリモートサーバーの2種類があります。用途やチーム構成に応じた選択が重要です。 比較項目 デスクトップサーバー リモートサーバー 動作環境 Figmaデスクトップアプリ（ローカル） Figmaクラウド（ブラウザ利用可） エンドポイント http://127.0.0.1:3845/mcp https://mcp.figma.com/mcp 操作方式 セレクションベース＋リンクベース リンクベースのみ 必要なプラン 有料プランのDevシートまたはFullシート 全プランで利用可能（呼び出し回数制限あり） Figmaアプリ デスクトップアプリが必須 不要（ブラウザのみで完結） レスポンス速度 ローカル通信のため高速 ネットワーク経由のため若干の遅延あり セレクションベースとリンクベースの違い セレクションベースはデスクトップサーバー限定の機能です。Figmaアプリ上でフレームやレイヤーを直接選択し、MCPクライアント側で「選択中の要素を実装して」と指示できます。直感的な操作が可能で、特定のUI部品を素早くコード化する場面に適しています。 リンクベースはデスクトップ・リモート両方で使えます。Figma上でフレームを右クリックして「リンクをコピー」し、そのURLをエディタのプロンプトに貼り付けて指示を出します。ファイル全体のURLを渡せば、ページ単位の一括処理も可能です。 料金プランとMCPサーバーの利用条件 Figma MCPサーバーの利用可否はFigmaのプランとシートタイプによって異なります。2025年3月のプラン改定以降の体系を整理します。 プラン別の利用条件一覧 プラン シートタイプ デスクトップMCP リモートMCP 月額目安（年払い時） Starter（無料） - 利用不可 月6回まで 無料 Professional Devシート 利用可 レート制限内で利用可 $12/月 Professional Fullシート 利用可 レート制限内で利用可 $16/月 Organization Dev/Fullシート 利用可 レート制限内で利用可 $55/月〜 Enterprise Dev/Fullシート 利用可 レート制限内で利用可 $90/月〜 リモートサーバーは無料プランでも利用できますが、ツール呼び出し回数が月6回に制限されています。実用的にMCPを活用するには、最低でもProfessionalプランのDevシート（年払いで月額$12相当）が必要です。 ...