About Claude Canvas MCP Server
Claude Canvas MCP Server is an MCP server in the Content category: mCP server for Claude to interact with Figma via the Claude Canvas plugin.
Install
claude mcp add claude-canvas-mcp-server -- npx -y claude-canvas-mcp-servernpx -y claude-canvas-mcp-serverThis server has no ConduID identity, so agent calls to it are not receipted. Pin the version you install and review the source before granting it credentials.
Ask AI
Ask AI about Claude Canvas MCP Server
Powered by Claude · Grounded in docs
Security checks
- ✓README presentThe repository ships documentation.
5 checks have not been run yet.
README
Claude Canvas
Talk to Figma through Claude. Claude Canvas connects Claude Code to Figma via an MCP server and a Figma plugin, giving Claude direct access to read, create, and modify designs.
How it works
Claude Code <-- stdio/MCP --> Server <-- WebSocket --> Figma Plugin <-- postMessage --> Figma API
The server is an MCP server that exposes Figma tools to Claude. The plugin is a Figma plugin with a chat UI that bridges commands between the server and Figma's API.
When running, Claude enters a persistent chat loop — you talk to Claude through the plugin's chat interface inside Figma, and Claude responds by reading and manipulating your designs directly.
Setup
Prerequisites
- Node.js >= 18
- Claude Code
- Figma desktop app
Install
npm install -g claude-canvas-mcp-server
This installs the MCP server and automatically registers it in your Claude Code config (~/.claude.json).
Figma Plugin
Install the Claude Canvas plugin from the Figma Community.
Usage
- Open the Claude Canvas plugin in Figma
- Start a Claude Code session
- Tell Claude to "start the canvas loop"
- Chat with Claude through the plugin UI — Claude can now read and edit your Figma file
Available Tools
| Category | Tools |
|---|---|
| Chat | wait_for_figma_message, respond_and_wait |
| Read | get_figma_selection, get_page_structure, get_local_styles, get_local_variables |
| Create/Modify | create_element, modify_element, delete_element |
| Components | create_component, add_variants, create_instance |
| Styles | create_style, set_style |
| Variables | create_variable_collection, create_variable, set_variable |
| Layout | set_auto_layout, group_nodes, boolean_operation |
| Export/Import | export_node, create_node_from_svg |
Development
git clone https://github.com/jcusick93/claude-canvas.git
cd claude-canvas
npm install
Build everything
npm run build
Watch mode
npm run dev
This runs both the server and plugin in watch mode. Plugin changes are picked up by Figma automatically. Server changes require restarting your Claude Code session.
Project structure
claude-canvas/
├── server/ MCP server (Node.js, published to npm)
│ ├── src/
│ │ ├── index.ts Entry point
│ │ ├── ws-server.ts WebSocket server (port 8080)
│ │ ├── mcp-server.ts MCP tool registration
│ │ └── tools/ Tool implementations
│ └── dist/index.js Built output
├── plugin/ Figma plugin (React)
│ ├── src/
│ │ ├── app/ Chat UI (React)
│ │ └── controller/ Figma API sandbox
│ ├── manifest.json Figma plugin manifest
│ └── dist/ Built output
└── package.json Monorepo root
License
MIT
README copy captured when this server was indexed; it may lag the repository. The original is authoritative.