Figma Mcp Server Az2

Figma Mcp Server Az2

🚀 Figma 模型上下文协议 (MCP) 服务器

Figma 模型上下文协议 (MCP) 服务器实现了 ModelContextProtocol,能让 AI 助手与 Figma 文件进行交互。借助该服务器提供的工具,用户可通过模型上下文协议,直接在 Figma 文件中查看、评论和分析设计。

✨ 主要特性

  • 可通过提供 URL 将 Figma 文件添加到 Claude 聊天中。
  • 能够阅读并发布 Figma 文件上的评论。

📦 安装指南

使用 Claude 进行配置

  1. 下载并在终端运行以下命令安装 Claude 桌面应用程序:
    curl -L "https://desktop.claude.ai/install.sh" | bash
    
  2. 获取 Figma API 密钥(访问 figma.com -> 点击左上角的你的名字 -> 设置 -> 安全)。授予 文件内容评论 权限范围。
  3. 配置 Claude 使用 Figma MCP 服务器。
    • 如果是首次配置,请运行以下命令:
    echo '{
    "mcpServers": {
    "figma-mcp": {
    "command": "npx",
    "args": ["figma-mcp"],
    "env": {
    "FIGMA_API_KEY": ""
    }
    }
    }
    }' > ~/Library/Application\ Support/Claude/claude_desktop_config.json
    
    • 如果不是首次,请将 figma-mcp 块复制到你的 claude_desktop_config.json 文件中。
  4. 重启 Claude 桌面应用。
  5. 在 Claude 的界面中查找锤子图标,并确认服务器已运行。

💻 使用示例

基础用法

在新的 Claude 聊天窗口中粘贴以下内容:

这个 Figma 文件里有什么?
https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC

高级用法

请访问 loom.com 查看完整的演示。

📚 详细文档

开发设置

使用 Inspector 进行本地运行

为了开发和调试目的,你可以使用 MCP 检查工具。该检查器提供了一个可视界面,用于测试和监控 MCP 服务器交互。

请参考 Inspector 文档 获取详细的安装说明和使用指南。

在终端中运行以下命令以本地测试:

npx @modelcontextprotocol/inspector npx figma-mcp

本地开发

  1. 克隆仓库:
    git clone 
    
  2. 安装依赖:
    npm install
    
  3. 构建项目:
    npm run build
    
  4. 开发模式下自动重建:
    npm run watch
    

提供的工具

该服务器提供以下工具:

属性 详情
add_figma_file 通过提供 URL 将 Figma 文件添加到上下文中
view_node 获取 Figma 文件中特定节点的缩略图
read_comments 获取 Figma 文件上的所有评论
post_comment 在 Figma 文件中的一个节点上发布评论
reply_to_comment 回复现有的 Figma 文件中的评论

每个工具都经过设计,以通过模型上下文协议界面实现与 Figma 文件的特定交互功能。

  • 0 关注
  • 0 收藏,22 浏览
  • system 提出于 2025-09-18 22:12

相似服务问题

相关AI产品