# Domo Figma MCP Server

Hey there! 👋 This is a cool little server that lets your favorite AI coding tools like [Cursor](https://cursor.sh/) and [Windsurf](https://codeium.com/windsurf) peek into your Figma files using the [Model Context Protocol](https://modelcontextprotocol.io/introduction).

Here's the cool part - when Cursor can actually see your Figma designs, it's *way* better at nailing the implementation on the first try. No more back-and-forth with screenshots!

Ready to dive in? Here's the quickest way to get started:

```bash
npx domo-figma-server --figma-api-key=<your-figma-api-key>
```

Want to know more about configuration? Just scroll down! 👇

## Check Out How It Works!

Here's a quick demo showing how to build a UI in Cursor with Figma design data:
- TODO: Add demo video

## How Does It Work?

It's super simple:
1. Fire up Cursor's composer in agent mode
2. Drop in a link to your Figma file (or just a specific frame/group)
3. Ask Cursor to work its magic - like "implement this design"
4. Sit back while Cursor grabs what it needs from Figma and writes your code

Behind the scenes, we've built this server specifically for Cursor. It takes all that complex Figma API data and boils it down to just the important stuff about layout and styling. Less noise = better results! 🎯

## Getting Started

### Quick Start ⚡

Want to try it out right away? Just run one of these commands:

```bash
npx domo-figma-server --figma-api-key=<your-figma-api-key>
```

Need a Figma API token? No worries! [Here's how to get one](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) 🔑

### Using Config Files?

If you're using tools like Windsurf, Cline, or [Claude Desktop](https://claude.ai/download), they'll want a config file. Here's what you need:

```json
{
  "mcpServers": {
    "domo-figma-server": {
      "command": "npx",
      "args": ["-y", "domo-figma-server", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<your-figma-api-key>"
      }
    }
  }
}
```

### DIY Installation 🛠️

Want to run it from source? Here's how:

1. Clone the [repo](https://github.com/MantisWare/domo-figma-server)
2. Run `pnpm install` to get all the goodies
3. Copy `.env.example` to `.env` and add your Figma API token (don't worry, read-only is fine!)
4. Fire it up with `pnpm run dev` (check out the flags below if you want to customize things)

## Setting Things Up

You can tweak things using either environment variables or command-line flags. Pro tip: command-line flags will override anything in your `.env` file!

### Environment Variables 🌳

- `FIGMA_API_KEY`: Your Figma API token (you'll need this!)
- `PORT`: Which port to run on (defaults to 3333 if you don't care)

### Command Line Magic ✨

- `--version`: See what version you're running
- `--figma-api-key`: Your Figma API token
- `--port`: Pick a port
- `--stdio`: Run in command mode instead of HTTP/SSE
- `--help`: See all the options

## Hooking It Up With Cursor

### First Steps 🚀

```bash
> npx domo-figma-server --figma-api-key=<your-figma-api-key>
# You'll see something like this:
# Initializing DOMO Figma Server in HTTP mode on port 3333...
# HTTP server listening on port 3333
# SSE endpoint available at http://localhost:3333/sse
# Message endpoint available at http://localhost:3333/messages
```

### Getting Cursor Ready

1. Head over to Cursor's settings and find the features tab
2. [Connect it to the MCP server](https://docs.cursor.com/context/model-context-protocol)
3. Look for the green dot - that means you're good to go! 🟢

![Connecting to MCP server in Cursor](./docs/cursor-MCP-settings.png)

Double-check your connection - when you see the green dot and tools show up, you're ready to rock!

![Confirming connection in Cursor](./docs/verify-connection.png)

### Time to Create! 🎨

Once you're all connected, just make sure you're in agent mode in Cursor's composer and you're ready to go!

Drop in a Figma link and ask Cursor to work with it - it'll automatically grab what it needs.

Pro tip: Figma files can be huge! Instead of linking the whole file, try selecting just the part you want to work with. Hit `CMD + L` (or right-click) to copy a link to just that piece:

![Copy link to Figma selection by right clicking](./docs/figma-copy-link.png)

## Want to See What's Happening?

Curious about what's going on under the hood? Run the `inspect` command to launch a neat web UI that shows you all the tool calls and responses:

```bash
pnpm inspect
# > figma-mcp@0.1.8 inspect
# > pnpx @modelcontextprotocol/inspector
#
# Starting MCP inspector...
# Proxy server listening on port 3333
#
# 🔍 MCP Inspector is up and running at http://localhost:5173 🚀
```

## The Cool Tools You Get

Here are the awesome tools this server gives you:

### get_figma_data 🎨

Grabs all the juicy details about your Figma file or specific parts of it.

What you'll need:
- `fileKey` (required): Find this in your Figma URL - it looks like `figma.com/(file|design)/<fileKey>/...`
- `nodeId` (optional, but super helpful!): Points to a specific thing in your file
- `depth` (optional): How deep you want to dig into the design tree

### download_figma_images 🖼️

Snags SVGs and PNGs from your Figma file.

What you'll need:
- `fileKey` (required): Same as above
- `nodes` (required): A list of what you want to download:
  - `nodeId`: Which image to grab (looks like 1234:5678)
  - `imageRef`: Only needed for some image types
  - `fileName`: What to call it when saved
- `localPath` (required): Where to save everything (don't worry, we'll create folders if needed)