Metadata-Version: 2.4
Name: figma-dash-mcp-server
Version: 0.1.1
Summary: A FastMCP server connecting an IDE directly to the Figma Desktop App.
Requires-Python: >=3.12
Description-Content-Type: text/markdown
Requires-Dist: fastmcp>=3.2.0
Requires-Dist: mcp>=1.27.0
Requires-Dist: websockets>=16.0
Requires-Dist: aiohttp>=3.9.0

# 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):

```json
{
  "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.
