figma-dash-mcp-server 0.1.1

A FastMCP server connecting an IDE directly to the Figma Desktop App.

Figma fastMCP Server \U0001f3a8

An open-source Model Context Protocol (MCP) server that connects your IDE (like Cursor, Claude Desktop, or Antigravity) directly to the Figma Desktop App. This allows AI assistants to proactively generate and manipulate layouts, shapes, and designs directly inside your Figma canvas!

How it Works

The architecture consists of two parts running in tandem:

1. Figma Plugin (figma-plugin): Runs inside your Figma drawing canvas. It hosts a hidden websocket client to receive instructions.
2. FastMCP Python Server (mcp-server): Runs as a background service through your IDE's MCP config. It exposes AI tools (e.g. create_rectangle, create_frame) and sends those commands to Figma via WebSockets.

---

Installation & Setup for Users

1. Start the Figma Plugin

You need the plugin running inside Figma to receive drawing commands. (If this plugin is published to Figma Community, link it here. Until then, use local dev mode):

• Download this repository.
• Open Figma Desktop App.
• Right-click anywhere in your design canvas > Plugins > Development > Import plugin from manifest.
• Select the manifest.json file inside the figma-plugin/ folder.
• Run the MCP Link plugin from the plugins menu. Keep the small UI window open!

2. Configure Your IDE

You will need Python installed on your machine. Add the following to your IDE's MCP configuration settings (e.g., mcp.json in Cursor/VSCode):

{
  "mcpServers": {
    "figma-generator": {
      "command": "python",
      "args": ["<PATH_TO_THIS_REPO>/figma_dash_mcp_server/server.py"]
    }
  }
}

(Make sure to install the python requirements using uv init or your preferred tool!)

3. Usage

Once your IDE reloads the MCP config, just ask the AI agent:

"Hey, can you use your Figma tools to create a red rectangle and a title text frame in Figma?"

The shapes will pop up inside your Figma desktop app instantly!

Development

To add new tools:

1. Open figma_dash_mcp_server/server.py and create a new @mcp.tool() function.
2. Have the python tool send a new JSON method (like create_circle) over send_to_figma.
3. Open figma-plugin/code.js and add an else if (toolName === 'create_circle') block to execute the physical drawing logic using the Figma Plugin API.