Figma MCP游乐场
这是，模型上下文协议（MCP） 中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积。
概要 (Overview)
该项目是AI助手将Figma的设计信息理解为“意义（语义）”而不是“视觉”的协议实施例。
______________________________________________________________________
什么是MCP
MCP是连接AI助手和外部工具/数据源的协议。
基本配置
┌─────────────────┐ ┌─────────────────┐
│ MCP Client │ ←───→ │ MCP Server │
│ (AIツール側) │ MCP │ (データ提供側) │
└─────────────────┘ └─────────────────┘组件｜角色｜例｜ |--------------|------|-----| | MCP客户端 连接到MCP服务器并使用工具 | MCP 服务器 通过MCP协议发布数据和工具 server.ts |
______________________________________________________________________
Figma MCP的利用方法
前提条件
| 项目 | 要件 |
|---|---|
| Figma计划 | 专业/组织/企业(免费计划不允许Dev Mode） |
| 工作表种类 完全或不可为 | |
| 文件类型 ｜Figma Design文件（使用Figma Make创建的文件不能进行Dev Mode） | |
| MCP客户端 Claude Code、Claude Desktop、Cursor、VS Code等 |
注意：使用AI生成工具创建的文件无法切换到Dev Mode。 创建新的Figma Design文件或将Make设计复制到Design文件。
______________________________________________________________________
方法1:Figma桌面MCP
Figma桌面应用程序作为MCP服务器运行Claude Code/Claude Desktop为MCP客户端中所述修改相应参数的值。
┌─────────────────┐ ┌─────────────────┐
│ Claude Code │ ←───→ │ Figma Desktop │
│ (MCP Client) │ HTTP │ (MCP Server) │
│ │ │ :3845/mcp │
└─────────────────┘ └─────────────────┘安装过程
- 在Figma桌面上启用MCP
- 打开Figma桌面应用程序 - 打开设计文件开发者模式 切换到（Shift+D) - 单击功能区上的 启用桌面MCP服务器 来修改标记元素的显示属性 - http://127.0.0.1:3845/mcp が有効になりました 表示就OK
- 在MCP客户端注册服务器
#### 对于Claude Code
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp重新启动Claude Code后/mcp 使用命令确认连接。
#### 对于Claude Desktop
配置文件 ~/Library/Application Support/Claude/claude_desktop_config.json 编辑：
{
"mcpServers": {
"figma-desktop": {
"url": "http://127.0.0.1:3845/mcp"
}
}
}已重新启动Claude Desktop。
- 接続确认
- 克劳德代码： /mcp 在工作空间的边缘 figma-desktop 显示已连接即可 - Claude Desktop:Figma工具（get_file_info 等）可用就OK
故障排除
如果Claude Code连接失败：
# 設定を削除して再登録
claude mcp remove figma-desktop
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp注意: --transport http 对较大场景进行渲染期间已观察到该故障。sse 而不是 http 中所述修改相应参数的值。
如果在Claude Desktop中返回了Moke数据：
- 确认Figma Desktop是否启用了Dev Mode MCP Server
- Claude Desktopを完全に再起动（终了→起动）
______________________________________________________________________
方法2:Figma Remote MCP（不需要桌面应用程序）
直接连接到Figma云服务器的方法。
claude mcp add --transport http figma https://mcp.figma.com/mcp因为需要认证/mcp 请用命令进行认证。
______________________________________________________________________
可用于Figma MCP的工具
｜工具名称｜功能｜备注｜ |---------|------|------| | get_file_info 从特定的file_key获取文件信息从Figma URL获取 | get_design_context 从所选节点生成UI代码要求桌面MCP，需要节点选择 | get_screenshot 获取所选节点的屏幕快照要求 | get_metadata 以XML格式获取节点元数据 | get_variable_defs ｜获取变量定义｜ | get_code_connect_map 获取代码连接映射
注意:get_design_context啊get_screenshot在Figma Desktop应用程序中选择节点的状态下使用。 目前还没有提供获取文件列表的工具。
______________________________________________________________________
关于此项目
这个项目 用于学习和演示MCP的规格化距离的幂函数。与上述Figma Desktop MCP不同。
体系结构配置
┌─────────────────┐ ┌─────────────────┐
│ client.ts │ ←───→ │ server.ts │
│ (MCP Client) │ Stdio │ (MCP Server) │
│ サンプル実装 │ │ サンプル実装 │
└─────────────────┘ └─────────────────┘- MCP服务器(
src/server.ts):
- 通过MCP协议公开Figma API（或Moke数据）。 - 资源：直接阅读文件内容的界面（例如： figma://file/{key})。 - 工具：传递参数以执行特定处理的函数（例如： get_file_info(file_key))。
- MCP客户端(
src/client.ts):
- 在本地启动服务器，获取资源列表和运行工具。
用途不同
项目：此项目 |-----|------------------|----------------| ｜目的｜实际Figma文件操作｜学习、理解MCP｜ MCP客户端 client.ts | ｜MCP服务器｜Figma桌面｜ server.ts | 数据｜实际的Figma文件｜莫克数据｜
______________________________________________________________________
开発计画（Implementation Plan）
项目目标
构建能够实际操作和实验Figma MCP的本地环境，使AI能够理解如何与Figma数据进行交互。
实现的功能
- 项目设置:
- package.json: @modelcontextprotocol/sdk, axios, dotenv, zod 等依赖关系管理。 - tsconfig.json：TypeScript実行环境の设定。
- MCP 服务器:
- get_file_info：用于获取Figma文件元数据的工具。 - 模拟模式：在没有令牌的情况下，可以返还虚拟结构数据进行动作确认。 - 真实模式：如果有Figma Personal Access Token，则从实际API获取数据。
- MCP客户端:
- 已通过Stdio连接服务器进程。 - 列出可用的资源工具并将执行结果输出到控制台。
______________________________________________________________________
设置和执行过程
1.安装
npm install2.执行方法（模式）
即使没有认证令牌，也可以使用莫克数据确认动作，了解协议的行为。
npm start3.执行方法（实时模式）
要访问实际的Figma文件，需要人员访问Token。
- 在Figma上 设置 -> 账户 -> 个人访问令牌 中所述修改相应参数的值。
- 范围: File content: Read-only （或 files:read），模板名称将采用不同的格式。
- 项目根目录
.env创建文件并设置标记。
FIGMA_ACCESS_TOKEN=your_token_here- 根据需要
src/client.ts编辑，实际file_key（Figma URL的关键部分）。
______________________________________________________________________
验证结果和行为日志
本地环境中的行为验证（npm start的明细栏样式中定义的设置。
执行过程
客户端连接到服务器并自动执行以下操作：。
- 连接到服务器
- 可用资源（
resources）的列表显示 - 可用工具（
tools）的列表显示 - 获取设计信息的工具（
get_file_info）的执行
运行日志
✅ MCP Client connected to Server
📦 Listing Resources...
[
{
"uri": "figma://mock-file/design.json",
"name": "Mock Design JSON",
"mimeType": "application/json",
"description": "A mock Figma design file for demonstration"
}
]
🛠️ Listing Tools...
[
{
"name": "get_file_info",
"description": "Get information about a Figma file (Real API or Mock)",
"inputSchema": {
"type": "object",
"properties": {
"file_key": {
"type": "string",
"description": "The file key of the Figma file (optional in mock mode)"
}
}
}
}
]
🚀 Calling Tool 'get_file_info' (Mock Mode)...
Result: {
"content": [
{
"type": "text",
"text": "[MOCK MODE] Returning mock data. Set FIGMA_ACCESS_TOKEN to use real API.\n\n{\n \"document\": {\n \"id\": \"0:0\",\n \"name\": \"Fortune Consultant LP\",\n \"type\": \"DOCUMENT\",\n \"children\": [\n {\n \"id\": \"1:1\",\n \"name\": \"Landing Page\",\n \"type\": \"FRAME\",\n ...\n }\n ]\n }\n}"
}
]
}______________________________________________________________________
文档
docs/—学习会笔记（AtlaeFigma×Claude Code学习会2026-03-25）tmp/—学习会截图
注意事项
- 这个项目是教育用·示威用的游戏。
- 在生产环境中使用时，请添加适当的错误处理和安全措施（如令牌管理）。