Model Context Protocol server for Figma integration
Model Context Protocol server for Figma integration
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.
Compare MCP servers by category, or browse hosted MCP servers if you prefer an endpoint over a local process.
Check the linked publisher documentation and your connected client's tool list. Names and availability can vary with the server version and account permissions.
| Tool | What it does |
|---|---|
| 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 |
| 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 |
| 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 |
| check_figma_dev_connection | Probe the Dev Mode server |
| get_figma_dev_mode_code | React + Tailwind from Figma's own generator |
| generate_codegen_plugin | Scaffold a new Figma Dev Mode codegen plugin |
{
"mcpServers": {
"sunnyside-figma": {
"type": "stdio",
"command": "node",
"args": [
"/absolute/path/to/sunnysideFigma-Context-MCP/dist/cli.js",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
}
}
}
}From the project documentation. Replace placeholders and example paths before connecting.
| Variable | Description | Required |
|---|---|---|
| FIGMA_API_KEY | Declared in the maintainer’s client configuration. | Check documentation |
Feed real design data to your coding assistant — layout, tokens and components straight from Figma files.
Integrates Figma's API with Claude and other Model Context Protocol (MCP) compatible clients, providing read-only access to Figma files and projects.
Official MCP server for AppsAI - connect Claude Code to your AppsAI projects
Order photo prints, canvas, T-shirts and mugs from photos, made by a lab and posted in the US.
OODS Foundry is an object-oriented design system that extends the one you already have.
Use Cursor or other AI-powered tools to access Figma's rich files, data, components and much more using MCP server.