Figma MCP Server 介绍：专为 AI 编码工具设计的服务器

最新推荐文章于 2025-04-29 09:07:12 发布

傲娇的koala

最新推荐文章于 2025-04-29 09:07:12 发布

阅读量78

点赞数

文章标签： figma 服务器运维

原文链接：https://mp.weixin.qq.com/s?__biz=MzUxNzk1MjQ0Ng==&mid=2247525879&idx=1&sn=477a2528bfa8ba5700a1cfe3b1b7c080&chksm=f83ad03d8f0199f8234c7d49b6f8140696a1c8084e3f5b8073e488d654387646c9f4f0e946ba&scene=126&sessionid=0

版权

作者：@Graham Lipsman
原文：https://github.com/GLips/Figma-Context-MCP

翻译：前端早读课飘飘

点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群

Figma-Context-MCP 是一个 MCP (Model Context Protocol) 服务器，旨在向 AI 编码代理 (例如 Cursor) 提供 Figma 文件的布局信息。主要目标是提高 AI 编码代理基于 Figma 设计生成代码的准确性和效率。

目的

此服务器旨在解决 AI 在仅基于页面截图等替代方案下，难以准确地将 Figma 设计转换为代码的问题。透过提供结构化的 Figma 布局信息，Figma-Context-MCP 可以大幅改善 AI 的 "one-shot" 准确性。

运作方式

以代理模式打开 Cursor 的 composer。
粘贴指向 Figma 文件、框架或组的链接。
让 Cursor 对 Figma 文件执行某些操作，例如实现某个设计。
Cursor 会从 Figma 中获取相关的元数据，并利用这些元数据为您编写代码。

安装

克隆此仓库
使用 pnpm install 安装依赖项
将 .env.example 复制到 .env 并填写你的 Figma API 访问令牌。仅需读取权限。

连接到 Cursor

启动开发服务器

> pnpm dev
 # Initializing Figma MCP Server in HTTP mode on port 3333...
 # HTTP server listening on port 3333
 # SSE endpoint available at http://localhost:3333/sse
 # Message endpoint available at http://localhost:3333/messages

将 Cursor 连接到 MCP 服务器

服务器运行后，在 Cursor 的设置中，于 “功能” 选项卡下将 Cursor 连接到 MCP 服务器。

服务器连接成功后，在开始操作前，您可以确认 Cursor 已建立有效连接。如果看到绿色圆点且工具显示出来，那就没问题了！

使用方式

一旦 MCP 服务器连接成功，只要 Composer 处于代理模式，你就可以开始使用 Cursor 的 Composer 中的工具。

在 Composer 中粘贴一个 Figma 文件的链接，并要求 Cursor 对其执行某些操作，这应当会自动触发 get-file 工具。

大多数 Figma 文件最终都会变得很大，所以你可能希望链接到文件中的特定框架或组。选中单个元素后，您可以按 CMD + L 复制该元素的链接。你也可以在上下文菜单中找到它：

一旦您获取到某个特定元素的链接，就可以将其拖放到编辑器中，并让 Cursor 对其执行某些操作。

演示视频

检查回应

为了更轻松地查看来自 MCP 服务器的响应，你可以运行 inspect 命令，该命令会启动 @modelcontextprotocol/inspector 网页用户界面，用于触发工具调用和查看响应：

pnpm inspect
 # > figma-mcp@0.1.0 inspect
 # > pnpx @modelcontextprotocol/inspector
 #
 # Starting MCP inspector...
 # Proxy server listening on port 3000
 #
 # 🔍 MCP Inspector is up and running at http://localhost:5173 🚀

可用的工具

服务器提供了以下 MCP 工具：

get-file

获取有关 Figma 文件的信息。

参数:

fileKey (string): 要获取的 Figma 文件的密钥
depth (number, optional): 遍历节点树的深度（即遍历多少层）

get-node

获取 Figma 文件中特定节点的信息。

参数:

fileKey (string): 包含节点的 Figma 文件的键
nodeId (string): 要获取的节点的 ID

结论

Figma-Context-MCP 是一个很有价值的工具，它通过为 AI 提供 Figma 设计的结构化信息，从而增强 AI 编码代理 (如 Cursor) 的能力。它简化了开发流程，提高了准确性，并且专为与 Cursor 无缝集成而设计。对于需要将 Figma 设计高效转换为程式码的开发者来说，这是一个值得考虑的解决方案。

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

   “分享、点赞、在看” 支持一波👍