MCP指的是模型上下文协议（Model Context Protocol），可以帮助ai大模型获取到一些数据、工具或工具流的详细内容并执行任务。本文将基于Figma MCP + Cursor来展示联通两者的基本操作

可能有帮助的链接：

MCP官方文档

Figma官方文档-MCP服务指南

接下来我将展示我开启一个新项目的操作。

1、下载Figma客户端

个人觉得有必要，比起远程连接MCP，在本地进行连接会减去一部分麻烦的设置，容错大些

下载地址：

Figma官方下载

Figma汉化版

2、进入目标file

在客户端进入后，点击左上角的logo打开菜单，即下图最左上角这个标志

点击 Preferences→Enable local MCP server

这样就是对当前项目开启MCP功能了

3、编译器配置

在Figma的dev mode下，能看到右侧有一个MCP server，选择Local server

不同的IDE的配置有些微差别，都可以在官方文档里查到，我这里使用的是cursor

进入setting→MCP & Integrations，在右侧MCP Tools中选择New MCP server（加号）

然后会自动跳转到新文件 mcp.json

复制如下内容，保存文件

{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

这时候就会发现Figma的连接了，再点击右侧按钮启动，如果是绿色则代表连接成功

此时就可以来到Figma已经画好的原型图中，选中页面右键

这里就可以复制原型图的组件信息等等了

选择第五个“Copy link to selection”，复制去Cursor的对话中

就可以开始输入指令进行vibe coding了