Figma MCP Server

FastAPI-based MCP server that exposes Figma design tools for Claude Desktop. Convert designs to code, extract variables, get screenshots, and more.

Features

• 🎨 7 Figma tools (screenshots, design context, variables, metadata, etc.)

• 🔄 Automatic rate limit handling with retry logic

• 🚀 Ready for Render, Railway, or Fly.io deployment

• 📡 Server-Sent Events (SSE) for Claude Desktop

• 🔧 CORS support for browser clients

Related MCP server: Claude Talk to Figma MCP

Connect with Claude Desktop

Edit claude_desktop_config.json:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Restart Claude Desktop and test:

List available Figma MCP tools

Local Development

# 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

Server: http://localhost:8002

API Routes

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

Available Tools

1. get_screenshot - Export designs as images

2. get_design_context - Extract UI context for code generation

3. get_metadata - Get node metadata

4. get_variable_defs - Access design variables

5. get_figjam - Process FigJam boards

6. get_code_connect_map - Map components to code

7. whoami - Verify authentication

Usage with Claude

Ask Claude to use your Figma designs:

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

Claude will use the MCP server to fetch design data and generate code.

Rate Limits

Figma API limits: ~25-50 requests/min (free tier)

The server handles this automatically:

• Detects 429 errors

• Retries with exponential backoff (2s → 4s → 8s)

• Respects Retry-After headers

Deployment Options

Render (Recommended)

• Free tier: 750 hours/month

• Auto-deploy from Git

• Built-in HTTPS

• Config: render.yaml ✅

Railway

• Usage-based pricing (~$5/month)

• Fast deployments

• Config: railway.json ✅

Fly.io

• Global edge deployment

• Free tier available

• Config: Dockerfile ✅

Tech Stack

• FastAPI - Web framework

• httpx - Async HTTP

• Pydantic - Data validation

• Uvicorn - ASGI server

Troubleshooting

429 Rate Limit Errors:

• Wait 60 seconds between requests

• Server auto-retries with backoff

Claude Connection Failed:

• Verify URL ends with /figma/sse

• Check server is running

• Restart Claude Desktop

Invalid API Key:

• Get new token: https://www.figma.com/developers/api#access-tokens

• Update environment variable

• Redeploy

Project Structure

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

Why single-file?

• Simpler deployment (one file to read)

• Easier for LLMs to understand context

• Common pattern for MCP servers

• FastAPI works great in monolithic style for small services

Links

• MCP Protocol

• Figma API

Built for design-to-code workflows with Nattu 🚀