大家好，我是大瑜，1个工作十年的程序员。

今天我讲介绍一个mcp server：Figma-Context-MCP，自动将figma设计稿转化为html页面。

一、figma的介绍

关于figma，搞设计和搞产品的同学一定不会陌生，拥有一套完整的组件库，可以快速创建高保真的原型图。

但是之前figma生成的html页面是不能直接用在界面的。开发者与设计师之间存在鸿沟，很容易设计出一个精装修的房子，但是开发人员却盖出了毛坯房的效果。

那么今天咱们就通过简单的两个步骤，通过mcp server来还原你的高保真效果图。

二、获取figma 的api key

第一步：打开setting页面，进入账号设置页面。

第二步：点击“security”按钮，创建一个“new token”。

第三步：设置“过期时间”以及读写权限，可以按照我下面的例子进行配置。点击“generate token”。

第四步：保存生成的token，后面有用。

三、安装figma-context-MCP 服务

如果你是figma专业版本的会员，那么恭喜你，你的操作方式只有两步：（当然如果不是的话，可以略过下面两步，继续往下看）

1、下载figma客户端，添加mcp-server配置。

2、去curosr应用市场找到figma，然后点击“add figma to cursor”。

https://docs.cursor.com/tools/mcp

配置mcp server。然后即可在agent模式中进行figma mcp server的调用了。

那么对于非专业用户来讲，该如何使用呢？对，还有解决办法：我发现trae官方推荐的figma mcp server竟然是这个：

https://github.com/GLips/Figma-Context-MCP

发展速度迅猛，3个月下来，star数飙升到9k。

具体操作方式如下：

1、首先电脑要默认安装nodejs 18以上的版本。

可以访问官方地址进行下载。

官方地址：https://nodejs.org/en/download

安装成功后，输入：

2、将mcp-server 源代码下载到本地。

3、安装依赖文件。

4、打开cursor的setting页面进行mcp server。

Mac电脑可以这样配置：

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

windows电脑可以这样配置

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

其中figma-api-key 要改成我们第二章节生成的内容。

5、接下来就可以在界面使用figma 的mcp server了。

根据用户提供的 Figma 链接，精准还原 UI 设计，生成响应式的 HTML 格式的前端页面代码。代码结构清晰，视觉细节与设计稿高度一致。禁止擅自修改设计内容，确保忠实还原。

这时候，cursor就会问你要你的figma地址了。

我们回到figma页面，点击设计稿，并右键，在菜单中选择“copy link to selection”，从而复制这个链接。

复制之后，这样对cursor说：

这个时候等待cursor生成即可。

写在后面的话

Figma的这个mcp实在是太强悍了，以后但愿：程序员和产品经理才有没有争吵，一切变得格外和谐。

你学会了吗？ 学会了记得点个赞！