VSCode Copilot 接入 Figma MCP 自动生成代码实战
随着 AI 辅助开发的普及,设计到代码的流转效率成为关键。利用 Figma Make 生成原型,再通过 MCP(Model Context Protocol)在 VS Code 中连接 Copilot,可以直接将设计稿转化为可运行的代码框架。这套流程对模型能力有一定要求,建议配合 Gemini Flash 或 Claude Sonnet 等强推理模型使用。
下面是我整理的具体操作路径,希望能帮大家少走弯路。
获取 Figma API Token
首先需要在 Figma 后台申请访问凭证。
- 进入 Figma 左上角用户头像,选择 Settings。
- 在 Security 下找到 Personal Access Tokens。
- 点击生成新 Token,权限建议至少开启
read,有效期最长为 90 天。
注意:Token 是敏感信息,请勿随意泄露给第三方。
配置 VS Code MCP 环境
确保你的 VS Code 已启用 MCP 发现功能。在设置中搜索 chat.mcp,确认 Discovery 状态为 Enabled。
接着安装 Figma 的官方扩展支持。在扩展市场搜索 @mcp figma,你会看到相关选项。这里推荐选择 Install in Workspace,这样配置会保存在当前项目的 .vscode/mcp.json 文件中,避免影响全局环境。
修正配置文件
默认生成的配置往往不可用,直接运行可能会报错。根据实际测试,需要将协议和 URL 调整为 stdio 模式才能正常通信。
请在 .vscode/mcp.json 中添加如下配置(注意 JSON 语法规范):
{
"figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "你的 Figma API Token"
}


