Sunnyside Figma MCP

A Model Context Protocol (MCP) server that turns Figma designs into production code. It ships with a companion Figma plugin so LLM clients can read the layer you're actually looking at, extract pixel-perfect CSS and design tokens, and generate React / Tailwind / styled-components output — all from a natural-language prompt.

Two data paths are supported:

• Plugin bridge — highest fidelity. Uses Figma's native getCSSAsync() from inside the editor. Works on any plan, even Drafts.
• Figma REST API — works headless from a fileKey / nodeId for designs that live in a team/project you can reach with a Personal Access Token.

Quick Start

Requirements: Node 18+, a Figma Personal Access Token (create one here).

git clone https://github.com/tercumantanumut/sunnysideFigma-Context-MCP
cd sunnysideFigma-Context-MCP
npm install
npm run build

Create a .env:

FIGMA_API_KEY=figd_your_token_here
PORT=3333
OUTPUT_FORMAT=json

Run the HTTP/SSE server:

npm start
# → http://localhost:3333
#   SSE:              /sse
#   Streamable HTTP:  /mcp

Install the Figma plugin (one time):

1. Open Figma Desktop → Plugins → Development → Import plugin from manifest…
2. Pick figma-dev-plugin/manifest.json from this repo.
3. Run the plugin on any file. Select a frame → click Extract Dev Code.

You'll see "Data sent to MCP server successfully" when the bridge is live.

Connect an MCP Client

Pick one transport. Both expose the same 27 tools against the same running server.

stdio (client spawns the process)

Use this if you want the client to own the lifecycle and don't need the Figma plugin bridge to share state with the MCP process.

{
  "mcpServers": {
    "sunnyside-figma": {
      "type": "stdio",
      "command": "node",
      "args": [
        "/absolute/path/to/sunnysideFigma-Context-MCP/dist/cli.js",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "figd_your_token_here"
      }
    }
  }
}

SSE (recommended when using the Figma plugin)

The plugin posts extractions to http://localhost:3333/plugin/*. Point your MCP client at the same process so both share the extraction buffer.

{
  "mcpServers": {
    "sunnyside-figma": {
      "type": "sse",
      "url": "http://localhost:3333/sse"
    }
  }
}

Streamable HTTP

{
  "mcpServers": {
    "sunnyside-figma": {
      "type": "http",
      "url": "http://localhost:3333/mcp"
    }
  }
}

Tool Reference (27 tools)

Plugin-bridge tools — use these first

These read the buffer filled by the Figma plugin. Fastest, highest fidelity, no API limits.

Figma REST API tools

Require FIGMA_API_KEY + a file the token can see. Do not work on Drafts — move files to a team/project first.

... View full README on GitHub