Cursor などの AI コーディングツールが Figma 設計データにアクセスして、デザインを一度で実装するための Model Context Protocol サーバーです。
中辛 の解説
Figma 設計ファイルから関連レイアウトとスタイル情報を抽出し、Cursor や他の AI コーディングツールへ構造化データで提供する MCP サーバーです。ユーザーは IDE チャットで Figma リンクを共有し、AI に設計実装を指示すると、サーバーが API 経由でメタデータを取得して AI の生成精度を向上させます。レイアウト・スタイル情報に限定してコンテキストを削減し、AI の応答精度と関連性を高めます。npx コマンドで macOS・Linux・Windows に設定でき、環境変数か設定ファイルで Figma API キーを指定して起動できます。
こんなリポジトリです
こんなときに便利です
- デザイナーが Figma で作った UI をフロントエンド開発者が Cursor で実装する際、設計仕様を正確に理解させることで実装精度を向上させる
- Figma ファイルの設計データを AI エージェントに渡して、スクリーンショット貼り付けより正確にコンポーネント実装コードを自動生成する
主な機能
ほかとの違い
スクリーンショット貼り付けと違い、Figma メタデータを構造化データとして AI に提供することで、レイアウトとスタイル認識の正確性を大幅に向上させます。
このリポジトリの作り方
はじめてですか？ むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。
準備するもの
- Figma パーソナルアクセストークン
- Node.js 環境
- Cursor またはその他 MCP 対応 AI コーディングツール
すぐに始める
- Figma パーソナルアクセストークンを作成します
https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens
- Cursor の設定ファイルを開きます（macOS / Linux の場合）
~/.cursor/mcp-config.json または ~/Library/Application\ Support/Cursor/User/globalStorage/state.vscdb
- mcpServers セクションに以下を追加します（YOUR-KEY を実際のトークンに置き換え）
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
-
Cursor を再起動します
-
IDE のチャットモードで Figma ファイルリンクを貼り付けて実装を依頼します
ギット飯トライで味見
入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。
ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。
npx gitbap-try GLips/Figma-Context-MCP
Node.js さえあれば、インストールなしで動きます · ギット飯トライとは？ →
スター推移 · 7日
確認日時
使いやすさ · まねしやすいか
- ゆるいライセンス
- テストあり
- サンプル集
- 最近の更新
- AGENTS.md
- llms.txt
- テンプレート
更新の情報なし · 2025 年に作成
「デザイン・UI コンポーネント」 こういうリポジトリを毎週受け取りませんか？
毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。
自分のリポジトリですか？ README にギット飯バッジを貼る
[](https://www.gitbap.com/r/GLips/Figma-Context-MCP)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 をもとに要約しました · 原文を見る