Figma-Local

This MCP server provides local Figma tooling to Claude and Codex via the MCP protocol. It works in conjunction with a local Figma Bridge that receives data from a Figma plugin running in the Figma Desktop app, and exposes a set of Figma-specific tools to Claude/Codex over MCP. The available tools let you inspect your current Figma document, retrieve the active page details, query the current selection, search for nodes, extract node properties, export nodes as images, and verify the bridge connection. Once the bridge and MCP server are running, you can register the MCP server with Claude and Codex so they can invoke these tools on your local Figma files. Typical workflow: install dependencies, start the bridge server, add the MCP to Claude/Codex, then ask Claude to run commands like finding nodes, exporting a frame, or getting node properties.

Key capabilities include:

• get-figma-document: Retrieve the full document structure for the current Figma file.
• get-current-page: Get detailed information about the active page.
• get-selection: Retrieve the currently selected nodes.
• get-all-pages: List all pages in the document.
• find-nodes: Search for nodes by name or other criteria.
• get-node-properties: Fetch detailed properties for a specified node.
• export-node: Export a node as PNG, SVG, or JPG.
• check-bridge-status: Verify that the bridge and MCP server are connected and functional.

To use, run the bridge (which also starts the HTTP API for the MCP server), register the MCP with Claude/Codex, and then issue natural language requests that map to these tools (e.g., asking for the current selection or exporting a node).

• Prerequisites:
  • Node.js installed (recommended version compatible with your project)
  • Yarn installed
  • Figma Desktop installed for plugin development

1. Clone or download the repository and navigate to the project root.
2. Install dependencies:

   yarn install
   

3. Build the Figma plugin (if you intend to modify the plugin):

   yarn build-plugin
   

4. Install and set up the Figma plugin in Figma Desktop (per the repository instructions):
   • Open Figma Desktop
   • Plugins → Development → Import plugin from manifest
   • Select /figma-plugin/manifest.json
5. Start the bridge server (this also enables the MCP HTTP API):

   yarn bridge
   

   • This will start the WebSocket bridge on ws://localhost:3000 and the HTTP API on http://localhost:3001 for the MCP server.
6. Register the MCP with Claude and Codex:
   • claude mcp add figma-local node /path/to/your/mcp.js
   • codex mcp add figma-local node /path/to/your/mcp.js
   • Validate with:

     claude mcp list
     codex mcp list
     

   • Replace /path/to/your/mcp.js with your actual project path.
7. Run the plugin from Figma and ensure the bridge shows a connection status in its UI (it should display 'Connected to bridge').

• Ensure the bridge server is running when you attempt to use Claude/Codex with the MCP server.
• If Claude/Codex cannot access Figma, verify the bridge is running and use the check-bridge-status tool to confirm connectivity.
• If you encounter build errors, re-run yarn install and then yarn build-plugin for the plugin code.
• The MCP server operates locally; there are no external API keys or network dependencies beyond the local bridge and Figma plugin.
• If port conflicts occur, ensure nothing else is occupying ports 3000 (WebSocket) and 3001 (HTTP API) used by the bridge server.