de en es ja ko ru zh

Figma Agent MCP

Name: Figma Agent MCP
Author: TrungLee003

by TrungLee003

Overview Schema Related Servers Score Discussions

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 — 48 Tools)      │
│  - Tool Registry & Validation  - Session Router             │
│  - Context Compiler (>70% cut) - Composite Skills Runtime   │
└──────────────────────────────┬──────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────┐
│       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                        │
└─────────────────────────────────────────────────────────────┘

🌟 Aspectos destacados

🔒 Local-First 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.
🧩 48 Herramientas MCP Deterministas: Cobertura completa en Lectura, Creación, Mutación, Auto Layout, Estilos Visuales, Componentes, Variables/Tokens, Tipografía y Exportación.
⚡ Compilador de Contexto (>70% de Reducción de Tokens): 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.
🛡️ Motor de Validación Integrado y WCAG 2.1: Cálculo de luminancia relativa y relación de contraste (AA/AAA) para texto normal, texto grande y componentes de UI; linter de Auto Layout; 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/        # 48 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 → Desarrollo → Importar plugin desde manifest...
Selecciona apps/figma-plugin/manifest.json.
Ejecuta el plugin Figma Agent Bridge. Anota tu ID de Canal (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 mediante 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 (48 Herramientas)

1. Conexión y Sesión (2 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 las propiedades detalladas y el 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 Auto Layout 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 y Geometría de Nodos (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. Auto Layout y Dimensionamiento 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 Auto Layout responsivo tipo Flexbox.
`figma.set_layout_sizing`	`nodeId`*, `horizontal` (FIXED/HUG/FILL), `vertical` (FIXED/HUG/FILL)	Establece el comportamiento de dimensionamiento 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 paralelas, sombras interiores y desenfoques.

7. Componentes e Instancias (4 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 las propiedades de la variante del componente.
`figma.detach_instance`	`nodeId`*	Desvincula la instancia del componente a marcos editables regulares.

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 de Token de Diseño semántico.
`figma.set_variable_value`	`variableId`, `modeId`, `value`*	Actualiza el valor de la 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 Token de Diseño.
`figma.create_paint_style`	`name`, `paints`, `description`	Crea un Estilo de Pintura compartido en el archivo.
(Reused Inspect)	`get_local_styles`	Consulta estilos compartidos.

Nombre de la Herramienta	Parámetros	Descripción
`figma.export_node`	`nodeId`(*), `format` (PNG/JPG/SVG/PDF), `scale`	Exporta el 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`	Carga 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 la cadena de texto.
`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 (>70% de compresión).

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 WCAG 2.1 (AA/AAA).

13. Habilidades Compuestas y Ejecución por Lotes (2 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`(*), `stopOnFirstError`	Ejecuta múltiples comandos de Figma en una única transacción atómica por lotes.

🤖 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 de 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 cumplimiento AA.

3. `skill.convert_wireframe_to_hifi`

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

🧪 Pruebas y Verificación

Ejecuta el conjunto completo de pruebas (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 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 relación de compresión.
🛡️ Tolerancia a Fallos: Reconexión automática y manejo de errores con banderas retryable en abandonos de socket.

📄 Licencia

This server cannot be installed

license - not tested

quality - not tested

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

–Release cycle

–Releases (12mo)

Commit activity

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Figma MCP Server
The Figma MCP server brings Figma design context directly into your AI workflow.
microservices.sh
MCP server for AI agents to plan, verify, and deploy Cloudflare-native apps.
mcp
MCP server connecting AI agents to non-custodial staking data across 130+ networks.

View all MCP Connectors

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/TrungLee003/figma-agent-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server