Figma Direct Edit MCP

Figma编辑MCP

用于编辑现有Figma文件的本地MCP+Figma桌面插件工作流程。

此分叉通过直接文本层更新扩展了原始项目，因此代理可以修改现有页面的排版，而不是生成重复的框架或新的主页变体。

这个叉子添加了什么

• updateTextStyle 通过以下方式支持现有文本节点 nodeId
• 通过以下方式支持导入的文本样式 textStyleKey
• 通过局部变量或导入变量支持排版变量
• updateNode 用于现有节点道具，如填充、笔划、效果、布局、间距、不透明度、重命名和位置
• moveNode 用于重新设置现有节点
• updateInstance 例如，属性更新、重置覆盖和按键的组件交换
• 找不到本地文本样式时的回退排版应用程序
• POST /plugin/update 通过本地HTTP将直接插件更新排队
• GET /plugin/status/:fileId 检查插件连接状态和队列长度

这些新增内容针对的是代理工作流，其中请求是：

• “编辑现有页面”
• “不创建新框架”
• “将这些Figma文本样式应用于当前节点”

推荐拆分

此存储库最有用的两个交付成果是：

1. 一种可重复使用的Figma编辑MCP分叉
2. 一种Codex技能，教代理何时使用直接编辑操作而不是 generate_figma_design

所包含的Codex技能生活在 codex技能/技能.md.

需求

• Node.js v20.0.0或更高版本

安装

安装说明

1. 克隆存储库

git clone https://github.com/asamuzak09/figma-edit-mcp.git
cd figma-edit-mcp

1. 安装依赖项

npm run install-all

此命令在figma mcp服务器和figma插件目录中安装依赖项并运行构建。

1. 安装Figma插件

在开发模式下本地安装Figma插件：

1. 打开Figma桌面应用程序
2. 从右上角的菜单中，选择“插件”→ “发展”→ “从清单导入插件…”
3. 选择figma插件/manifest.json文件
4. 插件将以开发模式安装

构建命令

npm run build
npm run build:server
npm run build:plugin

MCP配置

对于克莱恩

要将此插件与Cline一起使用，您需要添加MCP服务器配置：

1. 将以下配置添加到 mcpServers 对象：

"figma-mcp-server": {
  "command": "node",
  "args": ["/path/to/figma-edit-mcp/figma-mcp-server/build/index.js"],
  "env": {
    "FIGMA_ACCESS_TOKEN": "your_figma_personal_access_token"
  }
}

对于光标

要将此插件与Cursor一起使用，您需要添加MCP服务器配置：

1. 点击“添加MCP服务器”
2. 选择“命令”作为“类型”
3. 为“命令”输入以下内容：

env FIGMA_ACCESS_TOKEN=your_figma_personal_access_token node /path/to/figma-edit-mcp/figma-mcp-server/build/index.js

替换 /path/to/figma-edit-mcp 使用存储库的实际路径。 替换 your_figma_personal_access_token 使用您的Figma个人访问令牌。

如何获取Figma个人访问令牌

1. 登录Figma
2. 点击右上角的个人资料图标
3. 选择“设置”
4. 转到“帐户”选项卡中的“个人访问令牌”部分
5. 点击“创建新的个人访问令牌”
6. 输入令牌的名称，然后单击“创建令牌”
7. 复制显示的令牌（注意此令牌只显示一次）

用法

使用Figma插件

1. 打开Figma
2. 从右上角的菜单中，选择“插件”→ “发展”→ “Figma MCP插件”
3. 插件将启动并连接到MCP服务器

本地助手CLI

检查插件是否连接到文件：

npm run status -- YOUR_FIGMA_FILE_ID

将JSON有效负载排入本地插件桥：

npm run enqueue -- payload.json

或者通过stdin传输JSON：

cat payload.json | npm run enqueue -- -

主要特点

工具

• update_file：在Figma文件中添加和更新元素的工具
• 获取文件：检索Figma文件内容的工具
• get_mcp_tool_usage：获取MCP工具使用信息的工具

此分叉中添加的直接编辑功能

• 更新文本样式：将Figma文本样式或排版回退应用于现有的 TEXT 节点
• 更新节点：更新现有场景节点属性，包括填充、笔划、效果、间距、大小、布局、不透明度和变量绑定
• moveNode：将现有节点移动到特定子索引处的另一个父节点中
• updateInstance：更新实例组件属性、重置覆盖或交换源组件
• 插件状态端点：检查桌面插件是否连接到特定文件
• 插件更新端点：向连接的桌面插件发送批量更新，而无需经过完整的交互式MCP会话

可以通过update_file添加的元素类型

• createFrame：创建用作背景或容器的框架
• createText：创建文本元素（标题、描述等）
• 创建矩形：创建矩形（按钮、卡片等）
• 创建椭圆：创建椭圆（图标、装饰等）
• 创建线条：创建线条（分隔符、箭头等）
• 创建图像：插入图像（徽标、字符等）
• createComponent：创建可重用组件
• 更新文本样式：更新现有文本层的排版
• 更新节点：就地更新现有场景节点
• moveNode：修复现有场景节点
• updateInstance：更新实例属性和组件交换

示例：更新现有文本节点

{
  "fileId": "YOUR_FIGMA_FILE_ID",
  "updates": [
    {
      "type": "updateTextStyle",
      "data": {
        "nodeId": "9:34",
        "textStyleName": "Azeret 82 H1",
        "fontName": { "family": "Azeret Mono", "style": "Regular" },
        "fontSize": 82,
        "lineHeight": { "value": 80, "unit": "PIXELS" },
        "letterSpacing": { "value": 0, "unit": "PIXELS" }
      }
    }
  ]
}

您可以将相同的负载直接排队到本地插件桥：

curl -X POST http://localhost:5678/plugin/update \
  -H 'Content-Type: application/json' \
  --data @payload.json

GitHub准备就绪

此叉子现在包括：

• 基于推拉请求构建MCP服务器和Figma插件的CI工作流
• 直接编辑工作流程的Codex技能
• 用于网桥状态和有效载荷排队的辅助CLI

在发布你的fork之前，剩下的手动步骤是：

1. 创建新的GitHub存储库
2. 点 origin 到您的存储库
3. 推动树枝
4. 如果需要，在首次发布之前重命名包/插件标识符

路线图

当前的fork解决了核心的“编辑现有页面”问题。接下来的有用步骤是：

• 支持通过库元数据进行远程文本样式发现，而不仅仅是通过显式样式键
• 支持变量绑定，以实现更多样式曲面和更丰富的基于范围的文本编辑
• 添加组件实例安全的后代编辑
• 船用小型助手CLIs status, enqueue，以及键入的批有效载荷