AI导哈

Figma代码转换服务

基于FastAPI的Figma设计工具服务，提供设计转代码、变量提取、截图等功能，适用于Claude Desktop等开发工具。

  • by GSNadarajan
  • Python
  • 混合部署
  • 1 星标
  • 更新于
在 GitHub 查看 GSNadarajan/figma-mcp-server

使用说明

Figma MCP服务器

基于FastAPI的MCP服务器，为Claude Desktop提供Figma设计工具。将设计转换为代码、提取变量、获取屏幕截图等。

特性

  • 🎨 7 Figma工具（截图、设计上下文、变量、元数据等）
  • 🔄 具有重试逻辑的自动速率限制处理
  • 🚀 已准备好进行Render、Railway或Fly.io部署
  • 📡 Claude Desktop的服务器发送事件（SSE）
  • 🔧 浏览器客户端的CORS支持

与克劳德桌面连接

编辑 claude_desktop_config.json:

macOS： ~/Library/Application Support/Claude/claude_desktop_config.json 窗户： %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "url": "https://your-app.onrender.com/figma/sse",
      "type": "sse"
    }
  }
}

重新启动Claude Desktop并测试：

List available Figma MCP tools

本地开发

# Setup
python3 -m venv mcp-venv
source mcp-venv/bin/activate
pip install -r requirements.txt

# Configure
echo 'FIGMA_ACCESS_TOKEN=your-token-here' > .env

# Run
uvicorn main:app --reload --port 8002

服务器： http://localhost:8002

API路线

GET  /                    # Server info
GET  /health              # Health check
POST /figma/messages      # MCP protocol
GET  /figma/sse          # Server-Sent Events
POST /save-code           # Save generated code

可用工具

  1. get_screenshot -将设计导出为图像
  2. get_design_context -提取UI上下文以生成代码
  3. get_metadata -获取节点元数据
  4. get_variable_defs -访问设计变量
  5. get_figjam -工艺流程图
  6. get_code_connect_map -将组件映射到代码
  7. whoami -验证身份验证

与Claude一起使用

让克劳德使用你的Figma设计：

Generate React code from this Figma file:
https://www.figma.com/file/ABC123/My-Design

Claude将使用MCP服务器获取设计数据并生成代码。

速率限制

Figma API限制：约25-50次请求/分钟（免费层）

服务器会自动处理此问题：

  • 检测429个错误
  • 具有指数回退的重试（2s→ 4s → 8s)
  • 尊重 Retry-After 标头

部署选项

渲染（推荐）

  • 免费套餐：750小时/月
  • 从Git自动部署
  • 内置HTTPS
  • 配置： render.yaml ✅

铁路

  • 基于使用量的定价（约5美元/月）
  • 快速部署
  • 配置： railway.json ✅

Fly.io

  • 全球边缘部署
  • 免费套餐可用
  • 配置： Dockerfile ✅

技术栈

  • FastAPI-Web框架
  • httpx-异步HTTP
  • Pydantic-数据验证
  • Uvicorn-ASGI服务器

故障排除

429速率限制错误：

  • 请求之间等待60秒
  • 服务器自动重试并回退

克劳德连接失败：

  • 验证URL是否以结尾 /figma/sse
  • 检查服务器是否正在运行
  • 重新启动克劳德桌面

无效的API密钥：

  • 获取新令牌：https://www.figma.com/developers/api#access-代币
  • 更新环境变量
  • 重新部署

项目结构

figma-mcp-server/
├── main.py              # FastAPI MCP server (all-in-one)
├── requirements.txt     # Python dependencies
├── .env                 # Environment variables (not in git)
├── .gitignore          # Git ignore rules
├── Dockerfile          # Docker deployment config
└── render.yaml         # Render deployment config

为什么是单文件？

  • 更简单的部署（只需读取一个文件）
  • LLM更容易理解上下文
  • MCP服务器的通用模式
  • FastAPI在小型服务中以单片风格运行良好

链接

专为使用Nattu进行设计到编码的工作流程而构建🚀

相关 MCP