Figma Context MCP

Extrae código, recursos y estructuras de componentes de diseños de Figma para usar en flujos de trabajo de IA.

Documentación

Sunnyside Figma MCP

Un servidor de Model Context Protocol (MCP) que convierte diseños de Figma en código de producción. Incluye un plugin complementario de Figma para que los clientes LLM puedan leer la capa que estás viendo, extraer CSS pixel-perfect y tokens de diseño, y generar salida React / Tailwind / styled-components — todo desde un prompt en lenguaje natural.

Se admiten dos rutas de datos:

Puente de plugin — la mayor fidelidad. Usa la getCSSAsync() nativa de Figma desde el editor. Funciona en cualquier plan, incluso en Drafts.
API REST de Figma — funciona sin interfaz desde un fileKey / nodeId para diseños que viven en un equipo/proyecto al que puedas acceder con un Personal Access Token.

Inicio rápido

Requisitos: Node 18+, un Personal Access Token de Figma (crea uno aquí).

git clone https://github.com/tercumantanumut/sunnysideFigma-Context-MCP
cd sunnysideFigma-Context-MCP
npm install
npm run build

Crea un .env:

FIGMA_API_KEY=figd_your_token_here
PORT=3333
OUTPUT_FORMAT=json

Ejecuta el servidor HTTP/SSE:

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

Instala el plugin de Figma (una sola vez):

Abre Figma Desktop → Plugins → Development → Import plugin from manifest…
Elige figma-dev-plugin/manifest.json de este repositorio.
Ejecuta el plugin en cualquier archivo. Selecciona un frame → haz clic en Extract Dev Code.

Verás "Data sent to MCP server successfully" cuando el puente esté activo.

Conectar un cliente MCP

Elige un transporte. Ambos exponen las mismas 27 herramientas contra el mismo servidor en ejecución.

stdio (el cliente inicia el proceso)

Usa esto si quieres que el cliente gestione el ciclo de vida y no necesitas que el puente del plugin de Figma comparta estado con el proceso 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 (recomendado al usar el plugin de Figma)

El plugin envía extracciones a http://localhost:3333/plugin/*. Apunta tu cliente MCP al mismo proceso para que ambos compartan el buffer de extracción.

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

HTTP transmisible (Streamable HTTP)

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

Referencia de herramientas (27 herramientas)

Herramientas del puente de plugin — úsalas primero

Estas leen el buffer llenado por el plugin de Figma. Las más rápidas, de mayor fidelidad y sin límites de API.

Herramienta	Devuelve
`get_figma_dev_history`	Lista de extracciones pasadas (nombre, id, layout)
`get_Basic_CSS`	CSS del elemento raíz vía `getCSSAsync()`
`get_All_Layers_CSS`	CSS para cada capa en la selección
`get_JSON`	Estructurado: id, fills, variables, tokens de diseño, `allLayersCSS` — la llamada única de mayor señal
`get_react_component`	TypeScript React + módulo CSS
`get_tailwind_component`	React + clases Tailwind (valores arbitrarios)
`get_styled_component`	React + styled-components
`get_plugin_project_overview`	Resumen del proyecto completo escaneado (requiere Scan Entire Project en el plugin)
`analyze_app_structure`	Desglose arquitectónico de un proyecto escaneado

Herramientas de la API REST de Figma

Requieren FIGMA_API_KEY + un archivo que el token pueda ver. No funcionan en Drafts — mueve los archivos a un equipo/proyecto primero.

Herramienta	Uso
`get_figma_data`	JSON crudo del archivo o nodo
`get_figma_page_structure`	Árbol a nivel de página para orientación
`get_figma_project_overview`	Resumen a nivel de equipo/proyecto
`analyze_figma_components`	Detección de componentes en un archivo
`download_figma_images`	Exportación por lotes SVG/PNG a disco

Ciclo de vida de tokens de diseño

Registro de tokens + simulación de qué pasaría si para cambios en el sistema de diseño.

Herramienta	Uso
`extract_design_tokens`	Construir un catálogo de tokens desde la selección actual
`build_dependency_graph`	Mapear qué capas consumen qué tokens
`debug_token_registry`	Inspeccionar el estado actual del registro
`track_design_system_health`	Informe de cobertura / conflictos
`simulate_token_change`	Simulación en seco de un cambio de nombre/valor
`analyze_token_change_impact`	Informe de radio de impacto para un cambio propuesto
`apply_token_change`	Confirmar un cambio simulado
`rollback_token_change`	Revertir un cambio aplicado
`list_token_simulations`	Listar simulaciones en espera
`generate_migration_code`	Producir salida estilo codemod para el cambio

Figma Dev Mode (oficial) — solo plan Professional

Puente al servidor MCP oficial de Dev Mode de Figma en localhost:3845. Requiere un plan Professional de Figma con Dev Mode habilitado en la aplicación de escritorio.

Herramienta	Uso
`check_figma_dev_connection`	Probar el servidor de Dev Mode
`get_figma_dev_mode_code`	React + Tailwind desde el generador propio de Figma

Utilidades

Herramienta	Uso
`generate_codegen_plugin`	Crear un nuevo plugin de codegen de Figma Dev Mode

Flujos de trabajo típicos

Generar un componente desde una selección

En Figma, selecciona el frame.
En el plugin, haz clic en Extract Dev Code.
Pide a tu agente: "Genera un componente React + Tailwind desde la última extracción." → llama a get_tailwind_component.

Auditar un sistema de diseño

Haz clic en Scan Entire Project en el plugin.
Pide: "Resume los tokens de diseño de este proyecto y marca conflictos." → llama a get_plugin_project_overview + extract_design_tokens + track_design_system_health.

Proponer un cambio de token de forma segura

simulate_token_change → analyze_token_change_impact → revisa.
apply_token_change si es seguro, rollback_token_change para deshacer.
generate_migration_code para producir la migración de código.

Exportación sin interfaz

Dale a tu agente una URL de Figma (Copy link to selection). Parsea fileKey + nodeId y llama a get_figma_data / download_figma_images.

Arquitectura

┌───────────────────┐     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│
                                            └──────────────────────┘

El servidor HTTP y los endpoints MCP viven en el mismo proceso Node, por lo que el buffer de extracción del plugin y las herramientas MCP comparten memoria. Por eso SSE es el transporte recomendado cuando el plugin está en uso.
El modo stdio inicia un proceso nuevo por cliente — no verá las extracciones del plugin de un servidor separado en ejecución. Usa SSE/HTTP si necesitas ese estado compartido.

Solución de problemas

"No extracted data available" — vuelve a abrir el plugin y haz clic en Extract Dev Code. Si el cliente es stdio, cambia a SSE para que comparta estado con el servidor del plugin.

Las herramientas REST de Figma agotan el tiempo / dan 404 — el archivo probablemente está en Drafts. Muévelo a un equipo/proyecto, o usa la ruta del plugin.

check_figma_dev_connection falla — requiere Figma Professional + servidor MCP de Dev Mode habilitado en Figma Desktop (Preferences → Enable local MCP Server). Los usuarios del plan gratuito deben usar las herramientas del plugin.

El servidor no arranca en :3333 — otro proceso está usando el puerto. Cambia PORT en .env y actualiza la URL de tu cliente MCP en consecuencia.

Errores de sesión al acceder a /mcp directamente con curl — el transporte HTTP transmisible requiere inicializar una sesión (initialize → notifications/initialized) antes de tools/list. Los clientes MCP lo manejan automáticamente.

Desarrollo

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

Estructura del proyecto:

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)

Contribuciones

Se aceptan PRs. Ejecuta npm run lint && npm test && npm run build antes de abrir. Mantén la superficie de herramientas ligera — si agregas una nueva herramienta, revisa si se superpone con una existente.

Licencia

Consulta LICENSE. Construido sobre conceptos de Framelink MCP pero sustancialmente diferente; propietario con términos específicos. Consultas comerciales: Umut TAN — tercumantanumut@gmail.com.