de en es ja ko ru zh

Figma Agent MCP

Name: Figma Agent MCP
Author: TrungLee003

by TrungLee003

Overview Schema Source Related Servers Discussions Admin

TypeScript

Local

⚡ Figma Agent MCP

Local-first AI Design Agent for Figma via Model Context Protocol (MCP) → WebSocket Bridge → Native Figma Plugin.
Inspecciona, crea, muta, estiliza, valida y optimiza diseños de Figma de forma nativa con herramientas tipadas deterministas, conciencia del sistema de diseño, compresión de tokens y flujos de trabajo compuestos llave en mano.

CI Status TypeScript Strict Tests MCP Tools License: MIT

🏛️ Arquitectura del Sistema

┌─────────────────────────────────────────────────────────────┐
│             AI Client (Claude / Cursor / Antigravity / LLM) │
└──────────────────────────────┬──────────────────────────────┘
                               │ MCP Protocol (stdio / SSE)
                               ▼
┌─────────────────────────────────────────────────────────────┐
│        MCP Server (@figma-agent/mcp-server — 49 Tools)      │
│  - Tool Registry & Validation  - Session Router             │
│  - Context Compiler (Compact)  - Composite Skills Runtime   │
│  - Design System Resolver      - Semantic Token Matching    │
└──────────────────────────────┬──────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────┐
│       Command Engine (@figma-agent/command-engine)          │
│  - Batch Transaction Pipeline  - Idempotency & Rollback     │
└──────────────────────────────┬──────────────────────────────┘
                               │ Local WebSocket (ws://127.0.0.1:3055)
                               ▼
┌─────────────────────────────────────────────────────────────┐
│       Bridge Server (@figma-agent/bridge-server)            │
│  - Channel Pairing (128-bit)   - Request/Response Matcher   │
│  - Heartbeat & Auto-reconnect  - 50+ Concurrent Sockets     │
└──────────────────────────────┬──────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────┐
│        Figma Plugin (@figma-agent/figma-plugin)             │
│  - Typed Command Dispatcher    - Pure Font Engine           │
│  - Native Node Mutation        - Zero External Dependencies │
└──────────────────────────────┬──────────────────────────────┘
                               │ Figma Plugin API
                               ▼
┌─────────────────────────────────────────────────────────────┐
│                         Figma Canvas                        │
└─────────────────────────────────────────────────────────────┘

Related MCP server: figmind

🌟 Aspectos Destacados

🔒 Local-Primero y Seguro: Se vincula a 127.0.0.1 por defecto. Emparejamiento de canal secreto de 128 bits. Sin ejecución arbitraria de JavaScript dentro de Figma.
🧩 49 Herramientas MCP Deterministas: Cobertura completa en Lectura, Creación, Mutación, Diseño Automático, Estilos Visuales, Componentes, Variables/Tokens, Tipografía, Exportación y Resolución del Sistema de Diseño.
🎯 Resolvedor Semántico del Sistema de Diseño: Puentea la intención humana ("primary button", "#6366F1") con Componentes y Tokens coincidentes mediante distancia de color perceptual ($\Delta E$) y auditoría automatizada de nodos.
⚡ Compilador y Poda de Contexto: Comprime árboles de nodos masivos en Markdown semántico o DSL compacto con poda adaptativa de profundidad y cumplimiento del presupuesto de tokens en menos de 100ms. Normalmente logra una reducción sustancial de contexto; los fixtures de referencia muestran >70% de reducción en escenarios probados.
🛡️ Motor de Validación y WCAG 2.1 Integrado: Cálculo de luminancia relativa y relación de contraste (AA/AAA) para texto normal, texto grande y componentes de UI; linter de Diseño Automático; auditor de cuadrícula de tokens de 4px/8px.
🔄 Ejecución Atómica por Lotes: Ejecución secuencial de pipelines de comandos con recuperación de errores stopOnFirstError o continueOnError.
🚀 Habilidades de Agente Llave en Mano: Flujos de trabajo compuestos preempaquetados para generación instantánea de Sistemas de Diseño, reparación automática de accesibilidad WCAG y conversión de wireframe a tarjeta de alta fidelidad.

📦 Estructura del Monorepo

figma-agent-mcp/
├── apps/
│   ├── mcp-server/        # 49 MCP Tools + Bridge Client + Session Service
│   ├── bridge-server/     # High-throughput WebSocket router (ws)
│   └── figma-plugin/      # Pure TypeScript native Figma Plugin
├── packages/
│   ├── protocol/          # CommandEnvelope, CommandResult, Error codes, Zod schemas
│   ├── figma-schema/      # SimplifiedNode, Layout, Style, Text, Validation schemas
│   ├── command-engine/    # Batch execution pipeline, transactions, ref resolution
│   ├── context-compiler/  # Token optimizer, tree pruner, Markdown & DSL serializers
│   ├── design-system/     # 4px/8px Spacing, Typography & Corner Radius scale matchers
│   ├── validator/         # WCAG 2.1 contrast engine, Auto Layout & design token rules
│   ├── skill-runtime/     # Composite skills registry & execution engine
│   ├── telemetry/         # Percentile metrics collector (p50, p95, p99)
│   └── shared/            # Hex/RGBA converters, Pino logger, environment config
└── tests/
    └── integration/       # 27 Vitest suites covering all phases & stress benchmarks

🚀 Inicio Rápido y Configuración

1. Construir el Monorepo

git clone https://github.com/your-org/figma-agent-mcp.git
cd figma-agent-mcp
pnpm install
pnpm build

2. Iniciar el Servidor Bridge

pnpm --filter @figma-agent/bridge-server start
# Bridge server listening at ws://127.0.0.1:3055

3. Cargar el Plugin de Figma en Figma Desktop

Abre Figma Desktop.
Ve a Plugins → Development → Import plugin from manifest...
Selecciona apps/figma-plugin/manifest.json.
Ejecuta el plugin Figma Agent Bridge. Anota tu Channel ID (por defecto default-channel).

⚙️ Configuración del Cliente AI

🤖 1. Claude Desktop

Añade a tu claude_desktop_config.json (%APPDATA%\Claude\claude_desktop_config.json en Windows o ~/Library/Application Support/Claude/claude_desktop_config.json en macOS):

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

💻 2. Cursor IDE

Añade a tu Configuración MCP de Cursor (Settings → Features → MCP o .cursor/mcp.json):

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

🧠 3. Google Antigravity / Gemini CLI

Añade a tu configuración MCP de Antigravity (~/.gemini/antigravity/mcp_config.json):

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055"
      }
    }
  }
}

⚡ 4. OpenAI Codex / Codex CLI / OpenAI Operator

Añade a tu configuración MCP de Codex (~/.codex/config.json o codex-settings.json):

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

O regístrate a través de Codex CLI:

# Add Figma Agent MCP to Codex CLI
codex mcp add figma-agent -- node "d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"

# Inspect available tools via MCP Inspector
npx @modelcontextprotocol/inspector node "d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"

🌊 5. Windsurf / Codeium IDE

Añade a ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

📚 Referencia Completa de Herramientas MCP (50 Herramientas)

Todas las 50 herramientas MCP están estrictamente tipadas mediante esquemas Zod, se ejecutan de forma determinista y proporcionan metadatos robustos de fallos.

1. Gestión de Conexión y Sesión (4 herramientas)

Nombre de la Herramienta	Parámetros	Descripción
`figma.get_connection`	ninguno	Obtiene el estado actual de la conexión del puente WebSocket, latencia y capacidades de sesión.
`figma.join_channel`	`channelId`*, `secret`	Cambia o únete a una sesión de canal de documento de Figma específica.

2. Inspección y Lectura (6 herramientas)

Nombre de la Herramienta	Parámetros	Descripción
`figma.get_document`	`depth` (0–10)	Recupera la jerarquía raíz del documento con profundidad limitada.
`figma.get_selection`	`depth` (0–10)	Obtiene los nodos actualmente seleccionados en el lienzo activo de Figma.
`figma.get_node`	`nodeId`*, `depth`	Lee propiedades detalladas y subárbol de un nodo específico.
`figma.get_nodes`	`nodeIds`*, `depth`	Obtiene múltiples nodos por ID en lote.
`figma.get_local_components`	ninguno	Lista todos los componentes reutilizables y variantes en el archivo.
`figma.get_local_styles`	`type` (PAINT/TEXT/EFFECT/GRID)	Lista estilos locales de pintura, texto y efectos.

3. Creación de Nodos (4 herramientas)

Nombre de la Herramienta	Parámetros	Descripción
`figma.create_frame`	`width`, `height`, `x`, `y`, `name`, `parentId`, `layoutMode`	Crea un Frame contenedor con Diseño Automático opcional.
`figma.create_text`	`text`*, `x`, `y`, `width`, `font` ({family, style, size}), `name`, `parentId`	Crea un nodo de Texto con carga de fuente confiable.
`figma.create_rectangle`	`width`, `height`, `x`, `y`, `cornerRadius`, `name`, `parentId`	Crea un nodo vectorial Rectángulo.
`figma.create_section`	`width`, `height`, `x`, `y`, `name`, `parentId`	Crea un contenedor de organización Sección.

4. Mutación de Nodos y Geometría (6 herramientas)

Nombre de la Herramienta	Parámetros	Descripción
`figma.move_node`	`nodeId`, `x`, `y`*	Mueve un nodo a posiciones de coordenadas absolutas.
`figma.resize_node`	`nodeId`, `width`, `height`*	Redimensiona las dimensiones del nodo.
`figma.rename_node`	`nodeId`, `name`	Renombra el título de la capa del nodo.
`figma.delete_node`	`nodeId`*	Elimina un nodo del lienzo.
`figma.clone_node`	`nodeId`*, `parentId`, `x`, `y`, `name`	Duplica una jerarquía de nodo existente.
`figma.set_parent`	`nodeId`, `targetParentId`, `index`	Reasigna el padre y reordena un nodo en el árbol de capas.

5. Diseño Automático y Tamaño Responsivo (2 herramientas)

Nombre de la Herramienta	Parámetros	Descripción
`figma.set_auto_layout`	`nodeId`, `mode`, `itemSpacing`, `padding` ({top, right, bottom, left}), `primaryAxisAlignItems`, `counterAxisAlignItems`	Configura el Diseño Automático responsivo tipo Flexbox.
`figma.set_layout_sizing`	`nodeId`*, `horizontal` (FIXED/HUG/FILL), `vertical` (FIXED/HUG/FILL)	Establece el comportamiento de tamaño del contenedor y del eje hijo.

6. Estilos Visuales y Efectos (5 herramientas)

Nombre de la Herramienta	Parámetros	Descripción
`figma.set_fills`	`nodeId`, `fills` (Array of Solid/Gradient/Image fills)	Aplica colores de fondo, degradados e imágenes.
`figma.set_strokes`	`nodeId`, `strokes`, `strokeWeight`, `strokeAlign`	Aplica trazos de borde, grosores y alineaciones.
`figma.set_corner_radius`	`nodeId`, `radius` (number or per-corner object), `cornerSmoothing`	Establece el radio de esquina del borde con suavizado continuo de iOS.
`figma.set_opacity`	`nodeId`, `opacity` (0.0 – 1.0)	Ajusta la opacidad de la capa.
`figma.set_effects`	`nodeId`, `effects` (DROP_SHADOW, INNER_SHADOW, LAYER_BLUR)	Aplica sombras exteriores, sombras interiores y desenfoques.

7. Componentes e Instancias (5 herramientas)

Nombre de la Herramienta	Parámetros	Descripción
`figma.create_component`	`name`*, `width`, `height`, `parentId`, `componentPropertyDefinitions`	Convierte un nodo en un Componente Maestro reutilizable.
`figma.create_instance`	`componentId`*, `x`, `y`, `properties`, `parentId`	Instancia una variante de componente.
`figma.set_component_properties`	`nodeId`, `properties`	Sobrescribe propiedades de variante de componente.
`figma.detach_instance`	`nodeId`, `destructive`	Desvincula la instancia de componente a frames editables regulares (con protección de seguridad).
`figma.get_local_components`	`query`, `pageOnly`	Recupera Componentes Maestros locales y Conjuntos de Componentes con propiedades de variante.

8. Variables y Tokens de Diseño (6 herramientas)

Nombre de la herramienta	Parámetros	Descripción
`figma.get_local_variables`	`collectionId`	Lista variables locales y colecciones de tokens.
`figma.create_variable`	`name`, `resolvedType` (COLOR/FLOAT/STRING/BOOLEAN), `collectionId`, `collectionName`, `initialValue`	Crea una variable semántica de Design Token.
`figma.set_variable_value`	`variableId`, `modeId`, `value`*	Actualiza el valor de una variable para un modo específico.
`figma.bind_variable`	`nodeId`, `property` (fills/strokes/opacity/itemSpacing/cornerRadius), `variableId`*	Vincula una propiedad de nodo a una variable de Design Token.
`figma.create_paint_style`	`name`, `paints`, `description`	Crea un estilo de pintura compartido en el archivo.
(Inspect reutilizado)	`get_local_styles`	Consulta estilos compartidos.

9. Activos, Imágenes y Exportación (3 herramientas)

Nombre de la herramienta	Parámetros	Descripción
`figma.export_node`	`nodeId`*, `format` (PNG/JPG/SVG/PDF), `scale`	Exporta un nodo como datos de imagen Base64 o cadena SVG UTF-8.
`figma.set_export_settings`	`nodeId`, `exportSettings`	Configura preajustes de exportación en un nodo.
`figma.set_image_fill`	`nodeId`, `imageBase64`, `scaleMode`, `opacity`	Sube y aplica un relleno de imagen desde Base64.

10. Texto y Tipografía (6 herramientas)

Nombre de la herramienta	Parámetros	Descripción
`figma.set_text_content`	`nodeId`, `text`	Actualiza el contenido de texto de una cadena.
`figma.set_font_size`	`nodeId`, `fontSize`, `start`, `end`	Actualiza el tamaño de fuente (texto completo o rango).
`figma.set_font_family`	`nodeId`, `family`, `style`, `start`, `end`	Cambia la familia y el peso de la fuente con carga automática.
`figma.set_text_alignment`	`nodeId`*, `horizontal` (LEFT/CENTER/RIGHT/JUSTIFIED), `vertical`	Establece la alineación del texto.
`figma.set_line_height`	`nodeId`*, `unit` (PIXELS/PERCENT/AUTO), `value`	Establece el espaciado de altura de línea.
`figma.set_letter_spacing`	`nodeId`, `unit` (PIXELS/PERCENT), `value`	Establece el espaciado entre letras (tracking).

11. Optimización y Poda de Contexto (1 herramienta)

Nombre de la herramienta	Parámetros	Descripción
`figma.compile_context`	`nodeId`, `format` (markdown/dsl/compact/json), `maxTokens`, `maxDepth`	Compila y comprime árboles de Figma con control de presupuesto de tokens y representación DSL compacta.

12. Validación y Accesibilidad (2 herramientas)

Nombre de la herramienta	Parámetros	Descripción
`figma.validate_node`	`nodeId`, `rules`, `includeChildren`	Audita el árbol de nodos para contraste WCAG 2.1, reglas de Auto Layout, escalas de tokens y salud de nombres de capas.
`figma.check_contrast`	`foreground`, `background`, `fontSize`, `isBold`	Calcula la luminancia relativa y la relación de contraste (AA/AAA) según WCAG 2.1.

13. Habilidades Compuestas y Ejecución por Lotes (3 herramientas)

Nombre de la herramienta	Parámetros	Descripción
`figma.list_skills`	ninguno	Descubre las Habilidades de Agente de alto nivel disponibles.
`figma.run_skill`	`skillName`*, `payload`	Ejecuta un flujo de trabajo compuesto de múltiples pasos.
`figma.batch_execute`	`commands`*, `rollbackOnFailure` (predeterminado: true), `stopOnFirstError`, `transactionId`, `idempotencyKey`	Ejecuta múltiples comandos de Figma en una transacción atómica con resolución de referencias simbólicas (`ref`, `parentRef`, `nodeRef`, `$ref:name`) y reversión automática en caso de fallo.

14. Resolución Semántica del Sistema de Diseño (1 herramienta)

Nombre de la herramienta	Parámetros	Descripción
`figma.resolve_design_system`	`type`* (component/color/spacing/radius/audit_node), `query`, `intentHint`, `nodeId`	Resuelve semánticamente la intención humana (ej. "botón primario", "#6366F1", 16px) a componentes/tokens coincidentes con distancia perceptual $\Delta E$ y auditoría de tokens de nodo.

💡 Ejemplo: Construcción de una Tarjeta de UI Jerárquica en 1 Llamada por Lotes

{
  "transactionId": "tx-pricing-01",
  "rollbackOnFailure": true,
  "commands": [
    {
      "command": "figma.create_frame",
      "ref": "card",
      "payload": { "width": 360, "height": 480, "name": "Pricing Card" }
    },
    {
      "command": "figma.create_text",
      "ref": "title",
      "parentRef": "card",
      "payload": { "text": "Pro Plan", "font": { "family": "Inter", "style": "Bold", "size": 24 } }
    },
    {
      "command": "figma.create_rectangle",
      "ref": "btn",
      "parentRef": "card",
      "payload": { "width": 312, "height": 44, "cornerRadius": 8, "name": "CTA Button" }
    },
    {
      "command": "figma.set_fills",
      "nodeRef": "btn",
      "payload": { "fills": [{ "type": "SOLID", "color": "#3B82F6" }] }
    }
  ]
}

Devuelve refMap: { "card": "123:456", "title": "123:457", "btn": "123:458" }.

🤖 Habilidades Compuestas de Agente

1. `skill.create_design_system`

Crea un sistema de diseño llave en mano en segundos:

Crea una Colección de Variables: Paleta de Colores y Tokens.
Crea variables: color/primary, color/background, color/surface, color/text-primary.
Crea los Estilos de Pintura correspondientes.
Genera un Componente Maestro Button/Primary responsivo con Auto Layout, radio de esquina y enlaces a tokens.

2. `skill.auto_fix_accessibility`

Audita la jerarquía de diseño objetivo en busca de violaciones de contraste WCAG 2.1 y repara automáticamente los colores de texto de bajo contraste contra sus superficies de fondo para lograr el cumplimiento AA.

3. `skill.convert_wireframe_to_hifi`

Transforma un contenedor de wireframe de baja fidelidad en una Tarjeta de UI pulida, responsiva y de alta fidelidad con Auto Layout, rellenos de superficie modernos, sombras suaves y suavizado de esquinas continuo.

🧪 Pruebas y Verificación

Ejecuta el conjunto de pruebas completo (115 pruebas exitosas en 27 archivos de prueba):

# Run format checking
pnpm format:check

# Run full build
pnpm build

# Run unit and integration tests
pnpm test

# Strict TypeScript typechecking
pnpm typecheck

# ESLint audit
pnpm lint

Resultados de Benchmark:

⚡ Concurrencia WebSocket: 50 conexiones de cliente concurrentes con heartbeats en ráfaga: p95 < 100ms, 0 abandonos.
🌳 Escalado de Árbol Masivo: Compilación de contexto de 6,111 nodos con un presupuesto de 1,000 tokens: < 100ms de tiempo de ejecución, >70% de reducción de contexto en escenarios de benchmark.
🛡️ Tolerancia a Fallos: Reconexión automática y manejo de errores con indicadores retryable en caídas de socket.

📄 Licencia

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Maintenance

ActivitySlowing

ResponsivenessNo issues

Resources

Need Help?

Related Servers

Related MCP Connectors

Figma MCP ServerOAuth
com.figma.mcp
The Figma MCP server brings Figma design context directly into your AI workflow.
Developer Tools Content Management Systems
32,076
microservices.sh
sh.microservices
MCP server for AI agents to plan, verify, and deploy Cloudflare-native apps.
Cloud Platforms Agent Orchestration Developer Tools
21
mcp-serverOAuth
com.niftypm
Nifty's MCP server — exposes tasks, projects, messages, and files as tools for AI agents.
Project Management Communication File Systems
2
ClawLinkOAuth
dev.claw-link
MCP server connecting AI agents to 100+ apps (Gmail, Slack, Notion, GitHub) via one-click OAuth.
App Automation Workplace & Productivity
24

Related MCP Servers

Talk to Figma MCP
Developer Tools App Automation Software Architecture
hyun1202
A
license
Not graded
quality
D
maintenance
An MCP server that enables AI assistants to interact with Figma designs for tasks like reading document info, creating elements, and managing auto layouts. It facilitates real-time design automation via a custom Figma plugin and WebSocket server integration.
Updated a year ago (2025-06-25 07:22 UTC)
1,129 npm
MIT
figmind
Design Tools AI & Machine Learning
guhcostan
A
license
Not graded
quality
D
maintenance
MCP server that connects AI clients to Figma, enabling real-time reading, creation, and modification of designs using natural language.
Updated 7 months ago (2026-03-07 22:38 UTC)
MIT
figma-opencode-mcp
Design Tools Developer Tools
laivannha0202
A
license
A
quality
D
maintenance
Local-first MCP server that connects AI coding agents to the currently open Figma file through a local plugin bridge, requiring no Figma API token.
Updated 4 months ago (2026-06-12 15:25 UTC)
8
MIT
Figma Bridge MCP
Design Tools Developer Tools
Halil-KAPLAN
A
license
B
quality
C
maintenance
Local MCP server connecting AI clients to the Figma desktop app for inspecting and editing Figma documents via the Plugin API.
Updated 2 months ago (2026-08-20 10:18 UTC)
16
16 npm
1
MIT