关键词

Figma API设计工具组件信息原型工作流设计稿数据

使用说明

项目简介

本项目 'mcp_demo' 是一个基于 Model Context Protocol (MCP) 的服务器实现示例，专注于演示如何构建一个能够与 Figma API 交互的后端服务。它提供了一组工具，允许用户通过 MCP 客户端查询 Figma 设计文件的各种信息，例如组件列表、特定节点详情以及原型工作流。

主要功能点

  • 组件查询 (get_components): 获取指定 Figma 文件中的所有组件信息，包括组件ID、名称和描述。
  • 节点查询 (get_node): 获取 Figma 文件中特定节点的详细信息，返回结构化的节点数据，方便进一步分析和处理。
  • 工作流查询 (get_workflow): 提取 Figma 文件中定义的原型连接信息，帮助理解设计稿的交互流程。
  • 随机数生成 (generate_random_number): 一个简单的示例工具，用于生成随机数，展示工具扩展能力。（实际Figma功能相关性弱）
  • 支持 Stdio 和 SSE 传输协议: 提供 'server.py' (Stdio) 和 'server_sse.py' (SSE) 两个服务器脚本，演示 MCP 服务器对不同传输协议的支持。
  • 集成 MCP Inspector: 方便开发者调试和检查 MCP 服务器的运行状态。

安装步骤

  1. 安装依赖: 在项目根目录下，使用 'uv sync install' 命令安装项目所需的 Python 依赖库。

    uv sync install

    注意: 确保已安装 'uv' 包管理器。如果未安装，请先安装 'uv'。

  2. 配置环境变量:

    • 本项目需要 Figma API Token 才能访问 Figma API。
    • 你需要在项目根目录下创建 '.env' 文件，并在其中设置 'FIGMA_API_TOKEN' 环境变量，例如： 
      FIGMA_API_TOKEN=YOUR_FIGMA_API_TOKEN
OPENAI_API_KEY=YOUR_OPENAI_API_KEY # mcp_client.py 中使用了 OpenAI，也需要配置 API Key
      请替换 'YOUR_FIGMA_API_TOKEN' 为你自己的 Figma API Token，'YOUR_OPENAI_API_KEY' 为你的 OpenAI API Key (如果需要运行 'mcp_client.py')。

服务器配置

MCP 客户端配置 (以 'mcp_client.py' 为例):

'mcp_client.py' 客户端代码中已经预定义了连接到 'mcp_server/server.py' (Stdio 模式) 的服务器配置。你无需修改客户端代码，可以直接运行。

如果你需要配置连接到 'mcp_server/server.py' (Stdio 模式) 的 MCP 服务器，可以使用以下 JSON 格式的配置信息：

{
  "serverName": "figma_stdio_server",
  "command": "python",
  "args": ["./mcp_server/server.py"],
  "transport": "stdio",
  "description": "连接到 Figma MCP 服务器 (Stdio 模式)"
}

参数注释:

  • 'serverName': 服务器名称，可以自定义，用于在客户端标识不同的 MCP 服务器连接。
  • 'command': 启动 MCP 服务器的命令，这里是 'python'，表示使用 Python 解释器。
  • 'args': 启动命令的参数列表，这里 '["./mcp_server/server.py"]' 指定了要运行的服务器脚本路径。
  • 'transport': 指定 MCP 服务器使用的传输协议，这里是 'stdio'，表示标准输入输出流。
  • 'description': 服务器描述信息，方便用户理解服务器的用途。

如果你需要连接到 'mcp_server/server_sse.py' (SSE 模式) 的 MCP 服务器，你需要修改 MCP 客户端的配置，指定 SSE endpoint。 本示例 'mcp_client.py' 代码默认使用 Stdio 模式，如果要连接 SSE 模式，需要修改客户端代码逻辑以支持 SSE 连接，并配置正确的 SSE endpoint (例如 'http://localhost:8000/sse'，参考 README.md)。

基本使用方法

  1. 启动 MCP 服务器:

    • Stdio 模式: 运行 'mcp_server/server.py' 脚本。 
      python mcp_server/server.py
    • SSE 模式: 运行 'mcp_server/server_sse.py' 脚本。 
      python mcp_server/server_sse.py
    • Debug 模式 (使用 MCP Inspector): 使用 'npx @modelcontextprotocol/inspector python mcp_server/server.py' 命令启动服务器，并可以通过 'http://127.0.0.1:6274/#tools' 访问 MCP Inspector 进行调试。 
      npx @modelcontextprotocol/inspector python mcp_server/server.py

  2. 运行 MCP 客户端:

    • 运行 'mcp_client.py' 脚本。 
      python mcp_client.py

  3. 在客户端输入查询:

    • 客户端启动后，会提示你输入查询内容。
    • 你可以输入自然语言查询，例如 "get components from figma file xxx" 或 "show me node yyy from figma file zzz"。
    • 客户端会调用 LLM (在本示例中使用 OpenAI) 解析你的查询，并根据 LLM 的输出调用相应的 MCP 工具。
    • 工具执行结果会返回给客户端并显示。

示例查询:

假设你要查询 Figma 文件 'do4pJqHwNwH1nBrrscu6Ld' 的组件信息，你可以输入类似以下指令 (取决于客户端 LLM 的理解能力，可能需要更明确的指令):

get components file_key: do4pJqHwNwH1nBrrscu6Ld

或者查询节点 '0:3' 的信息：

get node file_key: do4pJqHwNwH1nBrrscu6Ld node_id: 0:3

请根据 'mcp_client.py' 的提示和工具定义，尝试不同的查询方式。

注意:

  • 本示例中的 'mcp_client.py' 使用 OpenAI 的 'gpt-4o-mini' 模型进行工具选择和参数提取，你需要确保配置了有效的 OpenAI API Key。
  • Figma API 的访问速度和配额限制可能会影响工具的响应时间。

信息

分类

桌面与硬件

访问项目