Figma Smart Image MCP Server

A Model Context Protocol (MCP) server that processes Figma designs into Claude-readable images with automatic tiling, compression, and smart cropping.

Note: The canonical source for the server lives in figma-smart-image-mcp/. The root directory only contains docs and deployment helpers.

Live Deployment

Public URL: https://figma-smart-image-mcp-production.up.railway.app/

The live deployment supports multi-tenant authentication - multiple users can each use their own Figma token simultaneously.

Features

• Smart Export: Automatic SVG/PNG export from Figma
• Auto Tiling: Large designs automatically split into manageable tiles
• Compression: Optimized for Claude’s context size limits
• Smart Crops: Heuristic detection of UI patterns for better crops
• Multi-Tenant: Each user authenticates with their own Figma token
• Redis-Backed: Reliable token storage across sessions

Quick Start (Using Live Deployment)

Option A: Quick Command (Recommended for most users)

Run this command in your terminal:

claude mcp add --transport http figma-smart-image https://figma-smart-image-mcp-production.up.railway.app/mcp

That’s it! Now skip to Step 2 below.

Option B: Manual Configuration (.clauderc file)

Create or update .clauderc in your project directory:

{
  "mcpServers": {
    "figma-smart-image": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-sse",
        "https://figma-smart-image-mcp-production.up.railway.app/mcp"
      ]
    }
  }
}

Step 2: Authenticate with Figma (Recommended)

When you first use the MCP server, click Authenticate in Claude. The server will start Figma OAuth automatically and return you to Claude when finished. If Claude later shows Auth: not authenticated, just click Authenticate again to re-authorize.

Step 3: (Optional) Manual Token Entry

If you prefer a Personal Access Token:

1. Get a token from Figma Settings
2. Open https://figma-smart-image-mcp-production.up.railway.app/
3. Enter your token and click “Connect to Figma”

Step 4: Start Using Claude

Now you can use Figma Smart Image tools in Claude:

// Ask Claude to process a Figma design
"Please extract the hero section from this Figma link:
https://www.figma.com/design/..."

How It Works

┌─────────────────┐
│  Claude Client  │
└────────┬────────┘
         │ 1. Request MCP connection
         ▼
┌─────────────────────────────┐
│  Railway Deployment         │
│  (Multi-Tenant Server)      │
└────────┬────────────────────┘
         │ 2. Returns device_code + user_code
         ▼
┌─────────────────────────────┐
│  User visits auth page      │
│  - Enters user_code         │
│  - Enters Figma token       │
└────────┬────────────────────┘
         │ 3. Token stored in Redis
         ▼
┌─────────────────────────────┐