在VSCode中通过Copilot链接Figma直接生成完整产品

仙踪问道
0 阅读2分钟

为了快速开发的需要，开发的范式也开始进行快速迭代调整。可以变为使用Figma (特别是他的Make产品，可以提示指导AI直接生成完整的产品原型)生成原型，然后通过设置Figma的MCP, 在开发工具（本文是在VS Code中使用Copilot）链接Figma， 直接快速的生成Figma上的整套产品原型代码（对模型有要求，还是推荐Gemini-Flash, Claude Sonnet之上的模型），尽量一次到位。 详细步骤记录如下，减少大家踩坑。

  1. 获取Figma的API Token

a53e73b4af8d42a795111cefd963e7d4.png

c4996885e09d45919b81e4ecd6dcaf63.png

01d8ac29f5464fd49e51ba65545e4c0a.png

在Figma的左上角用户处点击设置(Settings)，然后在安全Security下Personal Access Tokens下面生成token所用（注意根据自身要求设置权限，建议read都选上），注意token的最长有效期为90天。

  1. 在VS Code Copilot中设置对应的MCP配置

首先确保MCP发现的功能是开着的，在VS Code中打开设置(Ctrl+,或者Cmd+,), 输入chat.mcp确认Discovery是Enabled.

c32a39cbfdc74b4b99704e66ac9eda18.png

在extentions中输入@mcp figma可以找到官方对于figma的访问支持

3c6d4433c7404972b681bc16a683bcd3.png

注意其中的Install是安装到VSCode 的整体目录下， Install in Workspace是安装到当前项目下，可以根据您的情况选择，建议选择Install in Workspace

选择Install in Workspace之后可以在当前项目.vscode/mcp.json下看到具体的Figma配置（也可以忽略上述的步骤，自己直接新建mcp.json文件然后输入详细的配置）

// 默认生成的，当前不可用
"com.figma.mcp/mcp": {
    "type": "http",
    "url": "https://mcp.figma.com/mcp",
    "gallery": "https://api.mcp.github.com",
    "version": "1.0.3"
}

注意这个是默认生成的配置，截止笔者发稿时，这个配置不可用，会报错。将协议和url改为sse依然不可用。需要改为如下的stdio的配置

//改为stdio格式，当前可用
"figma": {
    "command": "npx",
    "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
    ],
    env": {
        "FIGMA_API_KEY": "您的Figma API Token"
    },
    "type": "stdio"
},

配置之后就可以在工具中具体看到Figma了

  1. 链接访问Figma的具体内容

在Figma中选择具体的组件内容， Copy Link

6153398987fd4b058cfb00beb512b433.png

然后在Copilot的Chat对话框 中就可以直接输入该链接使用

25df5274c2594acd90307a6ac38746ba.png

  1. Figma Make项目的特别说明

笔者在使用Figma Make项目的时候，无法具体拷贝其中的组件link, 您可以通过Share下直接Copy整个link

76d3d379f9814ef7a0c28d1c42925b5d.png

Copilot会访问链接内容进行实现，但其实Make是直接写成的React代码您可以直接点击代码模式，然后将代码下载，最后解压缩代码包，直接拖拽到Copilot的对话框进行参考，效果更好！

愿文章可以帮大家提高工作的效率，祝安！

仙踪问道under.png

avatar
文章
阅读
粉丝