Zapcode Figma Mcp

by Zapcode-FTC

238 downloads

Not rated

GitHub

Media

About

Zapcode Figma MCP is a server that connects Figma designs to AI tools such as Claude Desktop, Claude Code, Cursor, and Cline. It provides real-time HTML, CSS, images, and assets from selected Figma frames through the Model Context Protocol.

Details

Author: Zapcode-FTC
Downloads: 238
Categories: Media

- Fetches live data from your currently selected Figma frame.
- Exports SVG, PNG, JPG, PDF, and all Figma asset types.
- Saves assets to custom paths or default workspace location.
- Automatically organizes assets by type (svg/, png/, jpg/).
- Zero configuration with npx.
- Provides HTML structure, CSS styles, images, and design specifications.

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name Zapcode Figma Mcp

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

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

JSON

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

JSON

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

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

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

JSON

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

JSON

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

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

From the repository

Install the Zapcode Figma plugin from the Figma Community, then configure an MCP-compatible client (e.g., Claude Desktop, Cursor) by adding a JSON entry with the command npx -y zapcode-figma-mcp. After restarting the client and running the plugin in Figma, select a frame and ask the AI to fetch the design context.

`get_figma_context`

Retrieves the selected Figma frame context (HTML, CSS, prompt, image, assets). Saves any provided assets to the local directory. Accepts an optional 'assets_path' parameter to specify where assets should be saved.

`create_wireframe`

Batch-create a complete wireframe from a structured node list. Each node can reference a previously created node via tempId/parentId. Use this to create an entire screen layout in a single call instead of calling individual tools repeatedly.

`execute_figma_code`

Execute raw Figma Plugin API JavaScript code directly in Figma. The code runs in the plugin's main thread where 'figma' is a global. Use this for complex designs, loops, gradients, variables, rotations, boolean operations, reordering (parent.insertChild), flattening (node.flatten()), blend modes (node.blendMode), detaching instances (instance.detachFromComponent()), creating lines, deleting styles (style.remove()), or anything not covered by individual tools. For async operations (like loadFontAsync), write async code — it is automatically awaited. Returns the result of the last expression or a success message.

`get_figma_selection`

Get the currently selected nodes in Figma.

`get_node_properties`

Get full properties of a specific Figma node: position, size, fills, strokes, effects, constraints, auto-layout settings, opacity, blend mode, visibility, font details, and children count. Use this after creating or modifying nodes to verify the result.

`load_tool_category`

Load additional Figma tools for a specific task category. Call this before performing tasks that need specialized tools. Available categories: - pages → create_figma_page, list_figma_pages, set_current_page - shapes → create_figma_frame, create_figma_rectangle, create_figma_text, create_figma_ellipse - styling → set_fill_color, set_stroke, set_corner_radius, set_opacity, add_effect, set_gradient_fill, set_image_fill - layout → set_auto_layout, move_node, resize_node, align_nodes, distribute_nodes, set_constraints, set_layout_sizing - nodes → rename_node, delete_node, group_nodes, ungroup_nodes, duplicate_node, set_visibility, lock_node, search_nodes, select_node, get_node_tree - text → update_text_content, set_text_properties - components → get_figma_components, create_component_instance, apply_text_style, apply_color_style, create_component, create_component_set, set_component_property - styles → get_figma_styles, create_color_style, create_text_style, update_color_style, update_text_style - variables → get_local_variables, create_variable_collection, create_variable, set_variable_value, apply_variable - export → export_node Note: flatten, blend modes, z-order, detach instance, lines, and delete style are available via execute_figma_code.

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

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

McpServers

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

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 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 2. Figma 3. Zapcode Figma Plugin - 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 - 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

- 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

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

get_figma_context

create_wireframe

execute_figma_code

get_figma_selection

get_node_properties

load_tool_category

Claude Desktop / Cursor

McpServers

Zapcode Figma MCP Server

Features

Prerequisites

Installation

Claude Desktop

Claude Code

Cursor

Cline (VS Code Extension)

Windsurf

Zed Editor

Continue (VS Code/JetBrains)

GitHub Copilot

How It Works

Troubleshooting

"Figma plugin is not connected"

Assets Not Saving

Asset Organization

Supported Clients

Links

Install

More like this

Google Maps

BlenderMCP

AWS MCP Servers

Figma Context (Framelink)

KiCAD-MCP-Server

DaVinci Resolve MCP Server

`get_figma_context`

`create_wireframe`

`execute_figma_code`

`get_figma_selection`

`get_node_properties`

`load_tool_category`