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

curl -LsSf https://astral.sh/uv/install.sh | sh

Windows (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 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):

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