Sunnyside Figma ContextCAUTION
A comprehensive Model Context Protocol (MCP) server that bridges Figma designs with AI development workflows. It provides 30 specialized tools for extracting pixel-perfect code, assets, and component structures directly from Figma designs.
Overview
From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.
[](https://mseep.ai/app/tercumantanumut-sunnysidefigma-context-mcp)
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.
Two data paths are supported:
- Plugin bridge — highest fidelity. Uses Figma's native
getCSSAsync()from inside the editor. Works on any plan, even Drafts. - Figma REST API — works headless from a
fileKey/nodeIdfor designs that live in a team/project you can reach with a Personal Access Token.
Quick Start
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
Create a .env:
FIGMA_API_KEY=figd_your_token_here PORT=3333 OUTPUT_FORMAT=json
Run the HTTP/SSE server:
npm start # → http://localhost:3333 # SSE: /sse # Streamable HTTP: /mcp
Install the Figma plugin (one time):
- Open Figma Desktop → Plugins → Development → Import plugin from manifest...
- Pick
figma-dev-plugin/manifest.jsonfrom this repo. - Run the plugin on any file. Select a frame → click Extract Dev Code.
You'll see "Data sent to MCP server successfully" when the bridge is live.
Connect an MCP Client
Pick one transport. Both expose the same 27 tools against the same running server.
stdio (client spawns the process)
Use this if you want the client to own the lifecycle and don't need the Figma plugin bridge to share state with the MCP process.
{
"mcpSer721ba178ae0fOBSERVED · 2026-10-08Connect
Built from this server's own package name, version and transport as found in its source — not copied from anyone's documentation, so it cannot drift against a page we do not control. Replace the environment placeholders with a token scoped to the least it needs.
claude mcp add figma-developer-mcp --env FIGMA_API_KEY=${FIGMA_API_KEY} --env FIGMA_FILE_KEY=${FIGMA_FILE_KEY} --env FIGMA_OAUTH_TOKEN=${FIGMA_OAUTH_TOKEN} -- npx -y [email protected]{
"mcpServers": {
"figma-developer-mcp": {
"command": "npx",
"args": [
"-y",
"[email protected]"
],
"env": {
"FIGMA_API_KEY": "${FIGMA_API_KEY}",
"FIGMA_FILE_KEY": "${FIGMA_FILE_KEY}",
"FIGMA_OAUTH_TOKEN": "${FIGMA_OAUTH_TOKEN}"
}
}
}
}Exposed tools (31)
30 read · 1 write · 0 destructive.
| Tool | Risk | Description |
|---|---|---|
analyze_app_structure | read | Perform comprehensive analysis of entire app structure, extracting detailed information from all pages and key frames without manual selection |
analyze_figma_components | read | Analyze component library usage and organization in a Figma file |
analyze_token_change_impact | read | AI-powered analysis of what happens when a design token changes. Identifies affected components, edge cases, and generates migration code. |
apply_token_change | write | Apply a previously simulated token change to the actual files. Cannot be undone without rollback. |
batch_extract_frames | read | Extract detailed CSS, layout, and component information from multiple frames at once |
build_dependency_graph | read | Scan codebase and build dependency graph mapping design token usage across files. This is the foundation for impact analysis. |
check_figma_dev_connection | read | Check if Figma |
debug_token_registry | read | Debug tool to check what tokens are currently stored in the design token registry |
download_figma_images | read | Download SVG and PNG images from Figma. Use get_JSON first to get the file key from plugin data. |
extract_design_tokens | read | Extract and catalog design tokens from current Figma selection. Maps colors, spacing, typography to create the foundation for dependency tracking. |
generate_codegen_plugin | read | Generate a proper Figma Dev Mode codegen plugin following official standards |
generate_migration_code | read | Generate comprehensive migration code for design token changes, including CSS updates, component modifications, and test cases. |
get_All_Layers_CSS | read | Get comprehensive CSS for all layers from the latest Figma extraction (like Figma |
get_Basic_CSS | read | Get basic CSS for the main selected element from the latest Figma extraction |
get_JSON | read | Get the raw JSON data from the latest Figma extraction with complete layout and styling information |
get_figma_assets | read | Get image and SVG assets from Figma |
get_figma_data | read | When the nodeId cannot be obtained, obtain the layout information about the entire Figma file |
get_figma_dev_history | read | Get the history of dev code extractions from the Figma plugin |
get_figma_dev_mode_code | read | Get React + Tailwind code from Figma |
get_figma_page_structure | read | Get detailed structure of specific pages in a Figma file with frame hierarchy |
get_figma_project_overview | read | Get comprehensive overview of entire Figma file including structure, components, design system, and statistics. Perfect for understanding the complete project context. |
get_figma_variable_definitions | read | Get design variables and tokens from Figma |
get_plugin_project_overview | read | Get the project overview data directly from the Figma plugin scan. This provides the exact statistics shown in the plugin UI including all pages, frames, and instances. |
get_react_component | read | Generate clean React component with TypeScript - works with plugin data or Figma API |
get_styled_component | read | Generate styled-components React component - clean, modern styling |
get_tailwind_component | read | Generate React component with Tailwind classes - smart design token conversion |
list_token_simulations | read | List all active token change simulations and their status. |
map_app_flow | read | Analyze app navigation flow and screen relationships based on naming patterns and structure |
rollback_token_change | read | Rollback a previously applied token change to restore original values. |
simulate_token_change | read | Simulate a design token change without actually applying it. Perfect for design reviews and impact planning. |
track_design_system_health | read | Monitor design system health over time. Identifies token drift, unused tokens, inconsistent usage patterns. |
Trust audit
CAUTIONgrade B · trust 88/100 Install with care. The audit found things worth knowing before you trust its output.
| Layer | What it checks | Result |
|---|---|---|
| L0 | Provenance & inventory | PASS |
| L1 | Static analysis of the code | WARN |
| L2 | Instruction surface (what it tells the agent) | PASS |
| L3 | Class-specific surface | PASS |
| L4 | Behavioural (sandbox) | SKIPPED |
What the source does
- Filesystem
- declared (2 observation(s))
- Network
- declared (11 observation(s))
- Shell
- none-observed
- Dependencies
- not all pinned
- Secrets in source
- none-found
Findings (10)
console.log(`⚠️ Skipping token ${token.id} - empty value`);console.log(`🎯 Searching for token ${token.id} (${tokenValue}) with ${valuesToMatch.length} variations`);process.env.FIGMA_DEV_MCP_URL || 'http://127.0.0.1:3845/mcp',
'http://127.0.0.1:3333'
const parsed = yaml.load(first.text);
import type { SimplifiedNode } from "../../services/simplify-node-response.js";} from "../../utils/sanitization.js";
@figma/rest-api-spec, @modelcontextprotocol/sdk, @types/cors, @types/yargs, cors, cross-env, dotenv, express
When user mentions Figma design/file, IMMEDIATELY run this sequence:
cat .env
Gates applied: no_behavioural_pass.
721ba178ae0ffull audit observations/trust-audit/mcp-server/tercumantanumut__sunnyside-figma-context.json · Report an issue / request a re-scanAudit history
Every audit this server has had. A grade with a past is a grade somebody is still checking.
| Date | Source | Verdict | Grade | Score | Change |
|---|---|---|---|---|---|
| 2026-10-08 | 721ba178ae0f | CAUTION | B | 88 | first audit |
Questions
What is the Sunnyside Figma Context MCP server?
A comprehensive Model Context Protocol (MCP) server that bridges Figma designs with AI development workflows. It provides 30 specialized tools for extracting pixel-perfect code, assets, and component structures directly from Figma designs.
What tools does Sunnyside Figma Context expose?
31 in total: 30 read-only, 1 that write, and 0 that can delete or overwrite. Every one is listed on this page with its risk.
Is Sunnyside Figma Context safe to connect to an agent?
With care. The audit graded it B (88/100) and found 10 things worth knowing before you trust this server, listed below with the exact line each was found on.
What credentials does Sunnyside Figma Context need?
It reads FIGMA_API_KEY, FIGMA_FILE_KEY and FIGMA_OAUTH_TOKEN from the environment. Give it a token scoped to the least it needs — an agent that can be talked into calling a tool can be talked into calling it with your credentials.
How does Sunnyside Figma Context run?
It speaks sse, stdio and streamable-http, so it runs as a local process your client starts. It is published on npm as figma-developer-mcp at 0.4.2.
How current is this page?
The grade is for one exact copy of the source (721ba178ae0f), read on 2026-10-08. The repository is watched and re-audited when it changes.