Zapcode Figma Mcp
@Zapcode-FTC
# 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)