Figma MCP Server
Figma MCP 服务器
用于分析 Figma 文件结构的 MCP(模型上下文协议)服务器。
特征
分析 Figma 文件以提取节点层次结构
支持 REST API 和 MCP 协议
可配置节点树深度
Related MCP server: Figma MCP
先决条件
Node.js 16+
npm 或 yarn
Figma API 密钥
安装
来自 npm
npm install -g figma-mcp-server从源头
git clone https://github.com/yourusername/mcp-figma.git
cd mcp-figma
npm install
npm run build配置
复制示例环境文件并添加您的 Figma API 密钥:
cp .env.example .env然后编辑.env文件并添加您的 Figma API 密钥:
FIGMA_API_KEY=your_figma_api_key_here您可以从 Figma 帐户设置中获取 Figma API 密钥: https://www.figma.com/developers/api#access-tokens
用法
作为 REST API 服务器
启动服务器:
npm start这将在端口 3000(或.env文件中指定的端口)上启动 Express 服务器。
API 端点
GET /health- 健康检查端点GET /openapi.json- OpenAPI 规范GET /mcp.json- MCP 清单POST /analyze- 分析 Figma 文件
对分析端点的示例请求:
curl -X POST http://localhost:3000/analyze \
-H "Content-Type: application/json" \
-d '{"figmaUrl": "https://www.figma.com/file/FILE_ID/PROJECT_NAME?node-id=NODE_ID", "depth": 2}'作为 MCP 服务器
LLM 可以通过 MCP 协议直接使用该服务器:
figma-mcp-server --cli或者如果从源运行:
npm run start -- --cli客户端示例
包含一个简单的客户端示例。使用方法如下:
node client-example.js https://www.figma.com/file/FILE_ID/PROJECT_NAME?node-id=NODE_ID 2最后一个参数是可选的深度参数。
发展
以开发模式运行
npm run dev测试
npm testDocker
提供了一个 Dockerfile 用于容器化部署:
docker build -t figma-mcp-server .
docker run -p 3000:3000 --env-file .env figma-mcp-server执照
麻省理工学院
Available Tools
1 toolanalyze_figma_fileC
Analyze a Figma file structure to understand its nodes and hierarchy
| Name | Required | Description | Default |
|---|---|---|---|
| figmaUrl | Yes | The URL of the Figma file to analyze | |
| depth | No | Optional depth parameter to limit the node tree depth |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool analyzes structure but doesn't mention whether it's read-only, requires authentication, has rate limits, returns specific formats, or handles errors. For a tool with no annotation coverage, this leaves significant gaps in understanding its behavior.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that front-loads the purpose. It avoids redundancy and is appropriately sized for a simple tool, though it could be slightly more informative without losing conciseness.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no annotations and no output schema, the description is incomplete. It doesn't explain what the analysis returns, how nodes are structured, or any behavioral traits. For a tool that likely outputs complex hierarchical data, this lack of context makes it inadequate for full understanding.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema description coverage is 100%, so parameters are well-documented in the schema. The description adds minimal value beyond implying analysis of 'nodes and hierarchy', which relates to the depth parameter. It doesn't provide additional syntax or format details, so baseline 3 is appropriate as the schema does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('analyze') and resource ('Figma file structure'), specifying the goal is to 'understand its nodes and hierarchy'. It's specific about what the tool does, though without sibling tools, differentiation isn't needed. However, it's slightly vague on the exact output or analysis type beyond 'understand'.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives, prerequisites, or constraints. It mentions analyzing file structure but doesn't specify use cases like design review, extraction, or debugging. With no sibling tools, this is less critical, but still lacks operational context.
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.
1 tool update
- First observed
analyze_figma_file
TDQS
Scored across 1 tool
With only one tool, there is no possibility of ambiguity or overlap between tools. The tool's purpose is clearly distinct by default, as there are no other tools to confuse it with.
The single tool follows a clear verb_noun pattern (analyze_figma_file), and with only one tool, consistency is inherently perfect. There are no other tools to deviate from this pattern.
A single tool is too few for a server named 'Figma MCP Server,' which suggests a broader domain like Figma file management. This minimal set likely leaves significant gaps in functionality, such as creating, updating, or listing files, making it feel incomplete for the implied scope.
The tool surface is severely incomplete for a Figma server. It only provides analysis of file structure, missing essential operations like retrieving files, creating or editing designs, managing comments, or accessing other Figma resources, which are core to the domain.
Maintenance
Related MCP Connectors
The Figma MCP server brings Figma design context directly into your AI workflow.
Geometry and CAD file metadata extraction for STL, OBJ, PLY, PCD, LAS/LAZ, glTF/GLB.
smart-data-extractor MCP server on Cloudflare Workers · REST + MCP JSON-RPC · free tier
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Related MCP Servers
- AlicenseBqualityDmaintenanceEnables interaction with Figma designs through the Figma API, allowing users to export images in multiple formats, extract style data and CSS, analyze design elements, and retrieve SVG code from Figma files. Supports batch operations and comprehensive design element analysis including images, vectors, and components.711 npm11MIT
- FlicenseAqualityDmaintenanceEnables interaction with Figma files through intelligent API access, providing navigation, asset extraction, and design token retrieval with 95% token-optimized compact tree output format.151-
- AlicenseNot gradedqualityDmaintenanceEnables developers to extract and organize Figma design files, including complete node data (tree structure and images) for AI understanding and code generation.MIT
- FlicenseNot gradedqualityDmaintenanceRead-only MCP server that wraps the Figma REST API, providing tools like get file metadata, list frames, and export node image URLs for AI SDLC agents.-