Figma Write MCP

Figma IDE桥

将Cursor IDE（或任何启用MCP的环境）直接连接到正在运行的Figma实例。该桥通过Figma插件API直接在Figma沙箱中执行原始JavaScript代码，从而绕过了标准的只读MCP限制。

🏗️ 建筑

这是一个由两个主要部分组成的monorepo：

• plugin/：一个TypeScript/React Figma插件。它充当Figma内部的执行引擎，通过WebSockets连接到本地服务器。
• server/：Node.js/TypeScript本地MCP服务器。它通过Stdio与IDE通信，并将命令中继到Figma插件。

graph LR
    IDE[Cursor IDE] -- Stdio (MCP) --> Server[Local MCP Server]
    Server -- WebSocket (9000) --> Plugin[Figma Plugin]
    Plugin -- Figma API --> Document[Figma Document]

✨ 特性

• 现场执行：从IDE执行任何Figma插件API代码。
• 智能扫描：轻量级文档清单，用于快速浏览+深度页面扫描，用于详细分析。
• 设计系统意识：用于检索样式、变量和组件以确保一致性的工具。
• 模式感知UI：直接从插件UI在编辑、创建、上下文和杂项模式之间切换。
• 浮动活动日志：实时监控IDE和Figma之间的通信。

🚀 入门指南

1.设置本地服务器

导航到 server 目录和安装依赖关系：

cd server
npm install
npm run build
npm start

服务器将开始监听WebSocket端口 9000 以及Stdio。

2.设置Figma插件

导航到 plugin 目录：

cd plugin
npm install
npm run build

1. 打开Figma。
2. 首选 插件 -> 发展 -> 从清单导入插件。...
3. 选择 plugin/manifest.json.
4. 运行插件。如果服务器正在运行，它应该显示“已连接”状态。

3.MCP配置

将Figma Bridge MCP服务器添加到IDE的MCP配置文件中。

光标/VS代码

将以下内容添加到MCP设置中(.cursor/mcp.json 或同等）：

{
  "mcpServers": {
    "figma-bridge": {
      "command": "npx",
      "args": [
        "tsx",
        "c:/Users/Admin/Documents/GitHub/Figma Write MCP/server/src/index.ts"
      ]
    }
  }
}

克劳德桌面版

添加到您的 claude_desktop_config.json:

{
  "mcpServers": {
    "figma-bridge": {
      "command": "npx",
      "args": [
        "tsx",
        "c:/Users/Admin/Documents/GitHub/Figma Write MCP/server/src/index.ts"
      ]    
    }
  }
}

备注：替换 C:/path/to/Figma Write MCP 使用克隆存储库的实际绝对路径。

🛠️ 工具参考

该桥提供了一整套用于设计创建、分析和演示管理的工具。

🔍 发现与背景

• get_figma_state：验证插件的连接性和就绪性。
• get_document_manifest：提供轻量级的页面树和顶级框架。
• get_design_context: （推荐首次通话） 检索所有本地/库样式、变量、组件和当前选择详细信息。
• get_selection_context：当前选定节点的详细属性（颜色、布局、变量）。
• deep_scan_page：对特定页面进行详尽的逐节点分析。

🎨 设计与操作

• execute_figma_command：在Figma沙盒中运行原始JavaScript。支持 async/await.
• clone_node：复制现有框架或组件，同时保留结构。
• analyze_patterns：确定设计系统的使用（间距、颜色、角半径），以确保视觉一致性。
• export_node_image：捕获高分辨率屏幕截图以进行视觉验证。

📊 展示管理

• scan_presentation：自动对幻灯片进行分类，并识别可编辑的文本/图像槽。
• configure_presentation：标记用于智能填充的特殊幻灯片（封面、ToC、分隔符）。
• fill_slide：用目标内容填充已标识的插槽。
• get_presentation_cache：即时访问以前的扫描结果。

📝 AI代理的最佳实践

1. 总是使用 get_design_context 第一：切勿猜测样式ID或组件键。
2. 无硬编码：使用 node.fillStyleId 或 node.strokeStyleId 使用从上下文中获得的ID。
3. 字体加载：始终 await figma.loadFontAsync({ family: "Font", style: "Style" }) 在编辑文本之前。
4. 自动布局：设置 layoutMode 在添加孩子之前，以及 layoutSizingHorizontal/Vertical 在附加之后。
5. 顺序创建：首先创建容器节点，设置其属性，然后附加子节点。

🛠️ 发展

插件

• src/controller.ts：处理Figma主线程（API调用）。
• src/ui.tsx：基于React的用户界面。
• 跑 npm run watch 根据更改自动重建。

服务器

• src/index.ts：MCP服务器实现和WebSocket中继。
• 跑 npm run dev 用于自动编译TypeScript。

📄 许可证

麻省理工学院