关键词

Figma自动化Cursor AI设计集成原型设计创意工具

项目简介

本项目实现了一个MCP服务器，作为Cursor AI和Figma之间的桥梁。它允许Cursor通过一系列工具控制Figma，实现检索设计信息、创建和修改设计元素等操作。

主要功能点

  • Figma文档信息访问: 获取Figma文档的详细信息和当前选区数据。
  • 元素创建与编辑: 支持在Figma中创建矩形、框架、文本等基本元素，并能设置填充颜色、描边颜色、圆角等样式。
  • 布局管理: 可以移动、调整大小和删除Figma节点。
  • 组件和样式: 支持获取Figma本地和团队组件库信息，并创建组件实例。
  • 图像导出: 允许将Figma节点导出为PNG、JPG、SVG或PDF格式的图像。

安装步骤

  1. 安装Bun: 如果尚未安装Bun，请运行以下命令： 
    curl -fsSL https://bun.sh/install | bash
  2. 运行安装脚本: 在项目根目录下运行 'bun setup'，这也会在Cursor的当前项目中安装MCP。
  3. 启动WebSocket服务器: 运行 'bun start' 命令启动WebSocket服务器。
  4. 安装Figma插件:
    • 在Figma中，进入 “Plugins > Development > New Plugin”。
    • 选择 “Link existing plugin”。
    • 选择 'src/cursor_mcp_plugin/manifest.json' 文件。
    • Figma插件现在应该可以在您的开发插件列表中找到。

服务器配置

为了让Cursor AI能够连接到此MCP服务器，您需要在Cursor的MCP配置文件 '~/.cursor/mcp.json' 中添加以下服务器配置信息。

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bun",
      "args": [
        "/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"
      ]
    }
  }
}
  • 'server name': 'TalkToFigma' (服务器名称，您可以自定义)
  • 'command': 'bun' (启动服务器的命令)
  • 'args': '["/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"]' (命令参数，指向服务器脚本的路径。请注意: 将 '/path/to/cursor-talk-to-figma-mcp' 替换为您克隆仓库的实际路径)

基本使用方法

  1. 启动WebSocket服务器: 确保WebSocket服务器正在运行 ('bun start')。
  2. 配置并启动MCP服务器: 在Cursor中配置并启动名为 'TalkToFigma' 的MCP服务器（使用上述配置，并根据实际路径修改 'args'）。
  3. 安装并运行Figma插件: 在Figma中安装并运行Cursor MCP插件。
  4. 连接到WebSocket服务器: 在Cursor中使用 'join_channel' 工具，在弹出的输入框中输入频道名称，连接Figma插件到WebSocket服务器。
  5. 使用Cursor与Figma交互: 现在您可以使用Cursor调用各种MCP工具（例如 'get_document_info', 'create_rectangle' 等）来控制和操作Figma设计。

信息

分类

桌面与硬件

访问项目