前言
为了加速开发迭代，现在的范式正在调整。利用 Figma（特别是其 Make 产品）生成原型，再通过 MCP 配置将 Figma 与 VS Code 中的 Copilot 连接，可以直接基于设计稿生成代码。这对模型能力有一定要求，推荐使用 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。
在扩展商店搜索 @mcp figma，可以找到官方对 Figma 的访问支持。安装时有两个选项：Install in Workspace 和 Install in Global。建议选择在当前工作区下安装（Install in Workspace）。
安装后可以在项目根目录的 .vscode/mcp.json 中看到配置。如果未自动生成，也可以手动新建该文件。需要注意的是，默认生成的配置在当前阶段可能不可用，会报错。即使尝试将协议改为 SSE 也可能无效，因此需要调整为 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 的对话框中直接粘贴该链接即可调用。
Figma Make 项目特别说明
在使用 Figma Make 项目时，无法直接拷贝其中的组件链接，可以通过 Share 下直接 Copy 整个链接。
Copilot 会访问链接内容进行实现，但其实 Make 是直接写成的 React 代码。您可以直接点击代码模式，然后将代码下载，最后解压缩代码包，直接拖拽到 Copilot 的对话框进行参考，效果更好！
