# Figma Dash MCP Server

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 operates securely and completely offline on your local machine:
1. **Figma Plugin (`figma-plugin`)**: Runs inside your Figma drawing canvas. It hosts a hidden HTTP polling client to receive instructions.
2. **FastMCP Python Server (`figma_dash_mcp_server`)**: Runs as a background service spawned by your IDE. It exposes AI tools (e.g. `create_rectangle`, `create_frame`) and sends those commands to Figma via an internal loopback server (port `49901`).

---

## 🚀 Quick Start Guide

### Step 1: Install the Prerequisites
Because the server is built with Python, you need an extremely fast package manager called `uv` to automatically download and run it in an isolated environment. 

Install `uv` (it takes 2 seconds):

**macOS / Linux**
```bash
curl -LsSf https://astral.sh/uv/install.sh | sh
```

**Windows** (PowerShell)
```powershell
powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
```
*(If you are setting this up on a fresh machine, you might also need to install [Python](https://www.python.org/downloads/) locally if `uv` doesn't install it for you).*

---

### Step 2: Configure Your IDE
You do **not** need to manually download or install any Python files. Your IDE will use the `uvx` command to grab the latest official package directly from PyPI on-the-fly!

Add the following block to your IDE's MCP configuration settings (e.g., `Cursor Settings > Features > MCP`, or `claude_desktop_config.json`):

```json
{
  "mcpServers": {
    "figma-generator": {
      "command": "uvx",
      "args": ["--refresh", "figma-dash-mcp-server@latest"]
    }
  }
}
```
*(When your IDE restarts, it will execute this command in the background, keeping the server listening for your AI agent!)*

---

### Step 3: Connect your Figma Desktop App
For the IDE server to physically draw on your canvas, it needs a linked Figma plugin active.
1. Download or clone this repository.
2. Open your **Figma Desktop App**.
3. Right-click anywhere in your design canvas > **Plugins** > **Development** > **Import plugin from manifest**.
4. Select the `manifest.json` file inside the `figma-plugin/` folder.
5. Run the **Dash MCP Link** plugin from the plugins menu. Keep the small UI window open on the side of your screen!

---

### Step 4: Talk to your AI!
With the Figma plugin open and your IDE restarted, the connection is instantly established. In your IDE chat, simply say:
> *"Hey, can you use your Figma tools to create a premium glassmorphic dashboard layout in Figma?"*

The entire UI layout will build itself directly inside your Figma application in real-time!

## Development
To add new AI capabilities:
1. Open up `figma_dash_mcp_server/server.py` and write a new `@mcp.tool()` function. 
2. Have the python tool send a new JSON method (like `create_circle`) over the `send_to_figma` background thread.
3. Open `figma-plugin/code.js` and add an `else if (toolName === 'create_circle')` block to physically execute the drawing via the Figma Plugin API.