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

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

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

1. 获取Figma的API Token

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

2. 在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文件然后输入详细的配置）

// 默认生成的，当前不可用 "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的配置

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

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

3. 链接访问Figma的具体内容

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

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

4. Figma Make项目的特别说明

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

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

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