Claude Canvas MCP Server
MCP server for Claude to interact with Figma via the Claude Canvas plugin
Ask AI about Claude Canvas MCP Server
Powered by Claude Β· Grounded in docs
I know everything about Claude Canvas MCP Server. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
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
