VSCode 集成 Copilot 与 Figma MCP 生成产品代码
为加速开发流程,可采用 Figma(特别是其 Make 产品)生成原型,再通过配置 Figma 的 MCP,在 VS Code 中连接 Copilot,直接快速生成 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。

在扩展商店中输入 @mcp figma 可找到官方对 Figma 的访问支持插件。

安装时可选择 Install in Workspace(安装到当前项目下),建议选择此项。安装后可在当前项目的 .vscode/mcp.json 下查看具体配置。
默认生成的配置可能不可用,需修改为 stdio 格式:
{
"figma": {
"command": "npx",






