figma-console-mcp
Figma Console MCP Server
Tu sistema de diseño como API. Servidor del Model Context Protocol que une diseño y desarrollo: da a los asistentes de IA acceso completo a Figma para extracción, creación, depuración y sincronización bidireccional de tokens.
🆕 Extracción de sistemas de diseño (v1.40.0): Convierte un código base de producción en un sistema de diseño. Siete nuevas herramientas
figma_ds_*(modo local) escanean uno o más códigos base de aplicaciones: detección de framework, método de estilos y capa de proveedor; un inventario de componentes ordenado por uso clasificado como vendored / envuelto / vendor puro / a medida; inferencia de variantes a partir de sitios de llamada reales; detección de duplicados; y una pasada de arquitectura que separa un kit de UI de un sistema de diseño (FollowButtones en realidad unButton, y aquí están los primitivos genéricos que faltan). Luego extraen el estilo de facto de la aplicación y lo convierten en tokens DTCG con procedencia por token: propiedades personalizadas CSS multimodo (.dark,[data-theme]y similares), variables SCSS, valores de configuración de Tailwind, tripletas HSL de shadcn, minería de frecuencia de clases de utilidad de Tailwind valoradas según el tema propio de la aplicación, y valores brutos promovidos por frecuencia; generan el andamiaje del paquete del sistema de diseño con páginas de exhibición de tokens/tipografía/iconografía, conectan un taller de Storybook nuevo con las capas de tema y fuentes reales de la aplicación, extraen componentes en profundidad para portarlos con andamios de historias CSF3, validan el resultado con evaluaciones deterministas de fidelidad y conservan el progreso del portado entre sesiones. Eltokens/tokens.jsonextraído se importa directamente en las variables de Figma mediantefigma_import_tokens: un recorrido de ida y vuelta completo de código → sistema de diseño → Figma. También corrige los formateadores de tokens que ponían entre comillas expresiones funcionales CSS comocubic-bezier(...)(una curva de easing entre comillas elimina las transiciones silenciosamente; también afecta a la salida defigma_export_tokens). Solo servidor: no hace falta volver a importar el plugin. Ver novedades →
¿Qué es esto?
Figma Console MCP conecta asistentes de IA (como Claude) a Figma, lo que permite:
🎨 Extracción de sistemas de diseño — Obtén variables, componentes y estilos.
🧬 Extracción de código base → sistema de diseño — Escanea un código base de producción, extrae su estilo de facto a tokens DTCG con procedencia por token, genera el andamiaje de un paquete de sistema de diseño con un taller de Storybook conectado, y valídalo con evaluaciones deterministas de fidelidad; luego lleva los tokens de ida y vuelta a las variables de Figma (modo local).
🔁 Sincronización bidireccional de tokens — Exporta variables de Figma a JSON DTCG (dialecto heredado o 2025.10) + 9 formatos más; envía las ediciones del lado del código de vuelta a Figma con aplicación completa: creaciones, renombrados, redireccionamiento de alias y borrados controlados por reemplazo. Sustituye la canalización de exportación de Style Dictionary y Tokens Studio.
📸 Depuración visual — Toma capturas de pantalla para tener contexto.
✏️ Creación de diseño — Crea componentes de UI, frames y diseños directamente en Figma, incluida la creación de conjuntos de componentes en una sola llamada a partir de una matriz de ejes de variantes.
🔧 Gestión de variables — Crea, actualiza, renombra y elimina tokens de diseño.
🕰 Historial de versiones y conciencia de series temporales — Lista versiones, compara instantáneas, genera registros de cambios en Markdown, rastrea la introducción de propiedades/variantes mediante blame con búsqueda binaria, e integra el historial de diseño y git por componente en la documentación de componentes generada.
⚡ Monitorización en tiempo real — Observa los registros de consola del plugin Desktop Bridge.
📌 Tableros FigJam — Crea notas adhesivas, diagramas de flujo, tablas y bloques de código en tableros colaborativos.
🎞️ Presentaciones de diapositivas — Crea y gestiona presentaciones de Figma Slides mediante programación.
♿ Escaneo de accesibilidad — 14 comprobaciones de diseño WCAG con etiquetado de nivel de conformidad, tarjetas de puntuación de componentes, escaneo de código con axe-core y paridad diseño-código.
📋 Auditorías de salud del sistema de diseño — Auditoría puntuada al estilo Lighthouse en nombres, tokens, metadatos de componentes, accesibilidad, consistencia y cobertura; disponible como herramienta sencilla para cualquier cliente MCP (con orientación de corrección automática por hallazgo) y como aplicación de panel visual.
🛡 Identidad entre MCP — Cada respuesta de herramienta incluye
_mcp: "figma-console-mcp"y los errores llevan el prefijo[figma-console-mcp]para que la atribución no sea ambigua en agentes que ejecutan varios MCP de Figma.☁️ Cloud Write Relay — Los clientes web de IA (Claude.ai, v0, Replit) pueden diseñar en Figma mediante emparejamiento en la nube.
🔄 Cuatro formas de conexión — SSE remoto, modo nube, NPX o Git local.
Related MCP server: MCP Figma
⚡ Inicio rápido
Elige tu configuración
Primero, decide qué quieres hacer:
Quiero... | Método de configuración | Tiempo |
Crear y modificar diseños con IA | Configuración con NPX (Recomendada) | ~10 min |
Diseñar desde la web (Claude.ai, v0, Replit, Lovable) | ~5 min | |
Contribuir al proyecto | ~15 min | |
Solo explorar mis datos de diseño (solo lectura) | ~2 min |
⚠️ Importante: diferencias de capacidades
Capacidad | NPX / Git local | Modo nube | SSE remoto |
Leer datos de diseño | ✅ | ✅ | ✅ |
Crear componentes y frames | ✅ | ✅ | ❌ |
Editar diseños existentes | ✅ | ✅ | ❌ |
Gestionar tokens/variables de diseño | ✅ | ✅ | ❌ |
Tableros FigJam (notas adhesivas, diagramas de flujo) | ✅ | ✅ | ❌ |
Monitorización en tiempo real (consola, selección) | ✅ | ❌ | ❌ |
Plugin Desktop Bridge | ✅ | ✅ | ❌ |
Requiere Node.js | Sí | No | No |
Total de herramientas disponibles | 114 | 101 | 9 |
En resumen: El SSE remoto es de solo lectura con 9 herramientas. El modo nube desbloquea el acceso de escritura (101 herramientas) desde clientes web de IA sin Node.js. NPX/Git local ofrece las 121 herramientas completas con monitorización en tiempo real.
🚀 Configuración con NPX (Recomendada)
Ideal para: Diseñadores que quieren capacidades completas de diseño asistido por IA.
Qué obtienes: Las 121 herramientas completas, incluida la creación de diseños, la gestión de variables y la instanciación de componentes.
Requisitos previos
Node.js 18+ — Compruébalo con
node --version(Descargar)Figma Desktop instalado (no solo la aplicación web)
Un cliente MCP (Claude Code, Cursor, Windsurf, Claude Desktop, etc.)
Paso 1: Obtén tu token de Figma
Ve a Gestionar tokens de acceso personal en la Ayuda de Figma
Sigue los pasos para crear un nuevo token de acceso personal
Introduce la descripción:
Figma Console MCPEstablece los alcances: Contenido del archivo (Lectura), Versiones del archivo (Lectura), Variables (Lectura), Comentarios (Lectura y escritura)
Copia el token — ¡no lo volverás a ver! (empieza por
figd_)
Paso 2: Configura tu cliente MCP
Claude Code (CLI):
claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latestCursor / Windsurf / Clade Desktop:
Añádelo a tu archivo de configuración MCP (consulta Dónde encontrar tu archivo de configuración a continuación):
{
"mcpServers": {
"figma-console": {
"command": "npx",
"args": ["-y", "figma-console-mcp@latest"],
"env": {
"FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
"ENABLE_MCP_APPS": "true"
}
}
}
}📂 Dónde encontrar tu archivo de configuración
Si no estás seguro de dónde poner la configuración JSON anterior, aquí está dónde almacena cada aplicación su configuración MCP:
App | macOS | Windows |
Clade Desktop |
|
|
Clade Code (CLI) |
|
|
Cursor |
|
|
Windsurf |
|
|
Consejo para diseñadores: El síbolo
~signifca tu carpera personal. En macO, es/Users/YourName/. En Windows,C:\Users\YourName\. Puedes abrir estos archivos con cualquier editor de texto, incluso TextEdit o el Bloc de notas.¿No encuentras el archivo? Si aún no exise, créalo. La aplicación lo detectará en su próximo reinicio. Asegúrate de que todo el archivo sea JSON válido (cuidado con las comas o corchetes que falten).
Usuarios de Claude Code: Puedes omitir por completo la edición manual. Solo ejecuta el comando
claude mcp addde arriba y él se encarga de todo por ti.
Paso 3: Conéctate a Figma Desktop
Desktop Bridge Plugin:
Abre Figma Desktop con normalidad (no se necesitan indicadores especiales) y abre un archivo.
Ve a Plugins → Desarrollo → Importar plugin desde manifiesto...
Selecciona
~/.figma-console-mcp/plugin/manifest.json(ruta estable, creada automáticamente por el servidor MCP).Ejecuta el plugin en tu archivo de Figma: escanea los puertos 9223–9232 y se conecta automáticamente a tu servidor MCP en ejecución.
Aviso sobre actualizaciones del plugin. Figma almacena en caché los archivos del plugin (
code.jsyui.html) a nivel de aplicación. El servidor MCP actualiza los archivos en~/.figma-console-mcp/plugin/en cada inicio, pero Figma sigue usando su copia en caché hasta que vuelvas a importar el manifiesto.Volver a importar es obligatorio solo cuando una nota de la versión lo indica, normalmente cuando el plugin añade un método nuevo que el servidor necesita (p. ej., v1.22.4, v1.10.0). En la mayoría de las actualizaciones, el servidor nuevo sigue siendo compatible a nivel de protocolo con el plugin anterior, y volver a importar es opcional: seguirás recibiendo todos los cambios funcionales, solo no los retoques cosméticos del lado del plugin (texto de la píldora de estado, informe de
pluginVersion).Cuando tengas que reimportar: Plugins → Administrar plugins → vuelve a importar
~/.figma-console-mcp/plugin/manifest.json. La ruta estable nunca cambia, así que es un paso de un clic.
Paso 4: Reinicia tu cliente MCP
Reinicia tu cliente MCP para cargar la nueva configuración.
Paso 5: ¡Pruébalo!
Check Figma status→ Debería mostrar el estado de la conexión con transporte WebSocket activo
Create a simple frame with a blue background→ Debería crear un frame en Figma (¡confirma el acceso de escritura!)
📖 Guía de configuración completa
Para contribuyentes: modo Git local
Ideal para: Desarrolladores que quieran modificar el código fuente o contribuir al proyecto.
Qué obtienes: Las mismas 121 herramientas que con NPX, más acceso completo al código fuente.
Configuración rápida
# Clone and build
git clone https://github.com/southleft/figma-console-mcp.git
cd figma-console-mcp
npm install
npm run build:localConfigura tu cliente MCP
Añádelo a tu archivo de configuración (consulta Dónde encontrar tu archivo de configuración):
{
"mcpServers": {
"figma-console": {
"command": "node",
"args": ["/absolute/path/to/figma-console-mcp/dist/local.js"],
"env": {
"FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
"ENABLE_MCP_APPS": "true"
}
}
}
}Luego sigue los pasos 3 a 5 de NPX de arriba.
📖 Guía de configuración completa
📡 SSE remoto (exploración de solo lectura)
Ideal para: Evaluar rápidamente la herramienta o extraer datos de diseño en modo de solo lectura.
Lo que obtienes: 9 herramientas de solo lectura: ver datos, tomar capturas de pantalla, leer registros, paridad diseño-código. No se pueden crear ni modificar diseños.
Claude Desktop (método UI)
Abre Claude Desktop → Settings → Connectors
Haz clic en "Add Custom Connector"
Introduce:
Name:
Figma Console (Read-Only)URL:
https://figma-console-mcp.southleft.com/sse
Haz clic en "Add" — ¡Listo! ✅
La autenticación OAuth se realiza automáticamente la primera vez que uses las herramientas del sistema de diseño.
Claude Code
⚠️ Problema conocido: el
--transport ssenativo de Claude Code tiene un bug. Usamcp-remoteen su lugar:
claude mcp add figma-console -s user -- npx -y mcp-remote@latest https://figma-console-mcp.southleft.com/sse💡 Consejo: para obtener todas las capacidades, usa NPX Setup en lugar de Remote SSE.
Otros clientes (Cursor, Windsurf, etc.)
{
"mcpServers": {
"figma-console": {
"command": "npx",
"args": ["-y", "mcp-remote", "https://figma-console-mcp.southleft.com/sse"]
}
}
}Actualizar a todas las capacidades
¿Listo para crear diseños? Sigue la guía NPX Setup anterior o prueba Cloud Mode si no quieres instalar Node.js.
📖 Guía de configuración completa
☁️ Cloud Mode (clientes de IA web)
Ideal para: usar Claude.ai, v0, Replit o Lovable para crear y modificar diseños de Figma: no se requiere Node.js.
Lo que obtienes: 101 herramientas, incluido acceso completo de escritura: creación de diseños, gestión de variables, instanciación de componentes y todas las herramientas de la API REST. Solo la supervisión en tiempo real (registros de consola, seguimiento de selección, cambios de documentos) requiere Local Mode.
Requisitos previos
Token de acceso personal de Figma — crea uno aquí (empieza por
figd_)Figma Desktop con el plugin Desktop Bridge instalado (consulta configuración de Desktop Bridge)
Un cliente de IA web compatible con MCP (Claude.ai, Lovable, v0, Replit, etc.)
Paso 1: Añade el conector MCP
Añade este endpoint a los ajustes de MCP de tu plataforma de IA:
URL: https://figma-console-mcp.southleft.com/mcp
Auth: tu PAT de Figma como token Bearer
En Claude.ai: Settings → Connectors → Add Custom Connector → pega la URL anterior. En Lovable/v0/Replit: busca "Add MCP Server" o "Integrations" en los ajustes → pega la URL y añade tu token.
Paso 2: Vincula el plugin
Abre el plugin Desktop Bridge en Figma Desktop (Plugins → Development → Figma Desktop Bridge)
Dile a tu asistente de IA:
Connect to my Figma pluginLa IA te da un código de vinculación de 6 caracteres (caduca en 5 minutos)
En el plugin: activa "Cloud Mode" → introduce el código → haz clic en Connect
¡Vinculado! Ahora tienes acceso completo de escritura
Qué puedes hacer
Una vez vinculado, usa lenguaje natural para diseñar:
Create a card component with a header image, title, description, and action button
Set up a color token collection with Light and Dark modes
Add a "High Contrast" mode to my existing token collectionCómo funciona
Tu cliente de IA envía comandos de escritura a través del servidor MCP en la nube, que los retransmite por WebSocket al plugin Desktop Bridge que se ejecuta en tu Figma Desktop. El plugin ejecuta los comandos mediante la API de plugins de Figma y devuelve los resultados por la misma vía.
AI Client → Cloud MCP Server → Durable Object Relay → Desktop Bridge Plugin → FigmaVariables en cualquier plan: Cloud Mode usa la API de plugins (no la API REST Enterprise), por lo que la gestión de variables funciona en los planes Free, Pro y Organization.
📖 Guía de configuración completa
📊 Comparación de métodos de instalación
Característica | NPX (recomendado) | Cloud Mode | Local Git | Remote SSE |
Tiempo de configuración | ~10 minutos | ~5 minutos | ~15 minutos | ~2 minutos |
Total de herramientas | 114 | 101 | 114 | 9 (solo lectura) |
Creación de diseños | ✅ | ✅ | ✅ | ❌ |
Gestión de variables | ✅ | ✅ | ✅ | ❌ |
Instanciación de componentes | ✅ | ✅ | ✅ | ❌ |
Pizarras de FigJam | ✅ | ✅ | ✅ | ❌ |
Supervisión en tiempo real | ✅ | ❌ | ✅ | ❌ |
Plugin Desktop Bridge | ✅ | ✅ | ✅ | ❌ |
Variables (sin Enterprise) | ✅ | ✅ | ✅ | ❌ |
Registros de consola | ✅ (cero latencia) | ❌ | ✅ (cero latencia) | ✅ |
Lectura de datos de diseño | ✅ | ✅ | ✅ | ✅ |
Requiere Node.js | Sí | No | Sí | No |
Autenticación | PAT (manual) | OAuth (automático) | PAT (manual) | OAuth (automático) |
Actualizaciones automáticas | ✅ ( | ✅ | Manual ( | ✅ |
Acceso al código fuente | ❌ | ❌ | ✅ | ❌ |
Idea clave: Remote SSE es de solo lectura. Cloud Mode añade acceso de escritura para clientes de IA web sin Node.js. NPX/Local Git ofrecen las 121 herramientas completas.
📖 Comparación completa de funciones
🎯 Prueba tu conexión
Después de la configuración, prueba estos prompts:
Prueba básica (todos los modos):
Navigate to https://www.figma.com and check statusPrueba del sistema de diseño (requiere autenticación):
Get design variables from [your Figma file URL]Prueba de Cloud Mode:
Connect to my Figma plugin→ Sigue el flujo de vinculación y prueba: "Crea un rectángulo azul simple"
Prueba del plugin (solo Local Mode):
Show me the primary font for [your theme name]🔐 Autenticación
Remote Mode - OAuth (automático)
Cuando uses por primera vez las herramientas del sistema de diseño:
El navegador se abre automáticamente en la página de autorización de Figma
Haz clic en "Allow" para autorizar (una sola vez)
El token se almacena de forma segura y se renueva automáticamente
Funciona con los planes Free, Pro y Enterprise de Figma
Local Mode - token de acceso personal (manual)
Visita https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens
Genera un token con los scopes: File content (Read), File versions (Read), Variables (Read), Comments (Read and write)
Añádelo a la configuración de MCP como variable de entorno
FIGMA_ACCESS_TOKEN
🛠️ Herramientas disponibles
Estado y diagnóstico
figma_get_status- Comprueba la conexión del puente WebSocket y el contexto del archivofigma_diagnose- Comprobación de estado legible para diseñadores + guía de configuraciónfigma_reconnect- Fuerza la reconexión con el plugin Desktop Bridgefigma_navigate- Cambia el archivo activo entre los plugins conectados (Local) o navega por el navegador headless en la nube (Remote/Cloud)
Depuración de consola
figma_get_console_logs- Recupera los registros de consolafigma_watch_console- Transmisión de registros en tiempo realfigma_clear_console- Limpia el búfer de registrosfigma_reload_plugin- Recarga la página actual
Depuración visual
figma_take_screenshot- Realiza capturas de pantalla de la interfaz
Extracción del sistema de diseño
figma_get_design_system_kit- Sistema de diseño completo en una sola llamada — tokens, componentes, estilos, especificaciones visualesfigma_get_variables- Extrae tokens/variables de diseñofigma_get_component- Obtiene los datos del componente (metadatos o especificación de reconstrucción)figma_get_component_for_development- Componente + imagenfigma_get_component_image- Solo la imagenfigma_get_styles- Estilos de color, texto y efectosfigma_get_file_data- Estructura completa del archivofigma_get_file_for_plugin- Datos del archivo optimizadosfigma_audit_design_system_report- Auditoría de salud con puntuación para cualquier cliente MCP — informe de seis categorías (nombrado, tokens, metadatos, accesibilidad, coherencia, cobertura) con remediación por hallazgo ("¿puede este MCP solucionarlo?"), desglose por categorías, datos en vivo con fuente declarada, caché de 5 minutos
📚 Inspección de bibliotecas compartidas
figma_get_library_component_by_key- Resuelve cualquier clave de componente a propiedades completas + variantes + especificaciones visuales — sin necesidad de la URL del archivo de la biblioteca de origen. Funciona tanto con claves COMPONENT_SET como con claves COMPONENT independientes. Compresión adaptativa a partir de >500KB.figma_get_library_components- Descubre todos los componentes de un archivo de biblioteca (requiere la URL o clave del archivo de biblioteca)figma_get_library_variables- Enumera todas las variables de las bibliotecas de equipo a las que el archivo actual está suscrito. Funciona en todos los planes de Figma — usa la ruta de la API de plugins, no el endpoint REST exclusivo de Enterprise. Filtra porlibraryName,collectionNameoresolvedType.figma_import_library_variable- Importa una variable de biblioteca al archivo actual. Devuelve unidlocal listo para pasar afigma_set_fills/figma_update_variable/ cualquier herramienta de vinculación de variables.
☁️ Cloud Relay
`
🔍 Paridad diseño-código (todos los modos)
figma_check_design_parity- Compara las especificaciones de componentes de Figma con la implementación en el código, generando un informe de diferencias puntuado con elementos de corrección accionablesfigma_generate_component_doc- Genera documentación markdown independiente de la plataforma combinando los datos de diseño de Figma con la información del lado del código
🔁 Sincronización de tokens (Modo local + Modo nube)
figma_export_tokens- Exporta las variables de Figma a archivos de design tokens en tu base de código. JSON DTCG canónico (dialecto hexadecimal heredado por defecto, o colores/dimensiones de objeto DTCG 2025.10 mediantedtcgDialect: "2025"), además de formatos CSS, Tailwind v4/v3, SCSS, TS, JSON, Style Dictionary y Tokens Studio. Fusión consciente de diferencias con los archivos fuente existentes (solo escribe lo que ha cambiado). La autodetección detokens.config.jsonpermite llamadas sin argumentos después de la primera configuración. Los metadatos de scopes y codeSyntax se conservan en el ida y vuelta mediante$extensions. Sustituye el pipeline de exportación de Style Dictionary y Tokens Studio para los métodos de estilos más habituales.figma_import_tokens- Envía las ediciones de tokens del lado del código de vuelta a Figma con una fase de aplicación completa. Compara con el estado actual de Figma y luego aplica las actualizaciones de valores, crea las colecciones/variables que faltan, aplica renombrados, escribe referencias alias reales (VARIABLE_ALIAS) y — solo constrategy: "replace"— elimina las variables exclusivas de Figma. Seguro en el ida y vuelta: los IDs de las variables de Figma se conservan en$extensions["figma-console-mcp"]de DTCG para que los renombrados en cualquiera de los lados no creen duplicados. Acepta ambos dialectos DTCG. Estrategia de simulación (dry-run) para obtener vistas previas seguras. En el Modo nube, pasa los tokens en línea mediantepayloadofiles(sin acceso al sistema de archivos local).
🧬 Extracción de sistemas de diseño (solo Modo local)
Convierte una base de código de producción en un sistema de diseño: analizar → extraer tokens → generar la estructura → portar componentes → verificar. Solo el Modo local: estas herramientas leen y escriben en tu sistema de archivos local, por lo que nunca se registran en el Modo nube.
figma_ds_analyze- Escanea una o más bases de código de aplicaciones de producción — detección de framework/estilos/capa de proveedor; un inventario de componentes ordenado por uso clasificados como vendorizados / envueltos / vendor puro / a medida, con contratos de props, inferencia de variantes a partir de sitios de llamada reales y detección de duplicados; captura de iconografía + tipografía; y clasificación de arquitectura (niveles atómicos, especializaciones comoFollowButton→Button, primitivas genéricas faltantes — el análisis "kit de UI vs sistema de diseño")figma_ds_extract_tokens- Extrae los estilos de la aplicación y conviértelos en tokens DTCG. Primero la intención declarada — propiedades personalizadas CSS multimodo (.dark/[data-theme]y otras convenciones), variables SCSS, valores de configuración de Tailwind, tripletas HSL de shadcn — además de minería de frecuencia de clases utilitarias de Tailwind valoradas desde el propio tema de la aplicación, y valores brutos recurrentes promovidos por frecuencia. Cada token lleva su procedencia (archivo fuente:línea, confianza, frecuencia) en$extensions; la salida se importa directamente a las variables de Figma mediantefigma_import_tokensfigma_ds_scaffold- Genera el paquete del sistema de diseño — esqueleto del paquete, archivos de tokens mediante el motor de formateo compartido, páginas de documentación de muestra de tokens/tipografía/iconografía, dependencias pares del framework y un README del flujo de trabajofigma_ds_setup_storybook- Conecta un taller de Storybook recién inicializado con la extracción — una hoja de estilos de vista previa que incorpora el mapeo@themede la aplicación de origen, definiciones personalizadas de@utility,@layer basey reglas@font-face; copia de fuentes autoalojadas; parches de configuración (plugin de Tailwind para Vite, runtime JSX automático); y una barra de herramientas de tema construida a partir de los modos extraídosfigma_ds_extract_component- Extrae en profundidad un componente para portarlo — fuente, contrato de props, variantes observadas en los sitios de llamada, puntos de contacto de estilos y un andamio de story CSF3 listo para adaptarfigma_ds_verify- Evaluaciones deterministas de fidelidad — parseo DTCG + integridad de alias, escaneo de expresiones CSS entre comillas, resolución devar()en el taller, cobertura de estructura + portado y preparación para el ida y vuelta con Figmafigma_ds_status- Lee o registra el progreso del portado, persistido entre sesiones
🔧 Gestión de variables (Modo local + Modo nube)
figma_create_variable_collection- Crea nuevas colecciones de variables con modosfigma_create_variable- Crea variables COLOR, FLOAT, STRING o BOOLEANfigma_update_variable- Actualiza los valores de las variables en modos específicosfigma_rename_variable- Renombra variables conservando los valoresfigma_delete_variable- Elimina variablesfigma_delete_variable_collection- Elimina colecciones y todas sus variablesfigma_add_mode- Añade modos a las colecciones (p. ej., "Dark", "Mobile")figma_rename_mode- Renombra modos existentesfigma_batch_create_variables- Crea hasta 100 variables en una sola llamada (10-50 veces más rápido)figma_batch_update_variables- Actualiza hasta 100 valores de variables en una sola llamadafigma_setup_design_tokens- Crea un sistema de tokens completo (colección + modos + variables) de forma atómica — los valores aceptan referencias entre llaves DTCG ("{color.blue.600}") que se resuelven en alias de variables reales
📌 Herramientas de pizarra FigJam (Modo local + Modo nube)
figjam_create_sticky- Crea una nota adhesiva con opciones de colorfigjam_create_stickies- Crea en lote hasta 200 notas adhesivasfigjam_create_connector- Conecta nodos con líneas de conexión etiquetadasfigjam_create_shape_with_text- Crea formas de diagramas de flujo (rombo, elipse, etc.)figjam_create_table- Crea tablas con datos de celdafigjam_create_code_block- Añade fragmentos de código con resaltado de sintaxisfigjam_auto_arrange- Organiza nodos en diseños de cuadrícula, horizontal o verticalfigjam_get_board_contents- Lee todo el contenido de una pizarra FigJamfigjam_get_connections- Lee el grafo de conexiones (diagramas de flujo, relaciones)
🎞️ Herramientas de presentaciones de diapositivas (Modo local + Modo nube)
figma_list_slides- Enumera todas las diapositivas con sus IDs, posiciones y estado de omisiónfigma_get_slide_content- Obtiene el árbol de contenido completo de una diapositivafigma_get_slide_grid- Obtiene el diseño de cuadrícula 2D de la presentaciónfigma_get_slide_transition- Lee la configuración de transición de una diapositivafigma_get_focused_slide- Obtiene la diapositiva actualmente enfocadafigma_create_slide- Crea una nueva diapositiva en blancofigma_delete_slide- Elimina una diapositiva de la presentaciónfigma_duplicate_slide- Clona una diapositiva existentefigma_reorder_slides- Reordena las diapositivas mediante el nuevo diseño de cuadrícula 2Dfigma_set_slide_transition- Define efectos de transición (22 estilos, 8 curvas)figma_skip_slide- Alterna si una diapositiva se omite en el modo de presentaciónfigma_add_text_to_slide- Añade texto a una diapositiva con fuentes, colores, alineación y ajuste de línea personalizadosfigma_add_shape_to_slide- Añade formas de rectángulo o elipse con colorfigma_set_slide_background- Establece el color de fondo de una diapositiva (crea o actualiza)figma_get_text_styles- Obtiene todos los estilos de texto locales con IDs, fuentes y tamañosfigma_set_slides_view_mode- Alterna entre la vista de cuadrícula y la de una sola diapositivafigma_focus_slide- Navega a una diapositiva específica
📖 Documentación detallada de herramientas
📖 Ejemplos de prompts
Modo nube (clientes web de IA)
Connect to my Figma plugin so we can start designing
Pair with my Figma file and create a login form with email, password, and submit button
Set up a brand color token collection with Light and Dark modesDepuración de plugins
Navigate to my Figma plugin and show me any console errors
Watch the console for 30 seconds while I test my plugin
Get the last 20 console logsExtracción de sistemas de diseño
Get all design variables from https://figma.com/design/abc123
Extract color styles and show me the CSS exports
Get the Button component with a visual reference image
Get the Badge component in reconstruction format for programmatic creationCreación de diseños (Modo local + Modo nube)
Create a success notification card with a checkmark icon and message
Design a button component with hover and disabled states
Build a navigation bar with logo, menu items, and user avatar
Create a modal dialog with header, content area, and action buttons
Arrange these button variants into a component set
Organize my icon variants as a proper component set with the purple borderGestión de variables (Modo local + Modo nube)
Create a new color collection called "Brand Colors" with Light and Dark modes
Add a primary color variable with value #3B82F6 for Light and #60A5FA for Dark
Rename the "Default" mode to "Light Theme"
Add a "High Contrast" mode to the existing collectionParidad diseño-código
Compare the Button component in Figma against our React implementation
Check design parity for the Card component before sign-off
Generate component documentation for the Dialog from our design systemPizarras FigJam
Create a retrospective board with "Went Well", "To Improve", and "Action Items" columns
Build a user flow diagram for the checkout process with decision points
Read this brainstorming board and summarize the key themes
Generate an affinity map from these meeting notes
Create a comparison table of our three platform optionsPresentaciones de diapositivas
List all slides and tell me which ones are skipped
Add a new slide with the title "Thank You" in 72px text
Set a DISSOLVE transition on the first slide with 0.5 second duration
Duplicate slide 5 for an A/B comparison
Skip slides 8 and 9 — they're not ready for the client presentation
Reorder my slides so the conclusion comes before Q&ADepuración visual
Take a screenshot of the current Figma canvas
Navigate to this file and capture what's on screen🎨 Creación de diseños asistida por IA
Requiere Desktop Bridge: Esta función funciona con el Modo local (NPX o Git local) y el Modo nube. El SSE remoto sin emparejamiento con el Modo nube es de solo lectura y no puede crear ni modificar diseños.
Una de las capacidades más potentes de este servidor MCP es la capacidad de diseñar componentes de UI y páginas completos directamente en Figma mediante conversación en lenguaje natural con cualquier asistente de IA compatible con MCP, como Claude Desktop o Claude Code.
Qué es posible
Crea diseños originales desde cero:
Design a login card with email and password fields, a "Forgot password?" link,
and a primary Sign In button. Use 32px padding, 16px border radius, and subtle shadow.Aprovecha las bibliotecas de componentes existentes:
Build a dashboard header using the Avatar component for the user profile,
Button components for actions, and Badge components for notifications.Genera diseños de página completos:
Create a settings page with a sidebar navigation, a main content area with form fields,
and a sticky footer with Save and Cancel buttons.Cómo funciona
Describe lo que quieres en lenguaje sencillo
La IA busca en tu biblioteca de componentes mediante
figma_search_componentspara encontrar bloques de construcción relevantesLos componentes se instancian con las variantes y propiedades adecuadas mediante
figma_instantiate_componentLos elementos personalizados se crean utilizando toda la API de plugins de Figma mediante
figma_executeLa validación visual captura capturas de pantalla automáticamente e itera hasta que el diseño se vea bien
A quién beneficia
Rol | Caso de uso |
Diseñadores | Prototipan ideas rápidamente sin construcción manual marco a marco. Exploran variaciones rápidamente describiendo cambios. |
Desarrolladores | Generan maquetas de UI durante las discusiones de planificación. Crean especificaciones visuales sin cambiar a herramientas de diseño. |
Product Managers | Esbozan conceptos de funcionalidades durante la ideación. Comunican los requisitos visuales directamente a las partes interesadas. |
Equipos de sistemas de diseño | Prueban la flexibilidad de los componentes generando composiciones. Identifican lagunas en la cobertura de componentes. |
Agencias | Aceleran la entrega del concepto inicial. Iteran sobre los comentarios de los clientes en tiempo real durante las llamadas. |
Flujos de trabajo de ejemplo
Diseño completamente nuevo:
"Crea un toast de notificación con un icono a la izquierda, texto de título y descripción, y un botón de cierre. Usa nuestros colores de marca."
La IA crea marcos personalizados, aplica tus design tokens y construye el componente desde cero.
Composición de componentes:
"Construye una tarjeta de perfil de usuario usando el componente Avatar (tamaño grande), dos componentes Button (Edit Profile y Settings) y un Badge para el estado del usuario."
La IA busca en tu biblioteca, encuentra los componentes exactos y los ensambla con un espaciado y una alineación adecuados.
Iteración de diseño:
"El espaciado resulta demasiado ajustado. Aumenta el espacio entre secciones a 24px y haz que el título sea más grande."
La IA modifica el diseño existente, toma una captura de pantalla para verificar y sigue iterando hasta que estés satisfecho.
Validación visual
La IA sigue automáticamente un flujo de trabajo de validación después de crear diseños:
Crear → Ejecutar el código del diseño
Captura de pantalla → Capturar el resultado
Analizar → Comprobar la alineación, el espaciado y el equilibrio visual
Iterar → Corregir cualquier problema detectado
Verificar → Captura final para confirmar
Esto garantiza que los diseños no solo sean técnicamente correctos, sino que se vean bien.
🎨 Plugin de Desktop Bridge (conexión recomendada)
El plugin Figma Desktop Bridge es la forma recomendada de conectar Figma al servidor MCP. Se comunica a través de WebSocket — no se necesitan indicadores de lanzamiento especiales de Figma y persiste entre reinicios de Figma.
Configuración
Abre Figma Desktop (inicio normal — sin necesidad de indicadores de depuración)
Ve a Plugins → Development → Import plugin from manifest...
Selecciona
figma-desktop-bridge/manifest.jsondel directorio figma-console-mcpEjecuta el plugin en tu archivo de Figma — se conecta automáticamente a través de WebSocket (escanea los puertos 9223–9232)
Pregunta a tu IA: "Comprueba el estado de Figma" para verificar la conexión
Importación única. Una vez importado, el plugin permanece en tu lista de plugins de Development. Solo tienes que ejecutarlo cada vez que quieras usar el MCP.
📖 Documentación de Desktop Bridge
Capacidades
Operaciones de lectura:
Variables sin API Enterprise
Descripciones de componentes fiables (evita errores de la API)
Compatibilidad multimodo (variantes Light/Dark/Brand)
Seguimiento de la selección en tiempo real y monitorización de cambios en el documento
Operaciones de escritura:
Creación de diseño - Crea frames, formas, texto y componentes mediante
figma_executeGestión de variables - Operaciones CRUD completas sobre variables y colecciones
Gestión de modos - Añade y renombra modos para compatibilidad con múltiples temas
Cómo funciona el transporte
El servidor MCP se comunica mediante WebSocket a través del plugin Desktop Bridge
El servidor intenta primero el puerto 9223 y, si es necesario, recorre automáticamente los puertos 9224–9232
El plugin escanea todos los puertos del rango y se conecta a todos los servidores activos que encuentre
Las 121 herramientas funcionan a través del transporte WebSocket
Varios archivos: El servidor WebSocket admite múltiples conexiones simultáneas de plugins — una por archivo de Figma abierto. Cada conexión se rastrea mediante la clave de archivo con estado independiente (selección, cambios en el documento, registros de consola).
Variables de entorno:
FIGMA_WS_PORT— Sobrescribe el puerto WebSocket preferido (por defecto: 9223). El servidor probará un rango de 10 puertos a partir de este valor si el puerto preferido está ocupado.FIGMA_WS_HOST— Sobrescribe la dirección de enlace del servidor WebSocket (por defecto:localhost). Configúralo en0.0.0.0cuando se ejecute dentro de Docker para que la máquina host pueda alcanzar el servidor MCP.
Cloud Mode: El plugin también admite un conmutador de Cloud Mode para vincularse con clientes de IA web (Claude.ai, v0, Replit, Lovable). Activa "Cloud Mode" en la interfaz del plugin, introduce el código de vinculación de 6 caracteres de tu asistente de IA y haz clic en Connect. Consulta Cloud Mode para más detalles.
Limitación del plugin: En Local Mode, funciona con NPX o Local Git. En Cloud Mode, se vincula con el endpoint MCP remoto. La SSE remota sin vinculación de Cloud Mode es de solo lectura.
🔀 Compatibilidad con múltiples instancias (v1.10.0)
Figma Console MCP ahora admite múltiples instancias simultáneas — perfecto para diseñadores y desarrolladores que trabajan en varios proyectos a la vez o usan las pestañas Chat y Code de Claude Desktop al mismo tiempo.
El problema (antes de v1.10.0)
Cuando dos procesos intentaban iniciar el servidor MCP (p. ej., las pestañas Chat y Code de Claude Desktop), el segundo fallaba con EADDRINUSE porque ambos competían por el puerto 9223.
Cómo funciona ahora
El servidor prueba primero el puerto 9223 (el predeterminado)
Si ese puerto ya está ocupado, prueba automáticamente el 9224, luego el 9225, y así sucesivamente hasta el 9232
El plugin Desktop Bridge en Figma se conecta a todos los servidores activos simultáneamente
Cada instancia del servidor recibe eventos en tiempo real (cambios de selección, cambios en el documento, registros de consola)
figma_get_statusmuestra en qué puerto estás y enumera otras instancias activas
Qué significa esto para ti
Escenario | Antes de v1.10.0 | Ahora |
Dos pestañas de Claude Desktop (Chat + Code) | La segunda pestaña falla | Ambas funcionan de forma independiente |
Varios terminales CLI en distintos proyectos | Solo uno puede ejecutarse | Todos se ejecutan simultáneamente |
Claude Desktop + Claude Code CLI | Conflicto de puertos | Ambos coexisten |
¿Necesito hacer algo?
Nada. La compatibilidad con múltiples instancias es totalmente automática:
Cada servidor MCP ocupa el siguiente puerto disponible del rango
El plugin Desktop Bridge escanea todos los puertos y se conecta a todos los servidores activos
Los procesos huérfanos de pestañas cerradas se limpian automáticamente al iniciar
Sin gestión manual de puertos: el plugin ya escanea todo el rango
(Solo es necesario volver a importar el manifiesto cuando el propio código del plugin cambia, por ejemplo, tras una actualización del paquete. El escaneo del rango de puertos ya está incluido en el plugin distribuido.)
🧩 MCP Apps (Experimental)
Figma Console MCP incluye compatibilidad con MCP Apps — experiencias de interfaz de usuario ricas e interactivas que se renderizan directamente dentro de cualquier cliente MCP que admita la extensión de protocolo MCP Apps. Desarrollado con el SDK oficial @modelcontextprotocol/ext-apps.
¿Qué son las MCP Apps? Las herramientas MCP tradicionales devuelven texto o imágenes a la IA. Las MCP Apps van más allá: renderizan interfaces HTML interactivas directamente en el chat, lo que permite a los usuarios explorar, filtrar e interactuar con los datos sin consumir contexto de la IA.
Token Browser
Un explorador interactivo de tokens de diseño.
Uso: Pídele a Claude que "explore los tokens de diseño" o que "te muestre los tokens de diseño" mientras estás conectado a un archivo de Figma.
Características:
Explora todos los tokens organizados por colección con secciones expandibles
Filtra por tipo (Colores, Números, Cadenas) y busca por nombre/descripción
Columnas de modos por colección (Light, Dark, Custom) que coinciden con el panel Variables de Figma
Muestras de color, resolución de alias y clic para copiar en cualquier valor
Funciona sin plan Enterprise mediante Desktop Bridge (modo local)
Design System Dashboard
Una tarjeta de puntuación de salud estilo Lighthouse que audita tu sistema de diseño en seis categorías.
Uso: Pídele a Claude que "audite el sistema de diseño" o que "muestre la salud del sistema de diseño" mientras estás conectado a un archivo de Figma.
Características:
Puntuación general ponderada (0–100) con seis indicadores de categoría: Nomenclatura, Tokens, Componentes, Accesibilidad, Consistencia y Cobertura
Secciones de categoría expandibles con hallazgos individuales, indicadores de gravedad y detalles accionables
Ubicaciones de diagnóstico que vinculan los hallazgos con variables, componentes o colecciones específicos
Tooltips que explican el propósito de cada comprobación y los criterios de puntuación
Botón de actualización para volver a ejecutar la auditoría sin consumir contexto de la IA
Motor de puntuación puro sin dependencias externas: todo el análisis se ejecuta localmente
¿No hay compatibilidad con MCP Apps? Misma auditoría, herramienta simple: figma_audit_design_system_report ejecuta el mismo motor de puntuación y devuelve el informe como datos — resumen por defecto, desglose por categoría mediante category, JSON completo con format: "full" — con una sección de remediación que indica qué hallazgos puede corregir este MCP (design), cuáles requieren primero una decisión de diseño (design-assisted) y cuáles necesitan trabajo de diseño humano (manual). Funciona en cualquier cliente MCP sin la variable ENABLE_MCP_APPS; los resultados se almacenan en caché durante 5 minutos (forceRefresh para volver a rastrear).
Habilitar MCP Apps:
Las MCP Apps están habilitadas por defecto en las configuraciones de instalación anteriores (mediante "ENABLE_MCP_APPS": "true"). Si configuraste antes de v1.10.0 y no tienes esto en tu configuración, añádelo a tu sección env:
"env": {
"FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
"ENABLE_MCP_APPS": "true"
}Nota: Las MCP Apps requieren un cliente MCP compatible con el protocolo ext-apps (p. ej., Claude Desktop). Esta función es experimental y el protocolo puede evolucionar.
Hoja de ruta futura de MCP Apps
MCP Apps planeadas:
Component Gallery — Navegador visual para buscar y previsualizar componentes con exploración de variantes
Style Inspector — Panel interactivo para explorar estilos de color, texto y efectos con vistas previas en vivo
Variable Diff Viewer — Comparación lado a lado de valores de tokens entre modos y ramas
La arquitectura permite añadir nuevas apps con un mínimo de código repetitivo: cada app es un módulo autónomo con su propio registro de herramientas en el servidor y su interfaz de usuario en el cliente.
🚀 Temas avanzados
Guía de instalación - Guía de instalación completa para todos los clientes MCP
Autoalojamiento - Despliega tu propia instancia en Cloudflare
Arquitectura - Cómo funciona internamente
Configuración de OAuth - Configura OAuth para despliegues autoalojados
Solución de problemas - Problemas comunes y soluciones
🤝 vs. Figma Official MCP
Figma Console MCP (Este proyecto) - Depuración, extracción de datos y creación de diseños
✅ Registros de consola en tiempo real de los plugins de Figma
✅ Captura de pantallas y depuración visual
✅ Trazas de pila de errores y monitorización en tiempo de ejecución
✅ Extracción de datos de diseño sin procesar (JSON)
✅ Creación y lectura de pizarras FigJam (notas adhesivas, diagramas de flujo, tablas)
✅ Funciona de forma remota o local
Figma Official Dev Mode MCP - Generación de código
✅ Genera código React/HTML a partir de diseños
✅ Generación de clases Tailwind/CSS
✅ Andamiaje de código repetitivo para componentes
Úsalos juntos para el flujo de trabajo completo: genera código con el MCP oficial y luego depura y extrae datos con Console MCP.
🛤️ Hoja de ruta
Estado actual: v1.40.0 (Stable) - listo para producción. Lo último: extracción de sistemas de diseño a partir de bases de código de producción: siete herramientas figma_ds_* de modo local que analizan una o más aplicaciones (detección de framework/estilos/proveedor, inventario de componentes ordenado por uso clasificado como vendored/envuelto/proveedor puro/hecho a medida, inferencia de variantes a partir de sitios de llamada reales, detección de duplicados y una pasada de arquitectura que separa las especializaciones del kit de IU de las primitivas genéricas que faltan), extraen el estilo de facto en tokens DTCG con procedencia por token (propiedades personalizadas CSS multimodo, SCSS, configuración de Tailwind, tripletas HSL de shadcn, minería de frecuencia de clases de utilidad valorada desde el tema propio de la aplicación), generan el andamiaje del paquete del sistema de diseño con páginas de documentación de muestra, conectan un taller Storybook nuevo a las capas y tipografías reales del tema de la aplicación, extraen componentes en profundidad para portarlos con andamiajes de historias CSF3, verifican con evaluaciones deterministas de fidelidad y conservan el progreso del portado entre sesiones: los tokens extraídos se importan directamente en variables de Figma mediante figma_import_tokens. Sobre la corrección de v1.39.1 para un banner de actualización del plugin que nunca podía cerrarse: una instancia anterior del servidor que insistía a un plugin más reciente para que reimportara, cuando solo instala el mismo plugin o uno más reciente. Sobre la ejecución multiarchivo de v1.39.0: figma_execute_across_files ejecuta un script contra varios archivos conectados a Desktop Bridge de forma concurrente (cuatro archivos x 2 s de trabajo en ~3 s, no ~8 s), y figma_execute acepta un fileKey opcional para apuntar a un solo archivo sin mover el archivo activo ni liberar el bloqueo de destino; el objetivo debe ser explícito (fileKeys o allFiles: true), de modo que nada se distribuya a archivos que no hayas nombrado. De la PR comunitaria n.º 107 de @Wolfr. Incluye una corrección del relay: handleResult() en el ui.html del plugin reconstruía cada campo de la respuesta uno a uno y descartaba silenciosamente resultAnalysis y fileContext, por lo que la comprobación de resultAnalysis.warning que la propia descripción de figma_execute indica a los llamadores que realicen nunca ha sido posible (reimporta manifest.json para esos dos campos; todo lo demás funciona sin ello). Sobre la corrección de estabilidad de la conexión de v1.38.2: el recolector de procesos huérfanos del propio servidor estaba terminando servidores MCP sanos porque su sonda de actividad usaba una dirección IPv4 literal mientras que el servidor se enlaza al bucle de retorno IPv6, lo que convertía cada puerta de seguridad contra finalizaciones en un mero trámite; esta era la causa de los errores recurrentes de «Server disconnected» en todos los clientes MCP. Junto con la corrección de v1.38.1 para las herramientas de variables de bibliotecas compartidas, que desde v1.29.0 habían estado informando silenciosamente de cero colecciones y reportaban importaciones fallidas como éxitos. Sobre los registros de cambios continuos de componentes de v1.38.0 en la documentación generada: figma_generate_component_doc acepta un parámetro history opcional que recupera el historial de diseño por componente del historial de versiones de Figma (cada versión se compara y se limita a ese componente, de modo que los cambios de nombre, las propiedades añadidas y los enlaces de tokens aparecen como filas) junto con el historial de código de git log en los archivos fuente del componente, representado como una sección ## History con tablas de diseño, código y notas de versión. Prefiere versiones etiquetadas, recurre a guardados automáticos cuando un archivo no tiene ninguna, y está desactivado por defecto para que las llamadas existentes no cambien (solo en el servidor, sin reimportar el plugin). Sobre la auditoría de salud del sistema de diseño de v1.37.x para cada cliente: figma_audit_design_system_report ejecuta el motor determinista de puntuación de seis categorías del panel y devuelve el informe como datos con remediación por hallazgo, datos en vivo verificados por fileKey (fuente revelada), desglose por categorías en fragmentos y una caché de 5 minutos (solo en el servidor, sin reimportar el plugin). Sobre el bloqueo de destino de v1.36.0 para el trabajo paralelo multiarchivo — — figma_navigate acepta un indicador lock: true que fija el archivo activo para que un agente de IA pueda trabajar en un archivo mientras tú trabajas en otro sin que los comandos se enruten al archivo equivocado. Sobre el soporte de escritura de Figma Slots de v1.35.0: crear, inspeccionar, rellenar y restablecer Slots (GA en Config 2026) mediante 5 nuevas herramientas (figma_create_slot, figma_get_slots, figma_append_to_slot, figma_reset_slot, figma_add_slot_property), validadas en vivo contra la API de plugins GA y basadas en la PR comunitaria n.º 77. Sobre la sincronización bidireccional de tokens v2 + DTCG 2025.10 de v1.34.0: figma_import_tokens aplica el plan de diferencias completo (crea las colecciones/variables que faltan, aplica cambios de nombre, escribe referencias VARIABLE_ALIAS reales y elimina solo bajo replace explícito), figma_export_tokens habla el dialecto DTCG 2025.10 cuando se le pide (por defecto, el formato heredado es idéntico byte a byte), los ámbitos de variable/codeSyntax viajan de ida y vuelta mediante $extensions, figma_setup_design_tokens acepta valores de alias mediante referencias entre llaves DTCG, y figma_create_component_set crea un conjunto de variantes completo a partir de una matriz de ejes en una sola llamada. Sobre la línea v1.33.x: corrección del handshake de versiones (el banner de reimportación solo se muestra cuando los archivos del plugin han cambiado de verdad), revisión de dependencias de seguridad y la renovación de la UX de conexión de v1.33.0 (indicador de estado honesto derivado del estado de conexión en vivo, autodescubrimiento de /health con reconexión autocorrectiva) + una auditoría de todo el código base con 33 correcciones (viajes de ida y vuelta DTCG multimodo sin pérdidas, resolución de alias entre colecciones, corrección de URL de rama en las herramientas REST, correcciones de envenenamiento de caché y CSWSH, capturas de pantalla que priorizan el bridge). Construido sobre una auditoría de accesibilidad precisa según WCAG (la altura de línea inferior a 1,5× ya no se marca erróneamente como fallo; las sugerencias de legibilidad se desvinculan de las comprobaciones de conformidad y se limitan al texto multilínea; comprobación de WCAG 1.4.12 en el código), una conexión de Desktop Bridge autocorrectiva (recolector de procesos zombi + vigilante de reconexión automática: corrige el error recurrente de «no conectado hasta reiniciar»), enlace nativo de variables en rellenos/trazos + control de tipografía en las herramientas de escritura, inspección de bibliotecas compartidas (resolución de componentes por clave + lectura/importación de variables de biblioteca sin plan Enterprise), canalización de exportación de tokens en 10 formatos (DTCG, CSS, Tailwind v4, Tailwind v3, SCSS, módulo TS, JSON plano/anidado, Style Dictionary v3, Tokens Studio), sincronización bidireccional de tokens Figma↔código, conocimiento del historial de versiones y de series temporales, soporte de FigJam + Slides, Cloud Write Relay, Design System Kit, conectividad solo WebSocket, seguimiento inteligente multiarchivo, 121 herramientas (Local) / 101 herramientas (Cloud) / 9 herramientas (Remoto de solo lectura), API de comentarios, desambiguación de identidad entre MCP y MCP Apps.
Lanzamientos recientes:
v1.40.0 - Extracción del sistema de diseño. Siete nuevas herramientas solo en modo Local que convierten un código base de producción en un sistema de diseño, además del motor de extracción de soporte.
figma_ds_analyzeescanea uno o más códigos base de la aplicación: detección de framework/estilos/capa de proveedor (React/Next/Angular/Web Components; Tailwind v3/v4, CSS Modules, SCSS, Emotion, styled-components; shadcn/ui, Radix, MUI, Chakra…), un inventario de componentes clasificado por uso y categorizado como vendido/envuelto/proveedor puro/a medida con contratos de props, inferencia de variantes a partir de sitios de llamada reales, detección de duplicados, captura de iconografía y tipografía, y una clasificación de arquitectura que separa un kit de UI de un sistema de diseño (niveles atómicos, especializaciones como FollowButton → Button, primitivas genéricas faltantes).figma_ds_extract_tokensextrae el estilo de facto en tokens DTCG — propiedades personalizadas CSS multimodo en convenciones.dark/[data-theme], variables SCSS, valores de configuración de Tailwind, triples HSL de shadcn, minería de frecuencia de clases de utilidad de Tailwind valorada desde el propio tema de la aplicación, valores brutos promovidos por frecuencia — con procedencia por token en$extensions, importable directamente en variables de Figma mediantefigma_import_tokens.figma_ds_scaffoldgenera el paquete (archivos de tokens mediante los formateadores compartidos, páginas de exhibición de tokens/tipografía/iconografía);figma_ds_setup_storybookconecta un taller de Storybook nuevo a las capas de tema y fuentes reales de la aplicación;figma_ds_extract_componentproduce manifiestos de portabilidad por componente con andamios de historias CSF3;figma_ds_verifycontrola el resultado con evaluaciones de fidelidad deterministas más preparación para el viaje de ida y vuelta en Figma;figma_ds_statuspersiste el progreso de portabilidad entre sesiones. También corrige los formateadores CSS/SCSS/Tailwind v4 que citan expresiones funcionales CSS (uncubic-bezier(...)citado mata silenciosamente las transiciones — afecta también afigma_export_tokens). Solo servidor, sin reimportación del plugin.v1.39.1 - El banner de actualización del plugin no se podía borrar.
computePluginUpdateAvailable()era una desigualdad simple sin comprobación de dirección, por lo que un servidor cuya copia de plugin empaquetada era MÁS ANTIGUA que el plugin conectado aún decía al usuario que reimportara — lo que solo instala el mismo plugin o uno más nuevo. No es un caso extremo: el rango de puertos 9223–9232 mantiene varias instancias de servidor activas,BUNDLED_PLUGIN_VERSIONse analiza una vez al cargar el módulo, y cada servidor que queda en ejecución desde antes de una actualización molesta a un plugin correctamente actualizado. Reproducido en vivo con cuatro servidores v1.38.2 sobrantes contra un plugin 1.39.0 recién reimportado. Ahora solo marca cuando la copia empaquetada es genuinamente más nueva. Solo servidor, sin reimportación del plugin. 1452 pruebas.v1.39.0 - Ejecución multiarchivo. La nueva
figma_execute_across_filesejecuta un script contra varios archivos conectados a Desktop Bridge de forma concurrente, con aislamiento de errores por archivo y tiempos de espera independientes (verificado en vivo: cuatro archivos × 2s de trabajo en ~3.0s, todos los envíos dentro de 5ms — frente a ~8s en serie).figma_executeganó unfileKeyopcional para apuntar a un único archivo no activo sin mover el archivo activo ni liberar el bloqueo de destino. El direccionamiento es deliberadamente explícito —fileKeysoallFiles: true, sin abanico a todo por defecto — porque esto ejecuta código arbitrario en archivos que puedes estar editando activamente, incluido uno fijado por el bloqueo de destino. El transporte ya era concurrente (sendCommandsiempre ha tomado una clave de archivo de destino, y cada salto está identificado por ID de solicitud); solo faltaba la capa de herramientas. PR comunitario #107 de @Wolfr. También corrige un error de retransmisión de Desktop Bridge que descartaba silenciosamenteresultAnalysisyfileContextde cada respuesta defigma_executedesde que se introdujeron — haciendo imposible la comprobación deresultAnalysis.warningque la propia descripción de la herramienta dice a los llamadores que realicen — protegido ahora por una prueba que lee los archivos reales del plugin. Reimportamanifest.jsonpara esos dos campos; el resto funciona sin él, y las versiones mixtas de plugin degradan limpiamente. 52 suites / 1443 pruebas.v1.38.2 - Estabilidad de conexión: el recolector de huérfanos estaba terminando servidores MCP saludables, la causa de los errores recurrentes de "Servidor desconectado" en todos los clientes MCP (reproducido tanto en Claude Code como en Claude Desktop; no relacionado con el plugin de Desktop Bridge). El recolector sondea el
/healthde un hermano antes de decidir que está muerto, pero solicitaba127.0.0.1mientras que el servidor WebSocket se enlaza alocalhost— resuelto al bucle de retorno IPv6 en macOS de doble pila, sin nada en IPv4 — por lo que la sonda informaba "nada responde" para servidores saludables y cada compuerta de seguridad de eliminación construida sobre ella se convirtió en un sello de goma, incluida la escrita para perdonar a los hermanos después de que la máquina duerme. Tres defectos de apoyo: archivos de puerto escritos de forma no atómica (un lector que aterrizaba a mitad de reescritura obtenía un error de análisis que ambas rutas de limpieza trataban como "corrupto, elimínalo", dejando varado a un servidor saludable), una ruta huérfana que terminaba a los titulares de puertos sin archivo sin sondear en absoluto, y un latido que se rendía permanentemente una vez que su propio archivo desaparecía. Correcciones: sondearlocalhost, escrituras atómicas de temp+rename, nunca eliminar en un fallo de análisis, sonda de salud antes de la eliminación de huérfanos en ambas rutas, y reanuncio auto-reparador protegido por propiedad de puerto en proceso. Reinicia completamente los clientes MCP después de actualizar — las versiones antiguas en ejecución mantienen la sonda rota y aún terminan a los hermanos saludables. Solo servidor, sin reimportación del plugin. 1422 pruebas (7 nuevas regresiones, cada una verificada para fallar antes de la corrección).v1.38.1 - Herramientas de variables de biblioteca compartida corregidas.
figma_get_library_variablesdevolvíatotalCollections: 0para cada archivo, en todos los planes, desde que se lanzó en v1.29.0, yfigma_import_library_variableinformaba importaciones fallidas como éxitos conid: undefined. Ambas leían el sobre{ success, result }de Desktop Bridge como si fuera el valor de retorno desnudo del script inyectado, por lo queArray.isArray()siempre era falso, la protección__errorera código muerto, y.idsiempre era indefinido. El fallo se presentaba como un éxito con una pista plausible adjunta ("suscríbete a una biblioteca a través del panel de Activos"), que es por lo que sobrevivió dos meses sin informarse. Ambas herramientas ahora se desenvuelven a través de un ayudante compartido que también mapea unsuccess: falsea nivel de puente a la ruta de error, por lo que un tiempo de espera del plugin surge como un error real en lugar de ser tragado como "0 colecciones"; una importación que no produceidahora es un error explícito. Se auditaron los 26 sitios de llamada deexecuteCodeViaUI— solo estos dos estaban afectados. Los mocks de prueba habían codificado un contrato de cable que no existe, por lo que CI permaneció verde; ahora reproducen el sobre real, más seis pruebas de regresión verificadas para fallar contra el código anterior a la corrección. Informado por Isabella Minzly. Solo servidor — no se necesita reimportación del plugin.v1.38.0 - Registros de cambios de componentes en curso en la documentación generada.
figma_generate_component_docganó un parámetrohistoryopt-in que produce un registro de cambios real en lugar de solo hacer eco de las filas escritas a mano decodeInfo.changelog:history.figmarecorre el historial de versiones de Figma y compara cada par consecutivo con alcance al componente (reutilizando el mismo motor quefigma_diff_versions, por lo que un cambio de nombre, una propiedad de componente recién agregada o un enlace de token se convierten en una fila), mientras quehistory.gitejecutagit logsobre los archivos fuente del componente derivados automáticamente decodeInfo.filePath/sourceFiles[]. Se prefieren las versiones etiquetadas, pero los autoguardados se usan automáticamente cuando un archivo no tiene ninguna — verificado contra un sistema maduro con 72 autoguardados y 0 versiones etiquetadas, donde un recorrido solo etiquetado no produce nada. Los enlaces en modo detallado se agrupan por propiedad (enlazar un token a través de un conjunto de 24 variantes producía 44 viñetas casi idénticas en una sola celda de tabla). Ambas fuentes están desactivadas por defecto, por lo que los llamadores existentes obtienen una salida byte-idéntica. Sin nuevas herramientas; solo servidor, sin reimportación del plugin.v1.37.0 - Auditoría de salud del sistema de diseño para cada cliente MCP. La nueva
figma_audit_design_system_reportejecuta el motor de puntuación determinista del Panel de Sistema de Diseño (nombres, arquitectura de tokens, metadatos de componentes, accesibilidad, consistencia, cobertura) y devuelve el informe puntuado como datos — sin soporte de MCP Apps niENABLE_MCP_APPSnecesario (el registro anterior lo bloqueaba todo, haciendo la auditoría inalcanzable fuera de Claude Desktop). Los datos de componentes ahora son en vivo primero: un rastreo de puente por página verificado por fileKey (30s/página, fallos aislados por página) con respaldo de biblioteca publicada REST, y la fuente elegida se revela en el informe (bridge-live/rest-published/none) para que las puntuaciones de publicaciones obsoletas no puedan hacerse pasar por las en vivo. La salida es segura para tokens por diseño: resumen acotado, desglose por categoría fragmentado, JSON completo limitado, caché de datos brutos de 5 minutos. Cada hallazgo lleva un veredicto de remediación — auto-corregible por las herramientas de escritura de este MCP, corregible después de una decisión de diseño, o manual — con las herramientas exactas nombradas. Pase de precisión de puntuación: los componentes de variantes ya no envenenan las comprobaciones de PascalCase/minúsculas, se acepta Title Case, los nombres de conjuntos de componentes cuentan para la cobertura de componentes centrales,color/content/*reconocido en el emparejamiento de contraste, sinónimos de estado (active≈pressedetc.), e internos con prefijo./_excluidos. Solo servidor — no se necesita reimportación del plugin.v1.36.0 - Bloqueo de destino para trabajo paralelo multiarchivo.
figma_navigategana una banderalock: trueque fija el archivo activo — nuevas conexiones, reconexiones, y los propios cambios de selección/página del usuario en otros archivos ya no mueven el destino del comando, por lo que un agente puede escribir de forma segura en un archivo mientras el usuario trabaja en otro. Se libera automáticamente cuando el archivo fijado se desconecta o navega a otro lugar;figma_list_open_filesinforma una banderatargetLockedpara protecciones previas a la escritura. Solo servidor — no se necesita reimportación del plugin.v1.35.0 - Soporte de escritura de Figma Slots, cerrando #29 (la característica más solicitada del rastreador) mediante el PR comunitario #77 de @simonesalvucci, actualizado a la API GA. Cinco nuevas herramientas:
figma_create_slot(slot + propiedad SLOT auto-enlazada; se admiten variantes dentro de conjuntos de componentes — la restricción beta se levantó en GA),figma_get_slots,figma_append_to_slot(clonar o crear contenido en slots de instancia; ajusta los clones al origen del slot),figma_reset_slot, yfigma_add_slot_property(retroadaptar un marco existente como slot). Endurecido por validación en vivo: restauración del paso dedefaultValuede VARIANT (Figma requiere no vacío), reordenamiento de ruta destructiva en el manejador de append (contenido validado antes de queclearExistingvacíe algo), corrección de lista blanca de retransmisión para cargas útiles deslot. Se requiere reimportación del plugin (code.js+ui.htmlcambiados).v1.34.0 - Sincronización de tokens bidireccional v2 + DTCG 2025.10.
figma_import_tokensahora aplica el plan de diferencias completo: se crean colecciones y variables faltantes (con modos, tipos inferidos/registrados, y valores establecidos en orden de dependencia — alias en una segunda pasada), los cambios de nombre de rutas de tokens se enrutan a la fase de actualización mediante ID de variable de ida y vuelta (sin más pares crear+eliminar que destruirían permanentemente el original bajoreplace), los valores de referencia escriben cargas útiles reales{ type: "VARIABLE_ALIAS", id }mediante un resolvedor de cuatro niveles, y las eliminaciones están estrictamente controladas detrás destrategy: "replace".figma_export_tokensganadtcgDialect: "2025"(colores en forma de objeto desde flotantes de precisión completa, dimensiones de objeto) mientras que el valor predeterminado heredado permanece byte-idéntico; la importación acepta ambos dialectos incondicionalmente con normalización de diferencias insensible al dialecto. LosscopesycodeSyntaxde variables viajan de ida y vuelta a través de$extensions["figma-console-mcp"].figma_setup_design_tokensacepta referencias de llaves DTCG ("{color.blue.600}") que se resuelven a alias reales, incluidas referencias hacia adelante. Nueva herramientafigma_create_component_setconstruye un conjunto de variantes a partir de una matriz de ejes (o combina componentes existentes) con nombresProp=Value, cuadrícula auto-ordenada opcional, y claves de variante en la respuesta — con tiempos de espera escalados por recuento y reversión en caso de fallo. Se requiere reimportación del plugin (code.js+ui.htmlcambiados — el manejador de conjuntos de componentes y la retransmisión). 183 pruebas en las suites de tokens/herramientas de escritura.v1.33.2 - Corrección de falso positivo en el apretón de manos de versión. El apretón de manos v1.33.0 comparaba la versión informada del plugin contra la versión del paquete del servidor, por lo que los lanzamientos solo de servidor (como el barrido de dependencias v1.33.1) marcaban cada plugin actualizado como obsoleto y empujaban el banner de reimportación para archivos que no habían cambiado. El servidor ahora compara contra el
PLUGIN_VERSIONincrustado en elfigma-desktop-bridge/code.jsque envía — exactamente lo que una reimportación instalaría — yPLUGIN_VERSIONahora significa "último lanzamiento en el que los archivos del plugin cambiaron" (las herramientas de lanzamiento lo aumentan solo cuandofigma-desktop-bridge/realmente cambió desde la última etiqueta).figma_get_statusganatransport.websocket.bundledPluginVersion;figma_diagnoseculpa a la versión correcta. Sin nuevas herramientas, no se requiere reimportación del plugin (excepción única: si reimportaste en v1.33.1, el banner aparece una vez más — límpialo con una reimportación final). 1245 pruebas pasando (9 nuevas).v1.33.1 - Barrido de dependencias de seguridad. Todas las alertas de auditoría de npm en tiempo de ejecución y críticas resueltas mediante aumentos dentro del rango (
ws8.21.0,hono4.12.27,undici7.28.0,handlebars4.7.9 — la única crítica, solo dev — máslodash,path-to-regexp,basic-ftp,fast-uri,vite).wranglerse mantuvo deliberadamente en 4.72.0 porque las versiones más nuevas requieren Node ≥22; los únicos hallazgos de auditoría residuales están dentro de la cadena de herramientas de desarrollo de wrangler/miniflare, que nunca se envía en el paquete npm ni en el paquete de Worker. Supera los PRs de dependabot #81/#82/#84. Sin cambios de código, sin cambios de API, sin reimportación del plugin. 1236 pruebas pasando sin cambios.v1.33.0 - Revisión de UX de conexión + auditoría de todo el código base. La píldora de estado del plugin ahora se deriva del estado de conexión en vivo en lugar de la carga de variables de Figma (solía brillar en verde con cero servidores MCP conectados); el autodescubrimiento HTTP
/healthreconecta servidores reiniciados automáticamente (incluido uno muerto entre vivos, anteriormente un callejón sin salida permanente); un apretón de manos de versión muestra un banner en la UI del plugin cuando se necesita una reimportación y revela el desajuste enfigma_get_status/figma_diagnose; la configuración de emparejamiento en la nube sobrevive al reabrir el plugin y su línea de estado se deriva y etiqueta (sin más "Desconectado" huérfano bajo una píldora verde); todo el texto del plugin está en lenguaje de diseñador. La auditoría corrigió 33 problemas verificados: viajes de ida y vuelta DTCG multimodo sin pérdidas, alias entre colecciones calificados por conjunto, TIMING/EASING mapeados aduration/cubicBezierde DTCG, dos errores de envenenamiento de caché (los informes de "la búsqueda devuelve 0 componentes"), una omisión de origen CSWSH (startsWith→ coincidencia exacta), seguridad de eliminación del recolector después de dormir (más una sonda/healthsin shell conos.devNullpara que el curl de Windows no pueda dar falso negativo a un hermano saludable), corrección de URL de rama en todas las herramientas REST, yfigma_take_screenshotprimero por puente.figma_arrange_component_setahora reorganiza variantes en su lugar para que las instancias colocadas sobrevivan. Sin nuevas herramientas; se requiere reimportación del plugin (code.js+ui.htmlcambiados — y el nuevo apretón de manos hace que esta sea la última que tienes que descubrir por ti mismo). 1236 pruebas pasando (33 nuevas).v1.32.1 - Corrección del generador de documentación informada por Robin Di Capua:
figma_generate_component_docdocumentaba colores como hex bruto (con—en la columna Variable de Figma) incluso cuando los rellenos/trazos estaban vinculados a variables, mientras que los tokens de espaciado se documentaban correctamente. Dos causas raíz — una búsqueda de id→nombre que leía las claves incorrectas (.id/.nameen lugar devariableId/variableName), y los nombres de variables solo se obtenían del endpoint REST/variables/localsolo para Enterprise (403 en otros lugares). El generador ahora resuelve nombres a través de la API del Plugin de Desktop Bridge (funciona en todos los planes) y los enhebra a través de las tablas de Estados, Tokens de Color y Espaciado, por lo que aparecen nombres de tokens reales comocolor/content/defaultyspacing/1. Sin nuevas herramientas, sin cambios de forma de argumentos, sin reimportación del plugin requerida. 1203 pruebas pasando.v1.32.0 - Corrección de exactitud de auditoría de accesibilidad informada por Isabella (colaboradora de a11y):
figma_lint_designestaba marcando la altura de línea por debajo de 1.5× como un fallo de accesibilidad en cientos de componentes. Eso malinterpreta WCAG 1.4.12 Espaciado de Texto, que requiere que el contenido soporte anulaciones de espaciado del usuario sin pérdida — no que los diseños se envíen a 1.5× — por lo que una altura de línea inferior a 1.5 no es un fallo de conformidad. Las comprobaciones de espaciado de línea/párrafo ahora se limitan a texto multilínea (las etiquetas y botones de una sola línea están exentos); las pistas de legibilidad (text-size,line-height,letter-spacing,paragraph-spacing) se desacoplan del grupowcaga un grupo opt-inbest-practice, por lo que la auditoría predeterminada (['wcag','design-system','layout']) yrules: ['wcag']devuelven solo conformidad genuina; y un nuevo aviso del lado del códigotext-spacing-supportenfigma_scan_code_accessibilitymarca tipografía en px fijos — donde 1.4.12/1.4.4 son realmente verificables. Sin nuevas herramientas, sin cambios de forma de argumentos; se requiere reimportación del plugin para recoger el nuevo comportamiento de auditoría (el protocolo del puente no cambia, por lo que un plugin no actualizado permanece compatible). 1196 pruebas pasando.v1.31.0 - Corrige el error de fiabilidad más informado: la conexión de Desktop Bridge se caía y permanecía caída hasta que cerrabas el plugin, reiniciabas tu cliente MCP o matabas los puertos a mano. La causa raíz eran procesos de servidor MCP zombis ocupando el rango de puertos WebSocket (9223–9232) después de un cierre defectuoso. El recolector ahora escala
SIGTERM→SIGKILL(un servidor colgado que ignora el cierre ordenado ya no puede sobrevivir), barre el rango cada 5 minutos mediante un recolector periódicounref'd, y un tope de cierre evita que un servidor se convierta en zombi en primer lugar. El plugin de Desktop Bridge rediseñado agrega un perro guardián de reconexión automática (re-sondea cada ~12s mientras está desconectado), un botón contextual Pausar / Reanudar / Reconectar, y una insignia de recuento de servidores en vivo. Sin nuevas herramientas; se requiere reimportación del plugin (puenteui.html+code.jscambiados). 1190 pruebas pasando, incluida una prueba de integración que genera un proceso real que ignoraSIGTERMy afirma que el recolector lo mata.v1.30.0 - Vinculación de variables nativa + tipografía en las herramientas de escritura estructuradas, cerrando las brechas de la API del Plugin que solían forzar
figma_executebruto.figma_set_fills/figma_set_strokesaceptan unvariableIdpara vincular un relleno/trazo a una variable de color mediantesetBoundVariableForPaint(cualquier plan, a través del puente).figma_set_textganafontFamily/fontStylecon normalización insensible a espacios (SemiBold→Semi Bold) y respaldo elegante deRegular.figma_instantiate_componentprecarga las fuentes de texto de la instancia antes de aplicar anulaciones (corrige anulaciones de texto silenciosamente omitidas en pesos no-Regular) y devuelve una matrizwarningspara anulaciones fallidas. También corrige un fallo de fuentes mixtas enfigma_set_texty una retransmisiónui.htmlque estaba descartando nuevos campos de mensaje. Sin nuevas herramientas; se requiere reimportación del plugin (puenteui.html+code.jscambiados). Validado en vivo; 1185 pruebas pasando.v1.29.2 - Corrección de errores:
figma_generate_component_docahora renderiza las descripciones de componentes de Figma fielmente y etiqueta de forma fiable el nivel de diseño atómico. Los encabezados de un solo#en las descripciones se renderizan como secciones reales (Pautas de Uso, Consideraciones de Implementación, Requisitos de Accesibilidad, Configuración de Contenido) en lugar de filtrarse como elementos de lista- # Encabezado; ladescriptiondel frontmatter toma la primera oración en lugar de truncarse en la palabra "Accesibilidad"; la URL de Figma generada ya no duplica?node-id=; y el nivel atómico del componente (átomo/molécula/organismo/plantilla) se detecta automáticamente mediante una única solicitud de archivoids=<node>+ retroceso de divisor, sin dependencia de la publicación de la biblioteca. Sin nuevas herramientas; no se requiere reimportación del plugin.v1.29.1 - Corrección de errores:
figma_get_design_system_kitahora resuelve variables primero por puente (Desktop Bridge / retransmisión en la nube → respaldo REST) en lugar de llamar directamente a la API REST de Variables solo para Enterprise. Los usuarios no Enterprise ya no reciben un 403 en la sección de tokens del kit cuando hay un puente conectado, y un 403 REST ahora apunta al llamador de vuelta al puente en lugar de terminar en un callejón sin salida. 7 nuevas pruebas, 1185 totales pasando. Sin nuevas herramientas; no se requiere reimportación del plugin.v1.29.0 - Inspección de bibliotecas compartidas: tres nuevas herramientas cierran la brecha entre "tengo una clave de componente" y "realmente puedo usarlo".
figma_get_library_component_by_keyresuelve cualquier clave de componente de 40 caracteres acomponentPropertyDefinitionscompletas + variantes (con sus claves publicadas) + especificaciones visuales por variante — sin necesidad de la URL del archivo de biblioteca fuente.figma_get_library_variableslista tokens de biblioteca mediante la API del Plugin (funciona en todos los planes de Figma; el equivalente REST es solo Enterprise).figma_import_library_variableimporta un token de biblioteca al archivo actual para que pueda vincularse a nodos. 27 nuevas pruebas, 1178 totales pasando. Reimportación del plugin opcional.v1.28.1 - Parche de corrección de errores que surge de pruebas en vivo de los formateadores v1.28.0 contra sistemas de diseño de tokens semánticos de múltiples niveles. Correcciones: Tailwind v3 emitía
module.exportsvacío para conjuntos solo de alias (ahora resuelve cadenas de alias a valores literales); los formateadores de módulo TypeScript + JSON plano + JSON anidado emitían cadenas"{alias.path}"como valores literales (ahora resuelven); duplicación de prefijo de espacio de nombres de Tailwind v4 (--color-theme-color-Xahora es--color-theme-X). Agrega el ayudante públicoresolveAliasChain. 1151 pruebas aún pasando.v1.28.0 - Cobertura completa de formateadores para
figma_export_tokens. Siete nuevos formatos de salida: Tailwind v4@theme inline, configuración de Tailwind v3, variables SCSS, módulo TypeScript, JSON plano/anidado, Style Dictionary v3, Tokens Studio multiarchivo. Combinado con DTCG + variables CSS, envía 10 formatos de salida completamente implementados con cero dependencias de herramientas de construcción de terceros. Descripción de la herramienta actualizada, tabla docs/tools.md toda verde. 22 nuevas pruebas Jest, 1151 totales pasando.v1.27.1 - Parche de documentación. Sin cambios de comportamiento de código. Barre afirmaciones obsoletas de "La Fase 1 se envía solo con DTCG" en descripciones de herramientas, mensajes de error y comentarios internos después de que el formateador de variables CSS y la fase de aplicación se enviaron durante el ciclo de desarrollo v1.27.0. Actualiza el banner del README + viñetas de capacidades + hoja de ruta. Agrega
Fase 3.5: Auditoría de Contenido Obsoletoal runbook de lanzamiento para que los lanzamientos futuros obtengan un barrido grep estricto previo a la publicación en banners, descripciones de herramientas, mensajes de error, comentarios de código fuente y consistencia de recuento de herramientas.v1.27.0 - Sincronización de tokens bidireccional:
figma_export_tokens+figma_import_tokensreemplazan el pipeline de exportación de Style Dictionary y Tokens Studio. JSON DTCG canónico + propiedades personalizadas CSS. Fusión consciente de diferencias con preservación de ID de ida y vuelta mediante$extensions["figma-console-mcp"]. La fase de aplicación empuja ediciones de valores hex de vuelta a Figma a través del puente del plugin. Verificado de extremo a extremo contra sistemas de diseño de 713 tokens + 280 tokens.v1.26.0 - Limpieza interna + identidad entre MCP: el transporte CDP/Puppeteer en modo Local se eliminó por completo (solo WebSocket). Herramienta
figma_diagnosepara comprobaciones de salud legibles por diseñadores. Cada respuesta etiquetada_mcp: "figma-console-mcp"; errores con prefijo[figma-console-mcp]para que la atribución sea inequívoca al ejecutar múltiples MCP de Figma. La píldora de estado del plugin ahora leeLocal · listo/Cloud · listo/Local + Cloud · listo. Diferencia neta: −7,299 líneas, reimportación del plugin opcional.v1.25.0 - Seguimiento de descripciones + anotaciones de Modo Dev en
figma_diff_versionsmediante el búfer de sesión del plugin. Las ediciones de descripción y anotación realizadas durante una sesión ahora aparecen en la salida de diferencias (la API REST no devuelve estas — se puentean a través del oyentedocumentchangedel plugin).v1.24.0 - Cobertura de alcance honesta en diferencias de versiones. El objeto
scope_coveragerevela qué rastrea y qué nofigma_diff_versions; las advertencias de cobertura siempre activas evitan invisibilidad silenciosa en cambios de valores de tokens y colocaciones de instancias de componentes.v1.23.0 - Historial de Versiones y Conciencia de Series Temporales: 6 nuevas herramientas (listar versiones, instantánea de cualquier versión pasada, comparar dos versiones para deltas de componentes/enlaces, generar registros de cambios en markdown, rastrear la introducción de propiedades/variantes mediante un caminante de culpa de búsqueda binaria). La atribución de autor fluye de los autoguardados, no solo de los lanzamientos etiquetados.
v1.17.0 - Soporte de Figma Slides: 15 herramientas para gestionar presentaciones.
v1.16.0 - Soporte de FigJam: 9 herramientas para crear y leer tableros de FigJam.
v1.12.0 - Retransmisión de escritura en la nube: los clientes de IA web pueden crear y modificar diseños de Figma sin Node.js.
v1.11.0 - Eliminación completa de CDP, seguimiento mejorado de archivos activos con detección de enfoque.
v1.10.0 - Soporte multiinstancia (respaldo de puerto dinámico 9223–9232, plugin multiconexión, descubrimiento de instancias).
v1.9.0 - Herramientas de Comentarios de Figma, detección mejorada de conflictos de puertos.
v1.8.0 - Transporte de puente WebSocket (conectividad sin CDP), seguimiento en tiempo real de selección/documento.
v1.7.0 - MCP Apps (Navegador de Tokens, Panel de Sistema de Diseño), operaciones de variables por lotes, herramientas de paridad diseño-código.
Próximamente:
Sincronización de tokens — analizadores de entrada no DTCG - Analizadores para entradas no DTCG (Tokens Studio, variables CSS, Tailwind v4, configuración de Tailwind v3, SCSS, Style Dictionary v3, JSON plano/anidado) para que
figma_import_tokenspueda consumir los mismos formatos que exporta. (La expansión de aplicación del lado de importación — creaciones, eliminaciones controladas por reemplazo, actualizaciones de destinos de alias — se incluyó en v1.34.0.)Resolución de variables entre bibliotecas - Resolver alias entre bibliotecas mediante
getVariableByIdAsyncpara que se rendericen como referencias realesvar(--target)en las exportaciones en lugar de comentarios.Biblioteca de plantillas de componentes - Generación de patrones comunes de UI
Pruebas de regresión visual - Capacidades de comparación de capturas de pantalla
💻 Desarrollo
git clone https://github.com/southleft/figma-console-mcp.git
cd figma-console-mcp
npm install
# Local mode development
npm run dev:local
# Cloud mode development
npm run dev
# Build
npm run build📄 Licencia
MIT - Consulta el archivo LICENSE para más detalles.
🔗 Enlaces
📚 Sitio de documentación — Guías completas, tutoriales y referencia de API
📖 Documentación local — Archivos fuente de la documentación
💬 Debates
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceEnables AI assistants to interact with Figma designs using natural language commands, supporting file analysis, component extraction, asset export, comment management, and design system queries through the Figma API.1,7011ISC
- AlicenseNot gradedqualityDmaintenanceEnables AI assistants to read and modify Figma designs programmatically, supporting design analysis, element creation, text replacement, annotations, auto-layout configuration, and prototype visualization through natural language commands.574MIT
- AlicenseBqualityDmaintenanceEnables AI assistants to interact with Figma designs programmatically, supporting comprehensive design automation including text manipulation with formatting preservation, batch operations, prototyping, auto-layout configuration, and component management.75314MIT
- AlicenseBqualityAmaintenanceEnables AI assistants to read, analyze, and modify Figma designs, manage design tokens, and create prototype connections, all while keeping data local.631519MIT
Related MCP Connectors
The Figma MCP server brings Figma design context directly into your AI workflow.
Connect AI coding agents to Anima Playground, Figma, and your design system.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
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/Rydvansky/figma-console-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server