Sunnyside Figma MCP

Fork notice / attribution. This package (@mp3wizard/sunnyside-figma-mcp) is a redistribution of Sunnyside Figma Context MCP by Sunnyside Software (Umut TAN — @tercumantanumut), original source: https://github.com/tercumantanumut/sunnysideFigma-Context-MCP. It is published for development use only under the Sunnyside Proprietary Software License (see LICENSE) — commercial use is prohibited without written permission from Sunnyside Software, and this notice must be retained.

Security hardening in this fork. This fork contains additional security fixes that are not in the upstream repository — an enforced CORS allowlist, command-injection-safe HTTP fetch fallback, loopback-only server binding, Host-header validation, optional bearer-token auth, and dependency hardening. See the full writeup (findings, fixes, verification, and remaining items) in security report/SECURITY-REPORT.md.

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.

| Tool | Returns | |---|---| | get_figma_dev_history | List of past extractions (name, id, layout) | | get_Basic_CSS | Root element CSS via getCSSAsync() | | get_All_Layers_CSS | CSS for every layer in the selection | | get_JSON | Structured: id, fills, variables, design tokens, allLayersCSS — the highest-signal single call | | get_react_component | TypeScript React + CSS module | | get_tailwind_component | React + Tailwind classes (arbitrary values) | | get_styled_component | React + styled-components | | get_plugin_project_overview | Summary of the full scanned project (requires Scan Entire Project in the plugin) | | analyze_app_structure | Architectural breakdown of a scanned project |

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.

| Tool | Use | |---|---| | get_figma_data | Raw file or node JSON | | get_figma_page_structure | Page-level tree for orientation | | get_figma_project_overview | Team/project-level summary | | analyze_figma_components | Component detection across a file | | download_figma_images | Batch SVG/PNG export to disk |

Design token lifecycle

Token registry + what-if simulation for design-system changes.

| Tool | Use | |---|---| | extract_design_tokens | Build a token catalog from current selection | | build_dependency_graph | Map which layers consume which tokens | | debug_token_registry | Inspect the current registry state | | track_design_system_health | Coverage / conflict report | | simulate_token_change | Dry-run a rename/value change | | analyze_token_change_impact | Blast-radius report for a proposed change | | apply_token_change | Commit a simulated change | | rollback_token_change | Revert an applied change | | list_token_simulations | List staged simulations | | generate_migration_code | Produce codemod-style output for the change |

Figma Dev Mode (official) — Professional plan only

Bridges to Figma's official Dev Mode MCP Server on localhost:3845. Requires a Figma Professional plan with Dev Mode enabled in the desktop app.

| Tool | Use | |---|---| | check_figma_dev_connection | Probe the Dev Mode server | | get_figma_dev_mode_code | React + Tailwind from Figma's own generator |

Utility

| Tool | Use | |---|---| | generate_codegen_plugin | Scaffold a new Figma Dev Mode codegen plugin |

Typical Workflows

Generate a component from a selection

1. In Figma, select the frame.
2. In the plugin, click Extract Dev Code.
3. Ask your agent: "Generate a React + Tailwind component from the latest extraction." → calls get_tailwind_component.

Audit a design system

1. Click Scan Entire Project in the plugin.
2. Ask: "Summarize this project's design tokens and flag conflicts." → calls get_plugin_project_overview + extract_design_tokens + track_design_system_health.

Propose a token change safely

1. simulate_token_change → analyze_token_change_impact → review.
2. apply_token_change if safe, rollback_token_change to undo.
3. generate_migration_code to produce the code migration.

Headless export

• Give your agent a Figma URL (Copy link to selection). It parses fileKey + nodeId and calls get_figma_data / download_figma_images.

Architecture

┌───────────────────┐     POST /plugin/*     ┌──────────────────────┐
│  Figma Plugin     │ ─────────────────────▶ │                      │
│  (figma-dev-plugin)                        │  HTTP server :3333   │
└───────────────────┘                        │  ├─ /sse   (MCP SSE) │
                                             │  ├─ /mcp   (MCP HTTP)│
┌───────────────────┐   MCP (SSE / HTTP /    │  └─ extraction cache │
│  MCP client       │   stdio)               │                      │
│  (Claude, Selene, │ ◀──────────────────────│                      │
│   Cursor, etc.)   │                        └──────────────────────┘
└───────────────────┘                                   │
                                                        │ optional
                                                        ▼
                                            ┌──────────────────────┐
                                            │  Figma REST API      │
                                            │  Figma Dev Mode :3845│
                                            └──────────────────────┘

• The HTTP server and MCP endpoints live in the same Node process, so the plugin's extraction buffer and the MCP tools share memory. That's why SSE is the recommended transport when the plugin is in play.
• stdio mode spawns a fresh process per client — it won't see plugin extractions from a separate running server. Use SSE/HTTP if you need that shared state.

Troubleshooting

"No extracted data available" — re-open the plugin and click Extract Dev Code. If the client is stdio, switch to SSE so it shares state with the plugin server.

Figma REST tools time out / 404 — the file is likely in Drafts. Move it to a team/project, or use the plugin path.

check_figma_dev_connection fails — requires Figma Professional + Dev Mode MCP Server enabled in Figma Desktop (Preferences → Enable local MCP Server). Free plan users should stick to the plugin tools.

Server won't start on :3333 — another process is bound. Change PORT in .env and update your MCP client URL accordingly.

Session errors hitting /mcp directly with curl — the Streamable HTTP transport requires initializing a session (initialize → notifications/initialized) before tools/list. MCP clients handle this automatically.

Development

npm run dev          # tsup watch build
npm run dev:cli      # stdio dev loop
npm run type-check   # tsc --noEmit
npm run lint
npm test             # jest
npm run inspect      # open @modelcontextprotocol/inspector

Project layout:

src/
├─ cli.ts                    # entrypoint (HTTP + stdio)
├─ mcp.ts                    # tool registration
├─ server.ts                 # Express + MCP transport wiring
├─ tools/
│  ├─ plugin-tools.ts        # plugin-bridge tools
│  ├─ figma-codegen-tools.ts # React / Tailwind / styled-components
│  ├─ figma-dev-tools.ts     # official Dev Mode bridge
│  ├─ design-system-tools.ts # token lifecycle
│  └─ figma-api-tools.ts     # REST API
└─ services/
   └─ plugin-integration.ts  # /plugin/* endpoints + extraction cache

figma-dev-plugin/            # companion Figma plugin (manifest + UI + code)

Contributing

PRs welcome. Run npm run lint && npm test && npm run build before opening. Keep the tool surface lean — if you add a new tool, audit for overlap with an existing one.

License

See LICENSE. Built on concepts from Framelink MCP but substantially different; proprietary with specific terms. Commercial inquiries: Umut TAN — [email protected].