Figma与Cursor集成服务器

使用游标和图形的MCP服务器

集成的服务器 光标IDE 和 Figma 通过MCP协议。这允许您在代码项目和Figma设计文件之间自动化工作流程。

特性

• 在Cursor IDE项目中列出、打开和创建文件。
• 列出并获取Figma文件的详细信息。
• 从Figma导出图像。
• 将Figma设计规范同步到您的代码项目中。
• 使用新工具可轻松扩展。

演示和更多信息

• YouTube演示： 看这里
• 领英帖子： 阅读更多

需求

• Python 3.8+
• 光标IDE （可选，用于游标集成）
• Figma账户 以及Figma个人访问令牌
• MCP Python包： pip install mcp 或 pip install mcp-server
• （可选） python-dotenv 对于加载环境变量： pip install python-dotenv
• 克劳德桌面应用程序 （用于克劳德整合）

安装

1. 克隆此存储库：

   复制

   git clone <your-repo-url>
   cd MCP-Server-Using-Cursor-and-Figma
   

2. 安装依赖项：

   复制

   pip install mcp python-dotenv requests
   

获取Figma访问令牌

1. 去你的 Figma帐户设置.
2. 点击“创建新的个人访问令牌”。
3. 复制令牌。

配置

创建一个 .env 项目根目录中的文件：

FIGMA_ACCESS_TOKEN=your-figma-token-here

或者在shell中设置环境变量：

export FIGMA_ACCESS_TOKEN=your-figma-token-here

运行MCP服务器

使用以下命令启动服务器：

python mcp_server.py

服务器将于启动 localhost:8080 默认情况下，打印可用工具。

列出您的Figma项目

您可以使用以下方式列出您的Figma项目/文件：

python list_figma_projects.py

这将打印您的Figma文件并将其保存到 figma_projects.json.

与Claude桌面应用程序一起使用

1. 启动MCP服务器 如上所述。
2. 打开克劳德桌面应用程序.
3. 转到“插件”或“MCP”部分。
4. 添加新的MCP服务器:
   • 输入服务器地址： http://localhost:8080
   • 该项目的工具将在Claude的工具列表中提供。
5. 使用工具 通过在Claude的聊天中调用它们，例如“列出我的Figma文件”或“在Cursor中打开项目”。

添加更多工具

您可以通过编辑来添加更多工具 _register_tools 方法in mcp_server.py.

故障排除

• Figma错误： 确保您的访问令牌有效并且具有正确的权限。
• 未找到游标IDE： 确保Cursor已安装并在系统PATH中可用。
• MCP错误： 确保 mcp Python包已安装。

许可证

MIT许可证

鸣谢

• 光标IDE
• 图API