Step1:让 AI 给你配置 MCP
在 VS Code 中打开你的项目(本例为微信小程序),呼出 GitHub Copilot 对话框,模式选择 Agent,模型建议 Claude 3.7 Sonnet,提问:
https://github.com/GLips/Figma-Context-MCP 如何配置能让你在 vscode 里使用这个 mcp
之后跟着提示操作即可完成配置,如果有什么需要装的 VS Code 插件它会自动帮你装,甚至自动生成了配置说明文档。

由于不能保证 AI 每次生成的答案都一致,这里附上运行结果作为参考。可以看到它在项目文件夹最外层建了一个.vscode 文件夹,在 settings.json 文件里加上了配置。如果你的项目本来就有这个 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 天过期,30 天后需要建一个新的才能继续用。









