AI导哈

Figma原型流数据服务

一个增强的Figma MCP服务器，通过Figma REST API暴露原型流数据，包括屏幕列表、原型连接和完整流图，旨在替代官方MCP服务并提供原型交互层。

  • by Henry-Hong
  • TypeScript
  • 本地部署
  • 3 星标
  • 更新于
在 GitHub 查看 Henry-Hong/figma-mcp

使用说明

@devheerim/figma mcp

英语 | 韩语

增强型Figma MCP服务器，通过Figma REST API公开原型流数据-屏幕列表、原型连接和完整流图。

旨在完全替代官方 https://mcp.figma.com/mcp，添加了缺失的原型交互层，这样Claude Code就可以从单个Figma URL理解整个用户流。

特性

工具 说明
get_section_frames 列出Figma节节点内的所有帧屏幕
get_prototype_connections 获取节点的原型交互（触发器+目标）
get_flow_map 构建一个部分内所有原型流的有向图
get_design_context 完整的设计上下文：XML结构、屏幕截图、变量、样式
get_metadata 节点结构为XML
get_screenshot 节点的Base64 PNG屏幕截图
get_variable_defs 变量定义（企业）或绑定变量引用（回退）

需求

设置

1.设置API密钥

export FIGMA_API_KEY=your_figma_api_key_here

2.注册 .mcp.json

添加到您的项目 .mcp.json （或 ~/.claude/mcp.json):

{
  "mcpServers": {
    "figma": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@devheerim/figma-mcp"],
      "env": {
        "FIGMA_API_KEY": "${FIGMA_API_KEY}"
      }
    }
  }
}

用法

获取一个部分中的所有屏幕

get_section_frames(fileKey: "abc123", sectionNodeId: "24626:100")

直接返回节内的帧节点列表。

从屏幕获取原型连接

get_prototype_connections(fileKey: "abc123", nodeId: "24626:6637")

返回如下连接：

{
  "connections": [
    {
      "trigger": "ON_CLICK",
      "action": "NAVIGATE",
      "destinationId": "24626:6654",
      "destinationName": "Next Screen"
    }
  ]
}

获取路段的完整流程图

get_flow_map(fileKey: "abc123", nodeId: "24626:100")

返回一个有向图：

{
  "nodes": [{ "id": "24626:6637", "name": "Home" }, ...],
  "edges": [{ "from": "24626:6637", "to": "24626:6654", "trigger": "ON_CLICK", "action": "NAVIGATE" }],
  "entryPoints": ["24626:6637"]
}

Figma URL→ IDs

给定一个URL，如：

https://www.figma.com/design/AbCdEfGhIjKl/MyApp?node-id=24626-100
  • fileKey = AbCdEfGhIjKl
  • nodeId = 24626:100 （替换 - 随着 :)

如何在Figma中查找ID

  1. 打开Figma文件
  2. 在截面或框架上单击鼠标右键→ 复制链接
  3. 提取 node-id 从URL并替换 - 随着 :

费率限制

图API费率限制自动处理：

  • 节点API：30 req/min
  • 图像API：10 req/min
  • 指数级回退 Retry-After 头部支撑（上限为60秒）

变量API

这 get_variable_defs 该工具需要一个Figma Enterprise计划来实现全可变分辨率。在非企业计划中，它会自动退回 boundVariables 节点数据中的引用。

发展

git clone https://github.com/devheerim/figma-mcp
cd figma-mcp
npm install
npm run build
npm test

许可证

麻省理工学院

相关 MCP