Figma デザインから AI エージェントへ設計情報を提供し、コード生成を支援する MCP サーバーです。
中辛 の解説
Figma MCP サーバーは、Figma 内のフレームやレイヤーへのリンクを AI エージェントに渡すと、デザイン情報（レイアウト・変数・コンポーネント参照・Code Connect 設定）を構造化データとして抽出し、コード生成に供給するプロトコルサーバーです。VS Code・Cursor・Claude Code・Gemini CLI など複数の IDE に HTTP 接続で組み込め、各クライアントが提供するプラグイン（Cursor・Claude Code）またはコマンドで設定できます。デザインからコード化までの流れは、Figma リンク共有 → AI プロンプト入力 → デザインコンテキスト自動取得 → コード出力という順序です。生成品質は Figma ファイルの構造（コンポーネント化・変数利用・レイヤー命名・オートレイアウト）と、プロンプト・プロジェクトルール（ YAML/Markdown 形式）で左右されます。Starter プランや View/Collab 席は月 6 回まで、Dev/Full 席は API Tier 1 制限に従います。
こんなリポジトリです
こんなときに便利です
- デザイナーが Figma 内のボタン・カード・フォーム等のフレームを共有して、AI エージェントが該当コンポーネントの React+Tailwind コードを生成し、開発チームが既存デザインシステムに統合する場合
- UI 画面プロトタイプを Figma で作成後、AI に Code Connect で登録済みコンポーネント参照を与え、実装コードが設計意図と一致するよう自動生成される場合
主な機能
ほかとの違い
プラグインまたは CLI コマンドで主要 IDE に一度設定すれば、Figma リンク共有だけで自動的にデザインコンテキストを AI エージェントが抽出でき、手動でデータ変換・指定する手間が不要です。
このリポジトリの作り方
はじめてですか？ むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。
準備するもの
- GitHub Copilot アカウント（VS Code での使用時）
- MCP 対応エディタ（VS Code・Cursor・Claude Code・Gemini CLI など）
- Figma アカウント
すぐに始める
- VS Code の場合：コマンドパレット（⌘ Shift P）で
MCP:Add Serverを検索して実行します。
# コマンドパレットで MCP:Add Server を選択 → HTTP → https://mcp.figma.com/mcp → サーバーID: figma
-
チャットツールバー（⌥⌘B または ⌃⌘I）を開き、Agent モードに切り替えます。
-
チャット内で
#get_design_contextと入力して、Figma MCP ツールが利用可能か確認します。
Cursor の場合（推奨）
- Cursor のエージェントチャットで以下を実行します。
/add-plugin figma
- プラグインが MCP 設定とスキルを自動追加します。
Claude Code の場合（推奨）
- ターミナルから Anthropic 公式プラグインをインストールします。
claude plugin install figma@claude-plugins-official
Gemini CLI の場合
- 拡張機能をインストールします。
gemini extensions install https://github.com/figma/mcp-server-guide
- Gemini CLI 内で認証を実行します。
/mcp auth figma
ギット飯トライで味見
入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。
ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。
npx gitbap-try figma/mcp-server-guide
Node.js さえあれば、インストールなしで動きます · ギット飯トライとは？ →
スター推移 · 7日
確認日時
使いやすさ · まねしやすいか
- ゆるいライセンス
- テストあり
- サンプル集
- 最近の更新
- AGENTS.md
- llms.txt
- テンプレート
最近の更新あり · 2025 年に作成
「デザイン・UI コンポーネント」 こういうリポジトリを毎週受け取りませんか？
毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。
自分のリポジトリですか？ README にギット飯バッジを貼る
[](https://www.gitbap.com/r/figma/mcp-server-guide)Claude からそのまま使う — ギット飯のつなぎ方
ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。
Claude の設定 → コネクタにこのアドレスを貼り付け。
https://www.gitbap.com/api/mcpプラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI が README をもとに要約しました · 原文を見る