Figma Context MCP

Extract code, assets, and component structures from Figma designs to use within AI workflows.

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.

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

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

FIGMA_API_KEY=figd_your_token_here PORT=3333 OUTPUT_FORMAT=json

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

{ "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 tohttp://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" } } }

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

Bridges to Figma's official Dev Mode MCP Server onlocalhost:3845. Requires a Figma Professional plan with Dev Mode enabled in the desktop app.
- In Figma, select the frame.
- In the plugin, clickExtract Dev Code.
- Ask your agent:"Generate a React + Tailwind component from the latest extraction."→ callsget_tailwind_component.
- ClickScan Entire Projectin the plugin.
- Ask:"Summarize this project's design tokens and flag conflicts."→ callsget_plugin_project_overview+extract_design_tokens+track_design_system_health.
- simulate_token_change→analyze_token_change_impact→ review.
- apply_token_changeif safe,rollback_token_changeto undo.
- generate_migration_codeto produce the code migration.

┌───────────────────┐ 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 thesame 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 — itwon'tsee plugin extractions from a separate running server. Use SSE/HTTP if you need that shared state.

"No extracted data available"— re-open the plugin and clickExtract 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_connectionfails— 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. ChangePORTin.envand update your MCP client URL accordingly.

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

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

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)

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

SeeLICENSE. Built on concepts from Framelink MCP but substantially different; proprietary with specific terms. Commercial inquiries:Umut TAN —tercumantanumut@gmail.com.

Build and deploy full-stack Next.js apps with 98 tools for React, AWS, and MongoDB