Labsco
MCP SERVER

Figma Context MCP

by tercumantanumut ↗

Turn the Figma frame you have selected into React, Tailwind, or styled-components code — and dry-run a design-token change before you commit it.

Design Systems & UI Component Libraries
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. Published to npm as figma-developer-mcp.