在VSCode中通过Copilot链接Figma直接生成完整产品

为了快速开发的需要，开发的范式也开始进行快速迭代调整。可以变为使用Figma (特别是他的Make产品，可以提示指导AI直接生成完整的产品原型)生成原型，然后通过设置Figma的MCP, 在开发工具（本文是在VS Code中使用Copilot）链接Figma，直接快速的生成Figma上的整套产品原型代码（对模型有要求，还是推荐Gemini-Flash, Claude Sonnet之上的模型），尽量一次到位。

详细步骤记录如下，减少大家踩坑。

获取Figma的API Token

在Figma的左上角用户处点击设置(Settings)，然后在安全Security下Personal Access Tokens下面生成token所用（注意根据自身要求设置权限，建议read都选上），注意token的最长有效期为90天。

在VS Code Copilot中设置对应的MCP配置

首先确保MCP发现的功能是开着的，在VS Code中打开设置(Ctrl+,或者Cmd+,), 输入chat.mcp确认Discovery是Enabled.

在extentions中输入@mcp figma可以找到官方对于figma的访问支持

注意其中的Install是安装到VSCode的整体目录下， Install in Workspace是安装到当前项目下，可以根据您的情况选择，建议选择Install in Workspace

选择Install in Workspace之后可以在当前项目.vscode/mcp.json下看到具体的Figma配置（也可以忽略上述的步骤，自己直接新建mcp.json文件然后输入详细的配置）

javascript 复制代码

// 默认生成的，当前不可用
"com.figma.mcp/mcp": {
    "type": "http",
    "url": "https://mcp.figma.com/mcp",
    "gallery": "https://api.mcp.github.com",
    "version": "1.0.3"
}

注意这个是默认生成的配置，截止笔者发稿时，这个配置不可用，会报错。将协议和url改为sse依然不可用。需要改为如下的stdio的配置

javascript 复制代码

//改为stdio格式，当前可用
"figma": {
    "command": "npx",
    "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
    ],
    env": {
        "FIGMA_API_KEY": "您的Figma API Token"
    },
    "type": "stdio"
},

配置之后就可以在工具中具体看到Figma了

链接访问Figma的具体内容

在Figma中选择具体的组件内容， Copy Link

然后在Copilot的Chat对话框中就可以直接输入该链接使用

Figma Make项目的特别说明

笔者在使用Figma Make项目的时候，无法具体拷贝其中的组件link, 您可以通过Share下直接Copy整个link

Copilot会访问链接内容进行实现，但其实Make是直接写成的React代码您可以直接点击代码模式，然后将代码下载，最后解压缩代码包，直接拖拽到Copilot的对话框进行参考，效果更好！

愿文章可以帮大家提高工作的效率，祝安！

2026-5更新，Figma最新的mcp地址改为https://mcp.figma.com/mcp, 配置改为如下，在VSCode中配置之后，会要求输入Key, 完成之后就可以正常使用。新的mcp的Streamable HTTP链接格式已经可以正常使用Make下的原型啦~！

复制代码

"figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    },