作者：@Graham Lipsman
原文：https://github.com/GLips/Figma-Context-MCP
Figma-Context-MCP 是一个 MCP (Model Context Protocol) 服务器，旨在向 AI 编码代理 (例如 Cursor) 提供 Figma 文件的布局信息。主要目标是提高 AI 编码代理基于 Figma 设计生成代码的准确性和效率。
目的
此服务器旨在解决 AI 在仅基于页面截图等替代方案下，难以准确地将 Figma 设计转换为代码的问题。透过提供结构化的 Figma 布局信息，Figma-Context-MCP 可以大幅改善 AI 的 "one-shot" 准确性。
【早阅】Cursor AI：5个可能还没用过的高级功能
运作方式
-
以代理模式打开 Cursor 的 composer。
-
粘贴指向 Figma 文件、框架或组的链接。
-
让 Cursor 对 Figma 文件执行某些操作，例如实现某个设计。
-
Cursor 会从 Figma 中获取相关的元数据，并利用这些元数据为您编写代码。
安装
连接到 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
# > [email protected] 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 文件的信息。
参数:
