Figma MCP Write Server

Figma MCP写服务器

一种模型上下文协议（MCP）服务器，通过插件API提供对Figma的写访问，使人工智能代理能够以编程方式创建、修改和管理Figma设计。

设计时❤️ 由人类。编码为✨ 人工智能代理（Claude和Gemini）

\[！警告\] 该项目处于预发布开发模式（语义版本控制\ 备注：由于更好的squelite3预构建二进制兼容性，特别需要Node.js v22.x。其他Node版本可能需要手动编译，这在某些系统上可能会失败。

2.克隆和构建项目

git clone git@github.com:oO/figma-mcp-write-server.git
cd figma-mcp-write-server
npm install
npm run build

3.配置克劳德桌面

将此配置添加到您的Claude Desktop MCP设置文件中：

配置：

{
  "mcpServers": {
    "figma-mcp-write-server": {
      "command": "node",
      "args": ["/path/to/figma-mcp-write-server/dist/index.js"],
      "env": {
        "NODE_ENV": "production"
      }
    }
  }
}

4.安装Figma插件

1. 打开Figma桌面
2. 首选 插件 → 发展 → 从清单导入插件
3. 选择 figma-plugin/manifest.json 从项目目录
4. 从以下位置运行插件 插件 → 发展 → Figma MCP写服务器

可选的：通过复制自定义服务器设置 config.example.yaml 到您的平台特定配置目录，并根据需要进行编辑。看 配置指南 了解详情。

🎯 开始创建

打开Claude Desktop，使用24个可用工具中的任何一个进行编程设计

布局与结构

• “创建带有标题和副标题的标题框”
• “使此框架以16px的间距垂直排列其子项”
• “框内居中文本”或“将圆的中心与矩形的左边缘对齐”
• “将2px红色笔划添加到此带有圆角端盖的矩形中”

设计系统

• “创建调色板并一致应用样式”
• “构建不同颜色和样式的按钮变体”
• 为颜色和间距创建设计标记，绑定到组件

布尔运算

• “将形状与联合相结合，用减法创建切口”
• “通过相交和排除形状来创建复杂的徽标”
• “构建具有一致笔划填充转换的图标库”

向量运算

• 创建和编辑具有顶点、路径和贝塞尔曲线的矢量形状
• 将形状、笔划和文本转换为可编辑的矢量路径
• “将矢量元素提取或分解为单独的形状”
• “将多个向量扁平化为单个优化路径”

开发者交接

• 添加注释和度量，为开发人员生成CSS
• “将所选组件导出为PNG文件”
• “使用间距测量创建设计规范”

图像

• “列出此页面中使用的所有图像及其使用信息”
• “从以下位置创建图像节点https://example.com/photo.jpg"
• “在位置100,50添加本地文件~/Desktop/logo.png中的图像”
• “从位置150200处的现有哈希abc123创建映像节点”
• “以PNG格式将图像数据导出到下载文件夹”

🚧 当前限制

• 需要活动会话 -需要打开带有活动文件的Figma Desktop应用程序
• 手动插件设置 -插件必须手动安装并为每个会话运行
• 单个文件作用域 -操作仅限于当前打开的文件和所选页面
• 依赖网 -WebSocket连接在较差的网络上可能不稳定
• 图案填充创建 -由于已知的Figma插件API验证错误，可以读取但不能创建模式填充
• 仅限桌面 -Figma浏览器版本具有有限的插件API访问权限

📚 文档

• 完整指南 -设置、工具、示例和开发
• 例子 -使用自然语言的常见设计任务
• 配置 -高级服务器设置
• 发展 -供贡献者参考的技术资料
• 更新日志 -版本历史和更新

📄 许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。