大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。



本项目实现了Cursor AI与Figma之间的模型上下文协议(MCP)集成，使Cursor能够通过编程方式读取Figma设计并进行修改。

https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c

• - 用于Figma集成的TypeScript MCP服务器
• - 用于与Cursor通信的Figma插件
• - 促进MCP服务器与Figma插件之间通信的WebSocket服务器

1. 如果尚未安装，请先安装Bun：

2. 运行设置脚本，这也会在Cursor的当前项目中安装MCP

3. 启动WebSocket服务器

4. 启动MCP服务器

5. 新增 从Figma社区页面安装Figma插件或

视频链接

批量文本内容替换

感谢@dusskapark贡献的批量文本替换功能。这里是演示视频。

实例覆盖属性传播 另一个来自@dusskapark的贡献 通过单个命令将组件实例的覆盖属性从一个源实例传播到多个目标实例。此功能在使用需要类似自定义的组件实例时，可以大幅减少重复的设计工作。查看我们的演示视频。

将服务器添加到中的Cursor MCP配置：

启动WebSocket服务器：

1. 在Figma中，转到插件 > 开发 > 新建插件
2. 选择"链接现有插件"
3. 选择文件
4. 插件现在应该可以在Figma的开发插件中使用了

1. 通过PowerShell安装bun

2. 取消中主机名的注释

3. 启动WebSocket

1. 启动WebSocket服务器
2. 在Cursor中安装MCP服务器
3. 打开Figma并运行Cursor MCP插件
4. 通过使用加入频道将插件连接到WebSocket服务器
5. 使用Cursor通过MCP工具与Figma通信

MCP服务器提供以下与Figma交互的工具：

• - 获取当前Figma文档的信息
• - 获取当前选择的信息
• - 无参数获取当前选择的详细节点信息
• - 获取特定节点的详细信息
• - 通过提供节点ID数组获取多个节点的详细信息

• - 获取当前文档或特定节点中的所有注释
• - 创建或更新带有Markdown支持的注释
• - 批量高效创建/更新多个注释
• - 扫描具有特定类型的节点（用于查找注释目标很有用）

• - 获取节点的所有原型反应，并带有视觉高亮动画
• - 将复制的FigJam连接器设置为创建连接的默认连接器样式（必须在创建连接之前设置）
• - 基于原型流程或自定义映射在节点之间创建FigJam连接器线条

• - 创建具有位置、大小和可选名称的新矩形
• - 创建具有位置、大小和可选名称的新框架
• - 创建具有可定制字体属性的新文本节点

• - 使用智能分块扫描文本节点，适用于大型设计
• - 设置单个文本节点的文本内容
• - 批量高效更新多个文本节点

• - 设置框架的布局模式和换行行为（NONE、HORIZONTAL、VERTICAL）
• - 为自动布局框架设置内边距值（上、右、下、左）
• - 设置自动布局框架的主轴和对齐轴对齐方式
• - 设置自动布局框架的水平和垂直尺寸模式（FIXED、HUG、FILL）
• - 设置自动布局框架中子项之间的距离

• - 设置节点的填充颜色（RGBA）
• - 设置节点的描边颜色和粗细
• - 设置节点的圆角半径，可选择每个角的单独控制

• - 将节点移动到新位置
• - 使用新尺寸调整节点大小
• - 删除节点
• - 高效地一次性删除多个节点
• - 创建现有节点的副本，可选择位置偏移

• - 获取本地样式的信息
• - 获取本地组件的信息
• - 创建组件实例
• - 从选定的组件实例中提取覆盖属性
• - 将提取的覆盖应用到目标实例

• - 将节点导出为图像（PNG、JPG、SVG或PDF）- 目前图像仅支持以base64文本形式返回

• - 加入特定频道以与Figma通信

MCP服务器包含几个帮助提示，指导您完成复杂的设计任务：

• - 使用Figma设计的**实践
• - 阅读Figma设计的**实践
• - 在Figma设计中替换文本的系统方法
• - 将手动注释转换为Figma原生注释的策略
• - 在Figma中组件实例之间转移覆盖的策略
• - 使用’get_reactions’的输出将Figma原型反应转换为连接器线条的策略，并指导按顺序使用’create_connections’

1. 导航到Figma插件目录：
2. 编辑code.js和ui.html

使用Figma MCP时：

1. 发送命令前始终加入频道
2. 首先使用获取文档概览
3. 修改前使用检查当前选择
4. 根据需要使用适当的创建工具：
   • 用于容器
   • 用于基本形状
   • 用于文本元素
5. 使用验证更改
6. 尽可能使用组件实例以保持一致性
7. 适当处理错误，因为所有命令都可能抛出异常
8. 对于大型设计：
   • 在中使用分块参数
   • 通过WebSocket更新监控进度
   • 实现适当的错误处理
9. 对于文本操作：
   • 尽可能使用批量操作
   • 考虑结构关系
   • 使用有针对性的导出验证更改
10. 对于转换旧版注释：
    • 扫描文本节点以识别编号标记和描述
    • 使用查找注释所指的UI元素
    • 使用路径、名称或接近度将标记与目标元素匹配
    • 使用适当分类注释
    • 使用批量创建原生注释
    • 验证所有注释是否正确链接到其目标
    • 成功转换后删除旧版注释节点
11. 将原型连线可视化为FigJam连接器：

• 使用提取原型流程，
• 使用设置默认连接器，
• 使用生成连接器线条以进行清晰的视觉流程映射。

MIT