Figma + Cursor：用 MCP Server 实现设计到代码的无缝转换
Figma-Context-MCP 是一个 MCP (Model Context Protocol) 服务器，旨在向 AI 编码代理 (例如 Cursor) 提供 Figma 文件的布局信息。主要目标是提高 AI 编码代理基于 Figma 设计生成代码的准确性和效率。
如果你不了解什么是MCP，可以看本站这篇文章：一文看懂什么是MCP(大模型上下文)？用来干什么的？怎么用它？
功能
此MCP Server旨在解决 AI 在仅基于页面截图等替代方案下，难以准确地将 Figma 设计转换为代码的问题。透过提供结构化的 Figma 布局信息，Figma-Context-MCP 可以大幅改善 AI 的 "one-shot" 准确性。
工作原理
以代理模式打开 Cursor 的 composer。
粘贴指向 Figma 文件、框架或组的链接。
让 Cursor 对 Figma 文件执行某些操作，例如实现某个设计。
Cursor 会从 Figma 中获取相关的元数据，并利用这些元数据为您编写代码。
此 MCP 服务器专为与 Cursor 配合使用而设计。在使用Figma API的上下文进行响应之前，它会简化和转换响应，以便仅向模型提供最相关的布局和样式信息。
减少提供给模型的上下文量有助于提高人工智能的准确性和响应的相关性。
安装
下载源码
git clone https://github.com/GLips/Figma-Context-MCP.git使用 pnpm install 安装依赖项
将 .env.example 复制到 .env 并填写你的 Figma API 访问令牌。仅需读取权限。
配置
1. 启动MCP Server
> 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/messages2.将 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 工具：
1. get-file
获取有关 Figma 文件的信息。
参数:
fileKey (string): 要获取的 Figma 文件的密钥
depth (number, optional): 遍历节点树的深度（即遍历多少层）
2.get-node
获取 Figma 文件中特定节点的信息。
参数:
fileKey (string): 包含节点的 Figma 文件的键
nodeId (string): 要获取的节点的 ID
最后
Figma-Context-MCP 是一个很有价值的工具，它通过为 AI 提供 Figma 设计的结构化信息，从而增强 AI 编码代理 (如 Cursor) 的能力。它简化了开发流程，提高了准确性，并且专为与 Cursor 无缝集成而设计。对于需要将 Figma 设计高效转换为程式码的开发者来说，这是一个值得考虑的解决方案。
本文大部分信息来自：https://github.com/GLips/Figma-Context-MCP