figma-context-mcp-server
Integrates with Figma's MCP server to extract design data, analyze structure, and provide enhanced semantic analysis and screenshots for AI agents.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@figma-context-mcp-serveranalyze the current Figma page"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
figma-context-mcp-server
Figma 设计数据 → 结构化语义树 + 截图
代理 Figma Desktop MCP Server,将原始设计数据转换为结构化的语义分析 JSON,供 AI Agent 直接用于设计稿还原。
架构
Figma Desktop App (port 3845)
↓ Streamable HTTP
figma-context-mcp-server (stdio)
↓ 增强输出
AI Agent (Gemini / Claude / etc.)Related MCP server: Figma MCP Server
工具列表
增强工具(带语义分析)
工具 | 说明 |
| 主入口。截图 + 结构化分析 JSON(容器聚合、CSS、布局、重复检测) |
| 仅结构化分析 JSON(不含截图)。已有截图时使用 |
直通代理(Figma MCP 原生能力)
工具 | 说明 |
| 获取节点截图 |
| 获取节点层级树 (XML) |
| 获取原始参考代码 (React JSX + Tailwind) |
| 获取设计变量 / Token |
文件操作工具
工具 | 说明 |
| 分析节点并下载所有图片/SVG 到本地 |
| 一次性导出全部数据 (metadata + context + screenshot + analysis) |
使用
前置条件
Figma Desktop App 已打开
Figma MCP 服务已启用 (http://127.0.0.1:3845/mcp)
Node.js >= 18
构建
npm install
npm run buildMCP 配置
{
"mcpServers": {
"figma-context": {
"command": "node",
"args": ["path/to/dist/index.cjs"]
}
}
}源码结构
src/
├── index.ts ← 入口 (McpServer + StdioServerTransport)
├── schemas.ts ← Zod schema 定义
├── figma-mcp.ts ← Figma Desktop MCP 通信层
├── analyzer.ts ← 语义分析核心 (从 semantic-analyze.mjs v3.1 移植)
└── tools.ts ← 8 个工具注册This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/sand1018/figma-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server