ZapCode Figma MCP Server

Zapcode Figma MCP Server

Connect your Figma designs directly to AI tools like Claude Desktop, Claude Code, Cursor, and Cline. Get real-time HTML, CSS, images, and assets from selected Figma frames — and now fully control Figma with 57 tools through the Model Context Protocol.

Get Started: Visit https://zapcode.pages.dev/ for complete documentation, tutorials, and live examples.

What's New in v2.0

The biggest release yet — massively expanded Figma control. AI can now create, edit, style, and manage your entire Figma design, not just read it.

Features

• Real-time Design Context - Fetches live data from your currently selected Figma frame
• Full Design Control - Create, edit, move, style, and delete any Figma element via AI
• Design System Support - Manage components, styles, and variables
• Complete Asset Export - Supports SVG, PNG, JPG, PDF, and all Figma asset types
• Configurable Storage - Save assets to custom paths or default workspace location
• Auto-organized Assets - Assets grouped by type (svg/, png/, jpg/, etc.)
• Zero Configuration - Works out of the box with npx
• Rich Context - Provides HTML structure, CSS styles, images, and design specifications

Prerequisites

1. Node.js 16+ - Download here
2. Figma Desktop or Web - Required for plugin
3. Zapcode Figma Plugin - Install from Figma Community

Installation

Note: The --figma-port argument specifies which port to use for communication with the Figma plugin. Default is 32896. You can customize this port if needed (e.g., to run multiple instances or if the default port is already in use).

Claude Desktop

Add to your claude_desktop_config.json:

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

{
  "mcpServers": {
    "zapcode-figma": {
      "command": "npx",
      "args": ["-y", "zapcode-figma-mcp", "--figma-port", "61234"]
    }
  }
}

Restart Claude Desktop after making changes.

Claude Code

Add to your claude_code_config.json:

macOS/Linux: ~/.config/claude-code/claude_code_config.json Windows: %APPDATA%\claude-code\claude_code_config.json

{
  "mcpServers": {
    "zapcode-figma": {
      "command": "npx",
      "args": ["-y", "zapcode-figma-mcp", "--figma-port", "61234"]
    }
  }
}

or run

claude mcp add --transport stdio zapcode -- npx -y zapcode-figma-mcp --figma-port 61234

Cursor

Add to your MCP settings configuration:

{
  "mcpServers": {
    "zapcode-figma": {
      "command": "npx",
      "args": ["-y", "zapcode-figma-mcp", "--figma-port", "61234"]
    }
  }
}

Cline (VS Code Extension)

Add to Cline's MCP settings:

{
  "mcpServers": {
    "zapcode-figma": {
      "command": "npx",
      "args": ["-y", "zapcode-figma-mcp", "--figma-port", "61234"]
    }
  }
}

Windsurf

Add to your Windsurf MCP configuration:

{
  "mcpServers": {
    "zapcode-figma": {
      "command": "npx",
      "args": ["-y", "zapcode-figma-mcp", "--figma-port", "61234"]
    }
  }
}

Continue (VS Code/JetBrains)

Add to Continue's configuration:

{
  "mcpServers": {
    "zapcode-figma": {
      "command": "npx",
      "args": ["-y", "zapcode-figma-mcp", "--figma-port", "61234"]
    }
  }
}

GitHub Copilot

Add to your GitHub Copilot MCP configuration:

{
  "servers": {
    "zapcode-figma": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "zapcode-figma-mcp", "--figma-port", "61234"]
    }
  }
}

How It Works

1. Install Plugin - Add Zapcode plugin to Figma Desktop
2. Run Plugin - Launch Zapcode plugin from Figma
3. Select Frame - Choose any frame in your Figma design
4. Ask AI - Ask AI to bring you the figma context
5. Get Context - Receive complete design data and assets

Troubleshooting

"Figma plugin is not connected"

Cause: MCP server cannot reach the Zapcode Figma plugin.

Solution:

1. Open Figma Desktop App
2. Open your design file
3. Run Zapcode plugin (Plugins → Zapcode)
4. Ensure plugin window stays open
5. Retry connecting using toggle
6. Try the MCP tool again

Assets Not Saving

Cause: Permission issues or invalid path.

Solution:

1. Ensure the assets path exists or parent directory is writable
2. Use absolute paths for clarity
3. Check file permissions on the target directory

Asset Organization

Assets are automatically organized by type:

assets/
├── svg/
│   ├── icon_component.svg
│   └── logo.svg
├── png/
│   ├── screenshot_1.png
│   └── image_export.png
└── jpg/
    └── photo.jpg

Supported Clients

This server works with any MCP-compatible client, including:

• Claude Desktop - Anthropic's desktop application
• Claude Code - Anthropic's official CLI for Claude
• Cursor - AI-first code editor
• Cline - Autonomous coding agent for VS Code
• Windsurf - AI-powered IDE with MCP Plugin Store
• Zed - High-performance code editor (MCP in preview)
• Continue - Open-source IDE extension
• GitHub Copilot - With MCP support in VS Code

Links

• ZapCode Documentation & Website - Complete guides, tutorials, and examples
• Join our Discord Community - Get help, share ideas, and connect with other users
• NPM Package
• Zapcode Figma Plugin
• Model Context Protocol
• MCP Servers Collection

Sources:

• Model Context Protocol Official Servers
• GitHub MCP Server
• MCP Clients Directory
• Official MCP Client Examples