Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
作者による説明(英語の原文)
MCP server enabling AI assistants to interact with Figma designs via natural language commands
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
FIGMA_ACCESS_TOKEN「秘密」と表示された値は、あなたのアカウントの鍵です。絶対に人に教えたり、チャットに貼り付けたりしないでください。
必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"figma-actor": {
"command": "npx",
"args": [
"-y",
"@oabolade-pegasus/figma-mcp-server"
],
"env": {
"FIGMA_ACCESS_TOKEN": "your-value"
}
}
}
}ターミナルでこれを実行します
claude mcp add figma-actor --env FIGMA_ACCESS_TOKEN=your-value -- npx -y @oabolade-pegasus/figma-mcp-server動かす前に、空欄の値を入力してください。
プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"figma-actor": {
"command": "npx",
"args": [
"-y",
"@oabolade-pegasus/figma-mcp-server"
],
"env": {
"FIGMA_ACCESS_TOKEN": "your-value"
}
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"figma-actor": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@oabolade-pegasus/figma-mcp-server"
],
"env": {
"FIGMA_ACCESS_TOKEN": "your-value"
}
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月7日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント oabolade で確認済みです
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
入力が必要なもの:FIGMA_ACCESS_TOKEN
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は–、最新バージョン(2.1.0)がレジストリに届いたのは11 か月前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。
同じカテゴリには:Figma Context MCP, Claude Real Video, Figma MCP Server
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:★ GitHubスターi3つの柱:レビュー · チェック · 利用状況i更新=最新バージョンをレジストリに公開した日i
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Let any LLM watch a video locally — and search everything it has ever watched.
The Figma MCP server brings Figma design context directly into your AI workflow.
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
Model Context Protocol (MCP) server that exposes Figma REST API capabilities to AI assistants (Cursor, Claude, custom agents). Runs as a long-running web server on the Apify platform (standby / container URL) or locally via apify run.
Recommended for solo use. Set `figmaAccessToken` in Actor input (or FIGMA_ACCESS_TOKEN in env).
X-Figma-Token/oauth/* routes return an error).Use when you omit figmaAccessToken and provide a Figma OAuth app:
| Input | Purpose |
|---|---|
oauthClientId | From Figma → Developers → Apps |
oauthClientSecret | Same app |
oauthRedirectUri | Exact redirect URL registered on the app, e.g. https:// .runs.apify.net/oauth/callback |
oauthScopes | Optional; comma-separated scopes. Must be a subset of the app’s configured scopes. Defaults include file_content:read, file_content:write, file_comments:read, file_comments:write. |
Flow
FIGMA_OAUTH_SESSION) and refreshed when near expiry.Token exchange uses Figma’s documented endpoints (https://api.figma.com/v1/oauth/token and .../oauth/refresh). Codes expire quickly — complete the redirect promptly.
npm install
apify login apify push
In Apify Console, open the Actor, set input (at minimum figmaAccessToken), start with web server / long-running as required by your template, then use the Container URL from the run.
Deploy reference: apify push builds and publishes; see Apify CLI.
| Parameter | Type | Default | Description |
|---|---|---|---|
figmaAccessToken | string | — | PAT (recommended). If set, used for all Figma API calls. |
port | integer | 8080 | HTTP listen port (Apify may override via web_server_port). |
oauthClientId | string | — | OAuth app client ID (only if not using PAT). |
oauthClientSecret | string | — | OAuth app secret (secret input). |
oauthRedirectUri | string | — | Must match Figma app redirect URI exactly. |
oauthScopes | string | — | Optional scope override (comma-separated). |
maxConcurrentRequests | integer | 10 | Reserved / future use. |
enableCaching | boolean | true | Cache GET responses from Figma. |
Local / CLI input file example (apify run):
{
"figmaAccessToken": "figd_...", "port": 8080 }
| Method | Path | Description | ||
|---|---|---|---|---|
GET | / | Service info and endpoint list | ||
GET | /health | Liveness; includes auth_mode: pat \ | oauth \ | pending_oauth, figma_authenticated |
POST | /mcp | MCP JSON-RPC 2.0 (primary transport for this server) | ||
GET | /oauth/authorize | Start OAuth (browser); disabled if PAT is set | ||
GET | /oauth/callback | OAuth redirect handler |
Apify MCP path: .actor/actor.json sets webServerMcpPath to `/mcp`. Your MCP client URL is typically:
https:// .runs.apify.net/mcp
(Use the Container URL from the run page + /mcp.)
Example (remote HTTP MCP — adjust to your Cursor version’s expected shape):
{
"mcpServers": { "figma-mcp-standby": { "url": "https://YOUR_RUN_ID.runs.apify.net/mcp" } } }
Notes
mcp.json is not passed to this Node process; it does not replace Figma auth. Use `figmaAccessToken` (or OAuth) in Actor input.mcp.json and restart Cursor after a new run.curl https://.../health.Use your client’s supported way to attach a remote MCP URL (e.g. mcp-remote pointing at https://.../mcp). Paths and query params depend on the client version.
npm install
apify run
Or run the entry with Node if you inject env / input yourself:
export FIGMA_ACCESS_TOKEN="figd_..."
node src/main.js
Check health (port from logs or input):
curl -s http://localhost:8080/health | jq .
Sample MCP initialize:
curl -s -X POST http://localhost:8080/mcp \
-H "Content-Type: application/json" \ -d '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{}}'
figma_mcp_actor/
├── .actor/ │ ├── actor.json # Apify Actor metadata (incl. webServerMcpPath: /mcp) │ ├── input_schema.json │ ├── output_schema.json │ └── dataset_schema.json ├── src/ │ ├── main.js # Express app, /mcp, /oauth/*, Apify bootstrap │ ├── figma/ │ │ ├── auth.js # PAT + OAuth token exchange, refresh, KV hook │ │ └── client.js # Figma REST wrapper │ ├── oauth/ │ │ └── persist.js # Apify KV: FIGMA_OAUTH_SESSION │ ├── mcp/ # Protocol, handlers, server │ ├── tools/ │ ├── resources/ │ └── prompts/ ├── Dockerfile ├── package.json └── README.md
Includes (names may vary slightly in code): file analysis (analyze_file, get_file_structure, …), components (list_components, …), export (export_node, …), comments (get_comments, create_comment, …), design modification helpers, plus resources (figma://file/..., etc.) and prompts for common tasks.
npm run lint
npm run lint:fix npm run format
ISC
FIGMA_OAUTH_SESSION).oauthRedirectUri, oauthScopes.auth_mode, figma_authenticated./mcp JSON-RPC.References: Apify Actors · Figma REST API · Model Context Protocol