Step1:配置 MCP 环境
在 VSCode 中打开项目(示例为微信小程序),呼出 GitHub Copilot 对话框,模式选择 Agent,模型建议 Claude 3.7 Sonnet,提问:
https://github.com/GLips/Figma-Context-MCP 如何配置能让你在 vscode 里使用这个 mcp
按照提示依次点击下一步即可完成配置。如果缺少 VSCode 插件,AI 会自动安装并生成配置说明文档。

由于 AI 生成的答案可能不一致,以下是运行结果参考。它会在项目文件夹最外层创建 .vscode 文件夹,并在 settings.json 文件中添加配置。如果文件已存在,配置会追加到末尾。
{
"mcpServers": {
"Framelink Figma MCP": {
"command": "cmd",
"args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=这里稍后替换成你自己的密钥", "--stdio"]
}
}
}
Step2:获取 Figma 密钥
打开 Figma 网页版,点击左上角头像 -> Settings -> Security -> Generate new token。
设置路径可能会有变化,请仔细查找找到 Generate new token 按钮。点击后会弹出权限设置窗口,随意命名(如 mcp),并将权限列表中的读或写选项逐一打开(默认是 No access)。
注意:默认有效期为 30 天,过期后需重新生成。









