Model Context Protocol server for Figma integration
Connect SunnysideFigma Context MCP to Claude, Cursor or any other MCP client and it stops being a tab you switch to. Model Context Protocol server for Figma integration. The sunnysidefigma context mcp mcp server is what makes that connection.
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.
The toolset is worth reading before you wire it up, because it tells you what the integration is really for:
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 selectionget_JSON — Structured: id, fills, variables, design tokens, allLayersCSS — the highest-signal single callget_react_component — TypeScript React + CSS moduleget_tailwind_component — React + Tailwind classes (arbitrary values)get_styled_component — React + styled-componentsget_plugin_project_overview — Summary of the full scanned project (requires Scan Entire Project in the plugin)analyze_app_structure — Architectural breakdown of a scanned projectget_figma_data — Raw file or node JSONget_figma_page_structure — Page-level tree for orientationget_figma_project_overview — Team/project-level summaryConfiguration is passed through the environment: FIGMA_API_KEY. Treat anything key-shaped as a real credential — scope it to the minimum the server needs, and rotate it if it ever lands in a shared config.
The server ships on npm as npm, so your MCP client can launch it on demand — there is no separate build step. Add the server block to your client's configuration, restart it, and the tools register themselves.
Plenty of developer tooling servers cover similar ground. The differences that matter in practice are scope of access and how much setup stands between you and a working tool call. SunnysideFigma Context MCP's toolset — get_figma_dev_history, get_Basic_CSS, get_All_Layers_CSS and 11 more — is a fair guide to whether it matches your workflow. It is maintained by tercumantanumut; worth a glance at recent repository activity before you build anything load-bearing on it.
We check each listing at SyncDev against the project's documentation before it goes live — if something here drifts out of date, it is a bug worth reporting.
| 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 |
### Streamable HTTP
```json
{
"mcpServers": {
"sunnyside-figma": {
"type": "http",
"url": "http://localhost:3333/mcp"
}
}
}Configuration as documented by the project. Restart the client after saving.
| Variable | Description | Required |
|---|---|---|
| FIGMA_API_KEY | Credential the server authenticates with. | Yes |
Kill hallucinated APIs — version-accurate, up-to-date library documentation injected straight into context.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
GitHub's official server — repos, issues, pull requests, Actions and code security, straight from your assistant.
Issue tracking at the speed of conversation — Linear's official hosted server with OAuth and zero install.
Local repository surgery — status, diffs, commits, branches and history for any repo on disk.
Timezone sanity for AI — current time anywhere and correct conversions, without the model doing date math.