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

最新推荐文章于 2025-10-20 21:43:33 发布

转载最新推荐文章于 2025-10-20 21:43:33 发布 · 22 阅读

CC 4.0 BY-SA版权

原文链接：https://mp.weixin.qq.com/s?__biz=MzI0MTUxOTE5NQ==&mid=2247498551&idx=1&sn=b809e7d737fa0e411d779ef49f58594b&chksm=e80a86ba20f4454272743876173348d9f3e13bf40d086dc86a901dd1f404c15f1fa960dc7765&scene=126&sessionid=0

文章标签：

#figma #服务器 #运维

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 设计高效转换为程式码的开发者来说，这是一个值得考虑的解决方案。

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

翻译：飘飘

最后

送人玫瑰，手留余香，觉得有收获的朋友可以点赞，关注一波，我们组建了高级前端交流群，如果您热爱技术，想一起讨论技术，交流进步，不管是面试题，工作中的问题，难点热点都可以在交流群交流，为了拿到大Offer，邀请您进群，入群就送前端精选100本电子书以及阿里面试前端精选资料 添加 下方小助手二维码或者扫描二维码 就可以进群。让我们一起学习进步

“在看和转发”就是最大的支持