figma/mcp-server-guide

Figma MCP Server ガイド – 何であるか

このリポジトリには、Figma の Model-Context-Protocol (MCP) サーバー のドキュメントとセットアップ手順が含まれています。MCP サーバーは、AI ベースのコーディングアシスタント（例：GitHub Copilot、Cursor、Claude Code、Gemini CLI）が Figma ファイルからデザインデータを読み取り、場合によってはキャンバスに書き戻すことを可能にする軽量な HTTP サービスです。デザイン固有のツール（- get_design_context、generate_image、upload_assets など）を公開することで、LLM は選択された Figma フレームを構造化されたデータに変換し、本番環境対応のコードに変換できます。

コア機能

デザインコンテキストの読み取り – 選択されたノードからコンポーネント、変数、自動レイアウト情報、React + Tailwind 表現を取得。
キャンバスへの書き込み – （ベータ）AI クライアントからフレーム、コンポーネント、変数、自動レイアウトを直接作成または編集。
プレースホルダーアセットの生成 – ファイルにアップロードされる即時画像生成。
コード生成 – 選択されたフレームをコードに変換。Code Connect を使用して、生成されたコードを既存のコンポーネントと同期可能。
将来の機能 – Web ページを Figma デザインに変換。

だれが使うか？

AI アシスタントを使ってデザインとコードの橋渡しをしたい開発者。ガイドでは、VS Code、Cursor、Claude Code、Gemini CLI などの人気エディタからサーバーに接続する方法と、アシスタントにデザインデータを取得、コードを生成、Figma ファイルを更新するように指示する方法を紹介しています。

レート制限と料金

スターター / ビュー / コラボシート：月間 6 回までのツール呼び出し。
プロフェッショナル、組織、エンタープライズプランの Dev / Full シート：Figma の Tier 1 REST API と一致する分単位の制限。
キャンバスへの書き込みはベータ期間中は無料ですが、将来的には使用量課金の機能になります。

サポートリソース

完全な開発者ドキュメント：https://developers.figma.com/docs/figma-mcp-server/
生成されたコードをコードベースと同期させるための Code Connect ドキュメント。
ビデオからストーリーボードへの変換や PRD から FigJam プロジェクト計画への生成用のワークフロー・スキルサブフォルダ。

TL;DR

このリポジトリはコードライブラリではありません。AI エージェントが Figma フレームからデザインデータを読み書きし、コードを生成できるようにするためのステップバイステップガイドです。デザインからコードへのワークフローを簡素化することを目的とした本格的な AI アシスタント統合プロジェクトです。