Figma官网：Figma: The Collaborative Interface Design Tool

FranmelInk官网：Framelink - Figma to Code MCP

Figma官网汉化插件：FigmaCN

一、配置MCP

（一）生成访问Figma的token令牌

1.在 Figma 主页上，单击左上角的个人资料图标，然后Settings从下拉菜单中进行选择。

2.在设置菜单中，选择Security选项卡。向下滚动到该Personal access tokens部分并单击Generate new token。

3.输入令牌的名称并确保对 文件内容 和 开发资源 具有读取权限，然后单击Generate token。

（二）配置 Framelink Figma MCP 服务器

1. cursor

1）获取配置

MacOS / Linux

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

2）在Cursor中配置MCPserver

注意要使用非公司内部的npm源，不然会连接不上。（标绿点说明连接成功，红点说明连接失败。）

如果想自动执行命令，在cursor的设置里，勾选上Features选项卡的Enable auto-run mode。勾选上后就不用每次都要确认run tool

2. Trae

1）添加 MCP Server - Figma AI Bridge

二、将Figma设计稿转换为前端代码

（一）拷贝设计稿链接

（二）设计稿转前端代码

参考

API 方法	能力
get_figma_data	当无法获取 nodeId 时，获取整个 Figma 设计稿的布局信息。
download_figma_images	基于图像或图标节点的 ID，下载 Figma 设计稿中所使用的 SVG 和 PNG 图像。