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"
}
