Name: Sunnyside Figma MCP
Author: tercumantanumut

LABSCO SUMMARY

Two ways into a Figma file, and a token-change rehearsal you will not find in a plain exporter.

The plugin bridge reads Figma's own getCSSAsync() from inside the editor, so it works on any plan and on Drafts, while the REST path works headless from a file key. Pick SSE as the transport when the plugin is in play — stdio spawns a fresh process that cannot see the extraction the plugin just pushed.

What it is

An MCP server for Figma with a companion Figma plugin. The plugin pushes the selected layer's own CSS out of the editor; the server turns that into component code, and can also read files headlessly through the Figma REST API.

What you get

get_figma_dev_history, get_Basic_CSS, get_All_Layers_CSS — past extractions and the CSS for the root element or every layer in the selection
get_JSON — id, fills, variables, design tokens and allLayersCSS in one structured call
get_react_component, get_tailwind_component, get_styled_component — the same selection as TypeScript React with CSS modules, Tailwind classes, or styled-components
get_plugin_project_overview and analyze_app_structure — a summary and architectural breakdown of a fully scanned project
get_figma_data, get_figma_page_structure, get_figma_project_overview, analyze_figma_components, download_figma_images — headless access through the REST API, including batch SVG/PNG export
extract_design_tokens, build_dependency_graph, debug_token_registry, track_design_system_health — build a token catalog and see which layers consume which token
simulate_token_change, analyze_token_change_impact, apply_token_change, rollback_token_change, list_token_simulations, generate_migration_code — stage a token change, read its blast radius, then commit, revert, or emit the codemod
check_figma_dev_connection and get_figma_dev_mode_code — bridge to Figma's own Dev Mode server on localhost:3845 (Professional plan)
generate_codegen_plugin — scaffold a new Figma Dev Mode codegen plugin

Requirements

Node 18+ and a Figma Personal Access Token in FIGMA_API_KEY. The plugin path needs Figma Desktop with the bundled figma-dev-plugin imported once; the REST path needs the file to live in a team or project, since Drafts are not reachable by token. Install it from this repository: the figma-developer-mcp package on npm is published from GLips/Figma-Context-MCP, not from this project.

Setup effort

Build from source — git clone https://github.com/tercumantanumut/sunnysideFigma-Context-MCP

See installation options

USE CASES

01

Turning a selected frame into a component

Extract the frame from the plugin, then ask for it as React with Tailwind classes or as styled-components.

get_JSONget_tailwind_componentget_styled_component

02

Auditing a design system for drift

Scan the whole project, build a token catalog from it, and read the coverage and conflict report.

get_plugin_project_overviewextract_design_tokenstrack_design_system_health

03

Renaming a token without breaking the app

Simulate the change, read the blast radius across the layers that consume it, then apply it or roll it back.

simulate_token_changeanalyze_token_change_impactapply_token_changerollback_token_change

04

Pulling assets out of a shared file

Give the agent a Figma link and let it read the node tree and batch-export the icons.

get_figma_datadownload_figma_images

27 tools

Listed in project docs. Your client may show a different list.

get_figma_dev_history

get_Basic_CSS

get_All_Layers_CSS

get_JSON

get_react_component

get_tailwind_component

get_styled_component

get_plugin_project_overview

analyze_app_structure

get_figma_data

get_figma_page_structure

get_figma_project_overview

analyze_figma_components

download_figma_images

extract_design_tokens

BEFORE YOU INSTALL

What to know first

Tools you get

27 tools named in the project's documentation. The nine plugin-bridge tools need the companion Figma plugin running, the five REST tools need a token and fail on Drafts, and the two Dev Mode tools need a Figma Professional plan.

Requires

FIGMA_API_KEY in your environment

Where it runs

All 3 documented setups run the server on your machine.

INSTALLATION

Connect your client

You clone and build this one yourself.

Server setup

TERMINAL

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

Create a .env with FIGMA_API_KEY=<YOUR_FIGMA_API_KEY>, PORT=3333, OUTPUT_FORMAT=json

Run the HTTP/SSE server: npm start (serves http://localhost:3333, /sse, /mcp)

One time: import the companion plugin in Figma Desktop via Plugins → Development → Import plugin from manifest… and pick figma-dev-plugin/manifest.json

Connect your MCP client via stdio, SSE, or Streamable HTTP (SSE recommended when using the plugin)

MCP Clients

Claude Desktop

CLAUDE DESKTOP · JSON

{
  "mcpServers": {
    "sunnyside-figma": {
      "type": "stdio",
      "command": "node",
      "args": [
        "<YOUR_PATH_TO_SUNNYSIDE_FIGMA_CONTEXT_MCP>/dist/cli.js",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<YOUR_FIGMA_API_KEY>"
      }
    }
  }
}

Any MCP client — SSE

ANY MCP CLIENT — SSE · JSON

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

Any MCP client — HTTP

ANY MCP CLIENT — HTTP · JSON

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

Sunnyside Figma MCP