⚡ Figma Live Bridge MCP

Zero API Key, Real-Time Figma Bridge for AI Coding Agents (Antigravity, Claude, OpenCode, Codex, Cursor).
Inspect frames, extract design tokens, and export SVG/PNG assets directly to your project in real-time — without paying for Dev Mode, managing tokens, or downloading ZIP files.

🚀 Key Highlights

• 🟢 Zero API Key / Zero Cost: No Figma Personal Access Tokens, no OAuth, no rate limits, no enterprise paywalls.

• ⚡ Live WebSocket Sync: Connects directly to your running Figma session. No manual ZIP exporting or file copying.

• 🎯 Token-Efficient by Design: Prunes 95% of Figma's heavy internal scene graph and returns a compact, high-level summary (< 250 tokens).

• 📦 Automatic Asset Exports: Vector icons are saved as clean .svg and images as .png directly into your project's ./src/assets folder.

• 🌐 Universal Protocol: Built on the official Model Context Protocol (MCP), compatible across Antigravity, Claude Code, Claude Desktop, OpenCode, and Codex.

Related MCP server: Claude Talk to Figma MCP

📁 Repository Structure

figma-live-mcp/
├── packages/
│   ├── shared/            # Shared TypeScript interfaces & types
│   ├── figma-plugin/      # Local Figma plugin (manifest.json + UI + code.ts)
│   └── mcp-server/        # MCP Server in Bun (WebSocket + stdio + Token Pruner)
└── dist/
    └── figma-live-mcp     # Self-contained native binary (compiled with Bun)

🛠️ 1-Minute Setup

1. Load the Plugin in Figma

1. Open Figma (Desktop app or Web).

2. Go to Menu (F) → Plugins → Development → Import plugin from manifest...

3. Select packages/figma-plugin/manifest.json from this repository.

4. Run the plugin (Plugins → Development → Figma Live Bridge).

   • A small window will appear with a live status indicator showing the active selection.

2. Configure Your AI Assistants

Add the MCP server to your AI tool's MCP configuration:

A. In Google Antigravity

Add to your Antigravity MCP settings or sidecar configuration:

{
  "mcpServers": {
    "figma-live": {
      "command": "/Users/roca/Documents/figma-live-mcp/dist/figma-live-mcp"
    }
  }
}

(Or use bun run /Users/roca/Documents/figma-live-mcp/packages/mcp-server/src/index.ts)

B. In Claude Desktop (~/Library/Application Support/Claude/claude_desktop_config.json)

{
  "mcpServers": {
    "figma-live": {
      "command": "/Users/roca/Documents/figma-live-mcp/dist/figma-live-mcp"
    }
  }
}

C. In Claude Code / OpenCode / Codex

Run or configure:

claude mcp add figma-live /Users/roca/Documents/figma-live-mcp/dist/figma-live-mcp

🧰 Available MCP Tools

💡 How to Use with AI Agents

Once configured, simply talk to your assistant naturally:

• "Crea el componente React para el botón que tengo seleccionado en Figma con sus estilos de Tailwind."

• "Inspecciona el frame 'Navbar' en Figma, descarga sus iconos a src/assets/icons y genera el componente."

• "Revisa los colores del diseño en Figma y compáralos con las variables de mi theme.css."

🔨 Development & Rebuilding

To rebuild the plugin and server:

# Install dependencies
bun install

# Build everything
bun run build

# Compile standalone native binary
bun run compile

📄 License

MIT © Mario Roca (marioccarloss)