figsor (Asif Kabir Antu)

菲格索

在Cursor中聊天。Figma中的设计。

Figsor是一个桥接的MCP服务器 光标AI 到 Figma，直接在Figma画布上实现聊天驱动的设计创建和编辑。

Cursor → MCP (stdio) → Figsor Server → WebSocket → Figma Plugin → Design on Canvas

设置

1.安装Figma插件（侧载）

克隆此仓库并将插件导入Figma：

https://github.com/AsifKabirAntu/figsor.git

在Figma中： 插件→ 发展→ 从清单导入插件 → 选择 figsor/figma-plugin/manifest.json

2.添加到光标

打开光标MCP设置并添加：

{
  "mcpServers": {
    "figsor": {
      "command": "npx",
      "args": ["-y", "figsor"]
    }
  }
}

3.开始设计

1. 打开Figma文件
2. 运行Figsor插件（插件→ 发展→ Figsor）
3. 使用光标聊天：

“创建一个包含电子邮件和密码字段的移动登录屏幕”

设计一个带有侧边栏、KPI卡和图表的仪表板

“编辑所选框架——使按钮变圆并将颜色更改为蓝色”

可用工具（45+）

创建和布局

读取并检查

矢量绘图和高级填充

图像、排版和限制

组件和变量工具

SVG导出和动画

AI驱动的SVG（Quiver）

对等设计（多代理）

设计工艺指南

优点：设计系统集成

连接你的Figma设计系统库，这样AI就可以使用你的组件，而不是通用的组件。

• 扫描并导入库组件
• 在您的设计系统中搜索
• 保存库并在库之间切换
• 使用DS生成设计

获取Figsor Pro→ --9美元一次性购买

需求

• Node.js 18岁或以后
• Figma 桌面或网络应用程序
• 光标 支持MCP的IDE（或任何兼容MCP的客户端——见下文）

使用Claude代码

Figsor适用于任何MCP客户端，而不仅仅是Cursor。使用它 克劳德代码:

claude mcp add --transport stdio --scope project figsor -- npx -y figsor

或添加到 .mcp.json 在项目根目录中：

{
  "mcpServers": {
    "figsor": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "figsor"]
    }
  }
}

然后按照相同的步骤操作——打开Figma，运行Figsor插件，然后聊天。

配置

许可证

MIT© 阿西夫·卡比尔