figma

This MCP server bridges Claude with Figma, enabling you to create, edit, and export designs in Figma through natural language prompts. When enabled, Claude can instruct the Figma plugin to generate UI elements, wireframes, and layouts, then export assets as needed. The server runs in the background (via Docker) and communicates over WebSocket with the Claude desktop app, so you can issue high-level design requests like creating a login screen, crafting a responsive card layout, or exporting components for handoff. To use it, install and run the MCP server as configured, ensure the Figma Desktop app and plugin are available, and then select the Figma tool in Claude's tools menu to start issuing design commands.

Prerequisites:

• Docker installed on the machine running Claude
• Figma Desktop app
• Optional: Node.js and npm if you plan to build or modify the source

Installation steps:

1. Clone the repository (or download the project files): git clone <repository-url> cd figma-mcp-server

2. Build the project (if applicable): npm install npm run build npm run build:figma-plugin

3. Build the Docker image (if you are using the provided image): docker build -t mcp/hs-figma .

4. Configure Claude to load the MCP server (example given in the README): Edit the Claude configuration file, e.g.: ~/Library/Application Support/Claude/claude_desktop_config.json and add: { "mcpServers": { "figma": { "command": "docker", "args": [ "run", "-i", "-p", "9000:9000", "--rm", "mcp/hs-figma" ], "env": { "NODE_ENV": "production", "WEBSOCKET_MODE": "true", "WS_PORT": "9000" } } } }

5. Start Claude and verify the Figma MCP tool appears in Claude’s tools menu. The server will start automatically when needed as configured.

Tips and troubleshooting:

• Ensure the Figma Desktop app is running and the Figma plugin is available for the project you’re working on.
• If Claude cannot connect, verify that the MCP config JSON is correctly loaded and that the server process is running (port 9000 should be open).
• The environment variables WEBSOCKET_MODE and WS_PORT control the WebSocket behavior; keep WS_PORT at 9000 unless you need to change it.
• Common issues often involve plugin state or incorrect project context; provide Claude with specific prompts to minimize ambiguity (e.g., 'Create a login screen in Figma' or 'Design a blue primary button with rounded corners').
• When using Docker, ensure the image mcp/hs-figma is up-to-date if you’re pulling from a remote registry, and rebuild if you modify the plugin or server code.
• If you encounter WebSocket connection failures, verify that port 9000 is not blocked by firewalls and that WS_PORT matches between server and plugin configuration.