Zapcode Figma Mcp

# Zapcode Figma MCP Server [](https://www.npmjs.com/package/zapcode-figma-mcp) 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 through the Model Context Protocol. ## Features - **Real-time Design Context** - Fetches live data from your currently selected Figma frame - **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](https://nodejs.org/) 2. Figma 3. **[Zapcode Figma Plugin](https://www.figma.com/community/plugin/1454956820198178710/zapcode)** - Install from Figma Community ## Installation ### 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` ```json { "mcpServers": { "zapcode-figma": { "command": "npx", "args": ["-y", "zapcode-figma-mcp"] } } } ``` 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` ```json { "mcpServers": { "zapcode-figma": { "command": "npx", "args": ["-y", "zapcode-figma-mcp"] } } } ``` ### Cursor Add to your MCP settings configuration: ```json { "mcpServers": { "zapcode-figma": { "command": "npx", "args": ["-y", "zapcode-figma-mcp"] } } } ``` ### Cline (VS Code Extension) Add to Cline's MCP settings: ```json { "mcpServers": { "zapcode-figma": { "command": "npx", "args": ["-y", "zapcode-figma-mcp"] } } } ``` ### Windsurf Add to your Windsurf MCP configuration: ```json { "mcpServers": { "zapcode-figma": { "command": "npx", "args": ["-y", "zapcode-figma-mcp"] } } } ``` ### Zed Editor Add to your Zed settings (MCP support currently in preview): ```json { "context_servers": { "zapcode-figma": { "command": "npx", "args": ["-y", "zapcode-figma-mcp"] } } } ``` ### Continue (VS Code/JetBrains) Add to Continue's configuration: ```json { "mcpServers": { "zapcode-figma": { "command": "npx", "args": ["-y", "zapcode-figma-mcp"] } } } ``` ### GitHub Copilot Add to your GitHub Copilot MCP configuration: ```json { "servers": { "zapcode-figma": { "type": "stdio", "command": "npx", "args": ["-y", "zapcode-figma-mcp"] } } } ``` ## 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 5. 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](https://modelcontextprotocol.io/clients#claude-desktop) - Anthropic's desktop application - [Claude Code](https://claude.com/claude-code) - Anthropic's official CLI for Claude - [Cursor](https://www.cursor.com/) - AI-first code editor - [Cline](https://github.com/cline/cline) - Autonomous coding agent for VS Code - [Windsurf](https://codeium.com/windsurf) - AI-powered IDE with MCP Plugin Store - [Zed](https://zed.dev/) - High-performance code editor (MCP in preview) - [Continue](https://continue.dev/) - Open-source IDE extension - [GitHub Copilot](https://github.com/features/copilot) - With MCP support in VS Code ## Links - [NPM Package](https://www.npmjs.com/package/zapcode-figma-mcp) - [Zapcode Figma Plugin](https://www.figma.com/community/plugin/1454956820198178710/zapcode) - [Model Context Protocol](https://modelcontextprotocol.io/) - [MCP Servers Collection](https://github.com/modelcontextprotocol/servers) --- **Sources:** - [Model Context Protocol Official Servers](https://github.com/modelcontextprotocol/servers) - [GitHub MCP Server](https://github.com/github/github-mcp-server) - [MCP Clients Directory](https://github.com/punkpeye/awesome-mcp-clients) - [Official MCP Client Examples](https://modelcontextprotocol.io/clients)