plumb-mcp — Claude Code MCP server: what it does, how to install
Bidirectional MCP server for Figma and code: transforms layouts into React, verifies rendered UI against the source, and drafts Figma designs from prompts.
claude mcp add --env FIGMA_TOKEN=<FIGMA_TOKEN> --env PLUMB_SESSION_NAME=<PLUMB_SESSION_NAME> --transport stdio plumb-mcp -- npx -y plumb-mcpWhat plumb-mcp does
The server extracts Figma screens or live website DOMs into a unified semantic design graph. It resolves auto-layout directly into flexbox, unifies design tokens, and tags elements with structural roles like nav, hero, or card. Reading Figma relies on a desktop app plugin, avoiding REST API rate caps across plans.
It operates in both directions. Functions like plumb_emit_react output deterministic JSX, while plumb_verify inspects your code against the original design to return prioritized fixes. In reverse, a text prompt triggers reference scraping via headless Chrome, CSS extraction for palettes, and Figma node construction.
Working with local Figma canvases requires the desktop plugin alongside FIGMA_TOKEN and PLUMB_SESSION_NAME environment keys.
What it helps with
- Extract Figma frames or live URLs into clean flexbox specs
- Generate deterministic React JSX directly from design graphs
- Audit rendered frontends against designs using
plumb_verify - Draft on-brand Figma pages and boards from text prompts
Example prompts for the agent
- Normalize this Figma screen into a design spec with
plumb_node - Run
plumb_verifyto check my rendered React component against the layout - Generate a landing page layout and brand board in Figma using
plumb_studio
How to install plumb-mcp
Platform CLI
claude mcp add --env FIGMA_TOKEN=<FIGMA_TOKEN> --env PLUMB_SESSION_NAME=<PLUMB_SESSION_NAME> --transport stdio plumb-mcp -- npx -y plumb-mcpReplace <…> with your own values
Platform CLI
codex mcp add plumb-mcp --env FIGMA_TOKEN=<FIGMA_TOKEN> --env PLUMB_SESSION_NAME=<PLUMB_SESSION_NAME> -- npx -y plumb-mcpReplace <…> with your own values
Config file
{
"mcpServers": {
"plumb-mcp": {
"command": "npx",
"args": [
"-y",
"plumb-mcp"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>",
"PLUMB_SESSION_NAME": "<PLUMB_SESSION_NAME>"
}
}
}
}Replace <…> with your own values
Config file
{
"servers": {
"plumb-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"plumb-mcp"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>",
"PLUMB_SESSION_NAME": "<PLUMB_SESSION_NAME>"
}
}
}
}Replace <…> with your own values
Platform CLI
gemini mcp add -e FIGMA_TOKEN=<FIGMA_TOKEN> -e PLUMB_SESSION_NAME=<PLUMB_SESSION_NAME> plumb-mcp npx -y plumb-mcpReplace <…> with your own values
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about plumb-mcp
How to install plumb-mcp in Claude Code?
Run claude mcp add --env FIGMA_TOKEN=<FIGMA_TOKEN> --env PLUMB_SESSION_NAME=<PLUMB_SESSION_NAME> --transport stdio plumb-mcp -- npx -y plumb-mcp. Supply your Figma credentials in the environment flags.
What does plumb-mcp do?
It bridges coding agents with Figma and live websites via Model Context Protocol. The server extracts clean layout data for code generation, inspects visual drift, and builds editable Figma layouts from brief descriptions.
Does plumb-mcp require a paid Figma subscription?
No, it operates on all tiers, including the Free plan. Figma reading and writing go through the local desktop plugin rather than rate-limited REST endpoints.
