前言
为了加速开发迭代，现在的范式正在调整。利用 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",
