A
licenseNot graded
qualityB
maintenanceEnables Cursor to access Figma files through the Model Context Protocol, enhancing its ability to accurately interpret and utilize design data for code generation.
90,948 npm
15,964
MIT
Figma MCP Server
by TimHolden
Figma MCP サーバー
Claude やその他の MCP 対応クライアントを介して Figma API との統合を実現する Model Context Protocol (MCP) サーバー。現在は Figma ファイルとプロジェクトへの読み取り専用アクセスをサポートしていますが、サーバーサイドアーキテクチャはより高度なデザイントークンとテーマ管理機能をサポート可能です（Figma API の拡張またはプラグインの開発を待っています）。
プロジェクトのステータス
現在の進捗状況
✅コア実装: モデルコンテキストプロトコル (MCP) に準拠した TypeScript サーバーの構築に成功しました
✅ Claude デスクトップ統合: Claude デスクトップでテスト済み、機能的
✅読み取り操作: Figma ファイルアクセス用の
get-fileおよびlist-filesツールの動作✅サーバーアーキテクチャ: キャッシュシステム、エラー処理、統計監視が実装されています
✅トランスポートプロトコル: stdio と SSE トランスポートメカニズムの両方をサポート
完全な機能の潜在
サーバーは、次の機能をサポートするコードを使用して設計されています (現在は API 制限によって制限されています)。
変数管理: デザイントークン(変数)の作成、読み取り、更新、削除
参照処理:トークン間の関係を作成し検証する
テーマ管理: 複数のモード（例: 明るい/暗い）でテーマを作成します
依存関係分析: 循環参照を検出して防止する
バッチ操作: 変数とテーマに対して一括操作を実行します
Figma プラグインの開発または API アクセスの拡張により、これらの機能を完全に有効にすることができます。
Related MCP server: Figma MCP Server
特徴
🔑 Figma API による安全な認証
📁 ファイル操作（読み取り、リスト）
🎨 デザインシステム管理
変数の作成と管理
テーマの作成と設定
参照処理と検証
🚀 パフォーマンスが最適化されました
LRUキャッシュ
レート制限の処理
接続プール
📊 包括的な監視
健康診断
使用統計
エラー追跡
前提条件
Node.js 18.x 以上
適切な権限を持つFigmaアクセストークン
MCP（モデルコンテキストプロトコル）の基本的な理解
インストール
npm install figma-mcp-server構成
.env.exampleに基づいて.envファイルを作成します。
# Figma API Access Token
FIGMA_ACCESS_TOKEN=your_figma_token
# Server Configuration
MCP_SERVER_PORT=3000
# Debug Configuration
DEBUG=figma-mcp:*Claude デスクトップ統合の場合:
サーバーは、Claude Desktop 構成ファイルで構成できます。
macOS:
~/Library/Application Support/Claude/claude_desktop_config.jsonWindows:
%APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"figma": {
"command": "node",
"args": ["/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"],
"env": {
"FIGMA_ACCESS_TOKEN": "your_token_here"
}
}
}
}重要な注意事項:
相対パスではなく絶対パスを使用する
Windowsでは、パスに二重のバックスラッシュ（\\）を使用します。
設定を変更した後、Claude Desktopを再起動します。
使用法
基本的な使い方
import { startServer } from 'figma-mcp-server';
const server = await startServer(process.env.FIGMA_ACCESS_TOKEN);利用可能なツール
ファイルを取得
Figmaファイルの詳細を取得するGXP5
リストファイル
FigmaプロジェクトGXP6内のファイルを一覧表示する
変数の作成
デザインシステム変数GXP7の作成
テーマ作成
テーマの作成と設定 GXP8
APIドキュメント
サーバーメソッド
startServer(figmaToken: string, debug?: boolean, port?: number)MCPサーバーを初期化して起動します
戻り値: Promise
ツールスキーマ
すべてのツール入力は Zod スキーマを使用して検証されます。
const CreateVariablesSchema = z.object({
fileKey: z.string(),
variables: z.array(z.object({
name: z.string(),
type: z.enum(['COLOR', 'FLOAT', 'STRING']),
value: z.string(),
scope: z.enum(['LOCAL', 'ALL_FRAMES'])
}))
});エラー処理
サーバーは詳細なエラー メッセージと適切なエラー コードを提供します。
無効なトークン: 特定のエラーメッセージを含む 403
レート制限: リセット時間付き429
検証エラー: フィールド固有の詳細を含む 400
サーバーエラー: エラー追跡付き 500
制限事項と既知の問題
API制限
読み取り専用操作
Figma API の制限により読み取り専用操作に制限されます
個人アクセストークンは読み取り操作のみをサポートし、書き込み操作はサポートしません。
個人トークンを使用して REST API 経由で変数、コンポーネント、またはスタイルを変更することはできません
書き込み操作には、代わりにFigmaプラグインの開発が必要になります。
レート制限
Figma API のレート制限に従います
より良い処理のために指数バックオフを実装する
キャッシュ管理
デフォルトの5分間のTTL
500名限定
キャッシュ無効化フックの実装を検討する
認証
個人アクセストークンのみサポート
チームレベルの権限や共同編集はサポートされていません
将来的にOAuth実装が予定されている
技術的実装
設定には絶対パスが必要です
実行前にTypeScriptファイルをコンパイルする必要がある
ローカルとグローバルの両方のモジュール解決を処理する必要があります
貢献
リポジトリをフォークする
機能ブランチを作成する
テストで変更を加える
プルリクエストを送信する
弊社のコーディング標準に従ってください:
TypeScript 厳密モード
ESLintの設定
テスト用のJest
包括的なエラー処理
ライセンス
MITライセンス - 詳細はLICENSEファイルを参照
トラブルシューティング
包括的なトラブルシューティング ガイドについては、 TROUBLESHOOTING.md を参照してください。
よくある問題
JSON接続エラー
Claude Desktop の設定で絶対パスを使用する
サーバーがビルドされていることを確認する（
npm run build）すべての環境変数が設定されていることを確認する
認証の問題
Figmaアクセストークンが有効であることを確認してください
トークンに必要な権限があることを確認する
トークンが構成で正しく設定されていることを確認する
サーバーが起動しない
Node.js のバージョンを確認する (18.x 以上が必要)
ビルドが存在することを確認する (
dist/index.js)Claude Desktop のログを確認します。
macOS:
~/Library/Logs/Claude/mcp*.logWindows:
%APPDATA%\Claude\logs\mcp*.log
より詳細なデバッグ手順と解決策については、トラブルシューティング ガイドを参照してください。
サポート
GitHub Issues:バグを報告する
ドキュメント: Wiki
Discord:コミュニティに参加する
Available Tools
2 toolsget-fileA
Get details of a Figma file
ParametersJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| fileKey | Yes | The Figma file key |
TDQS
A3.5/5.0
Behavior2/5
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, description carries full burden but only says 'get details'. No disclosure of what details include, authentication needs, or side effects.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Conciseness5/5
Is the description appropriately sized, front-loaded, and free of redundancy?
Single sentence, front-loaded with verb and resource, no wasted words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Completeness3/5
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple one-parameter read tool, description is minimally complete but lacks specificity on what 'details' are returned.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Parameters3/5
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with a single parameter documented. Description adds no extra meaning beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Purpose5/5
Does the description clearly state what the tool does and how it differs from similar tools?
Description clearly states the action ('Get') and resource ('details of a Figma file'). It distinguishes from sibling 'list-files' which lists files.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Usage Guidelines3/5
Does the description explain when to use this tool, when not to, or what alternatives exist?
No explicit guidance on when to use this tool versus alternatives. Usage is implied but not clarified.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list-filesB
List files in a Figma project
ParametersJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| projectId | Yes | The Figma project ID |
TDQS
B3.2/5.0
Behavior2/5
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations, and description lacks behavioral context. Does not inform about pagination, result format, or any constraints. Minimal transparency.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Conciseness4/5
Is the description appropriately sized, front-loaded, and free of redundancy?
Single sentence, no redundancy. However, it might be too minimal; a little more detail would improve without harming conciseness.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Completeness3/5
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Covers basic purpose but lacks guidance on response format, limitations, or differentiation from sibling. Adequate but not complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Parameters3/5
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Parameter is fully described in schema. Description does not add additional meaning or context (e.g., format of ID, where to find it). So baseline score of 3.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Purpose5/5
Does the description clearly state what the tool does and how it differs from similar tools?
Clearly states action (list) and resource (files in a Figma project). Distinguishes from sibling tool get-file which likely retrieves a single file.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Usage Guidelines2/5
Does the description explain when to use this tool, when not to, or what alternatives exist?
No usage guidelines provided; agent must infer from context alone. Does not mention when to use list versus get or any exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
2 tool updates
v1.0.1- First observed
get-file - First observed
list-files
TDQS
B3.4/5.0
Scored across 2 tools
Disambiguation5/5
The two tools are clearly distinct: one retrieves details of a specific file, the other lists files in a project. There is no overlap or ambiguity.
Naming Consistency5/5
Both tools follow a consistent verb_noun pattern (get-file, list-files) using snake_case, making them predictable and readable.
Tool Count3/5
With only 2 tools, the server feels very thin for a full Figma integration. While the count is borderline, it is still usable for basic file listing and retrieval.
Completeness2/5
The server lacks critical operations such as creating, updating, or deleting files, and does not cover other common Figma resources like components or styles. This is a significant gap for expected Figma workflows.
Maintenance
ActivityInactive
ResponsivenessNo issues
Related MCP Connectors
The Figma MCP server brings Figma design context directly into your AI workflow.
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Enable secure connectivity between Sentry issues and debugging data, and LLM clients, using a Model Context Protocol (MCP) server.
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…
Related MCP Servers
- FlicenseBqualityDmaintenanceEnables AI assistants to interact with Figma files through the ModelContextProtocol, allowing viewing, commenting, and analyzing Figma designs directly in chat interfaces.51,945 npm213-
- AlicenseBqualityDmaintenanceAllows Cursor AI to communicate with Figma for reading designs and modifying them programmatically through a Model Context Protocol integration.381,129 npm1MIT
- FlicenseBqualityDmaintenanceEnables Cursor AI to read and modify Figma designs programmatically via the Model Context Protocol.381,129 npm3-