mcpField
F
Figma To Code Mcp Server

Figma To Code Mcp Server

本地服务
github.com/toddle-edu媒体与设计0
代码仓库

关于 Figma To Code Mcp Server

使用此 Figma MCP 服务将 Figma 设计转换为伪代码结构 — 简单而高效，LLM 可以理解设计上下文。连接到 Figma API 并为给定设计获取伪代码。为了视觉上下文，还可以获取图像。

#figma#mcp#design-to-code#figma-to-code#ai-figma-to-code#figma-mcp#pseudo-code#prototyping

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "figma-mcp-server-toddle-edu": {
      "command": "npx",
      "args": [
        "-y",
        "figma-codegen-mcp"
      ]
    }
  }
}
启动命令npx -y figma-codegen-mcp

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npmfigma-codegen-mcp

工具

2

收录的工具列表 · 更新于 2 周前

参数类型必填说明
fileKeystring是要获取的 Figma 文件的键，可在提供的 URL 中找到，例如 `figma.com/(file|design)/<fileKey>/...`
nodeIdstring是要获取的节点 ID，可作为 URL 参数找到，例如 `node-id=<nodeId>`。如果已提供，则必须使用。

详细介绍

维护者还没有提供详细介绍，可以先查看代码仓库中的 README。

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。