Si encontró esto al buscar "figma mcp server no se conecta" o "dónde está el interruptor MCP en Figma", está en el lugar adecuado. La mayoría de los primeros intentos de configurar el servidor MCP de Figma fallan por las mismas dos razones: faltan requisitos previos y se omite el paso de autenticación posterior a la configuración. Es posible que el interruptor que busca ni siquiera aparezca todavía, y eso no tiene nada que ver con la herramienta que está usando.
Configurar correctamente el servidor MCP de Figma, ya sea remoto o de escritorio, requiere una secuencia específica y algunos requisitos previos poco evidentes que la mayoría de las guías de configuración omiten por completo. Por eso fallan la mayoría de los primeros intentos.
El interruptor no aparecerá hasta que lea esto
- Empiece con el servidor MCP remoto: funciona en todos los planes y evita el requisito de la aplicación de escritorio.
- El obstáculo más frecuente: Dev Mode es una función de pago, y la autenticación del servidor MCP remoto debe completarse en el navegador antes de que se conecte nada.
- Las cuentas gratuitas de Figma no pueden acceder en absoluto a las funciones del servidor MCP de Dev Mode: este es el requisito previo que la mayoría de las guías oculta u omite.
Qué hace realmente el servidor MCP de Figma por su flujo de trabajo
El servidor MCP de Figma es una implementación del protocolo de contexto de modelo, un estándar abierto que permite a los clientes de IA consumir contexto estructurado de herramientas externas. En la práctica, incorpora Figma directamente al flujo de trabajo de desarrollo al proporcionar a las herramientas de programación con IA compatibles con MCP acceso estructurado a sus archivos de diseño: no capturas de pantalla ni exportaciones, sino árboles de componentes reales, tokens de diseño, restricciones de diseño y datos de variantes.
Sin él, un asistente de programación con IA adivina a partir de lo que usted pegue. Con él, la herramienta puede ver el contexto real del diseño y ayudar a los LLM a generar código fundamentado en el diseño que refleje su sistema de diseño real. Esa es la diferencia. La diferencia entre "genera un componente de React" e "implementa este frame como un componente de React usando los tokens y el diseño que puedo leer ahora mismo" es la diferencia entre código que necesita tres rondas de revisión y código que, en gran medida, funciona en el primer intento. Don't Panic Labs documentó claramente este cambio: pasar de las conjeturas al contexto estructurado es el cambio real que MCP aporta a la transferencia de diseño a código.
Lo que necesita antes de poder conectar el servidor MCP de Figma
Antes de tocar archivos de configuración, compruebe todo lo siguiente. Si falta uno, perderá 45 minutos depurando algo que en realidad no está roto.
Un plan de pago de Figma apto para las funciones de escritorio y Dev Mode
Los usuarios del plan gratuito de Figma no pueden acceder en absoluto a Dev Mode, lo que significa que la opción del servidor MCP de escritorio simplemente no está disponible. Si tiene un plan gratuito y desea conectar Figma a una herramienta de IA, el servidor remoto es su única vía.
La aplicación de escritorio de Figma, instalada y actualizada, para la opción de servidor local
El servidor MCP de escritorio se ejecuta dentro de la aplicación de escritorio de Figma. Si solo utiliza la versión de navegador, el interruptor del servidor local no existe para usted. Primero descargue y actualice Figma Desktop.
Un cliente MCP compatible con MCP para la opción de servidor remoto
No todas las herramientas de programación con IA admiten el protocolo de contexto de modelo. Las que sí lo admiten incluyen Claude Code, Cursor, VS Code con GitHub Copilot habilitado y Codex. Si sus herramientas de programación actuales no están en esa lista, el servidor no tendrá nada a lo que conectarse.
Permisos de cuenta de Figma para acceder al archivo de Figma objetivo
El paso de autenticación OAuth fallará silenciosamente si su cuenta no tiene al menos acceso de visualización al archivo que intenta consultar. Compruebe los permisos del archivo antes de depurar la conexión.
GitHub Copilot habilitado en VS Code antes de añadir Figma MCP
Este requisito suele sorprender. El desarrollador debe tener Copilot activo, no solo instalado, para que el servidor MCP de Figma funcione en VS Code. La conexión parece realizarse correctamente, pero las llamadas a herramientas no devuelven nada.
Cómo habilitar Dev Mode y el servidor MCP en Figma
La secuencia importa más de lo que la mayoría de las guías reconocen. El interruptor del servidor MCP en Figma no está en el menú principal de configuración. Solo aparece dentro de un archivo que está activamente en Dev Mode, y únicamente después de cambiar primero ese archivo a Dev Mode. Este patrón aparece constantemente: alguien abre las preferencias de Figma buscando una sección de MCP, no encuentra nada, concluye que la función no está disponible en su plan y abre un ticket. Por lo general, el archivo simplemente aún no está en Dev Mode.
Este es el orden correcto:
Paso 1: Abra el archivo de Figma objetivo. Vaya al archivo donde están sus diseños, aquel desde el que trabajará su desarrollador.
Paso 2: Cambie a Dev Mode. En la barra de herramientas de la esquina superior derecha, busque el interruptor que permite cambiar entre Design Mode y Dev Mode. Haga clic en él. La interfaz cambia: verá paneles orientados al código, herramientas de anotación y metadatos para desarrolladores. Si el interruptor no está ahí, su cuenta o plan no tiene acceso a Dev Mode. Esa es la barrera de pago. No hay alternativa en la opción de escritorio.
Paso 3: Busque el interruptor del servidor MCP. Ahora que está en Dev Mode, busque en la configuración del panel o en la sección de herramientas para desarrolladores. El servidor MCP de Figma proporciona un interruptor específico para habilitar el endpoint MCP; solo se muestra cuando Dev Mode está activo en el archivo. Actívelo.
La ubicación de este interruptor no es evidente. No aparece en la configuración de la cuenta, en los menús de plugins ni en ningún lugar donde la gente espera encontrar la configuración del servidor. Figma lo colocó dentro de la vista del archivo en Dev Mode porque el servidor MCP está limitado a contenido específico de Figma, no a toda su cuenta. En realidad, es una decisión de diseño razonable. Simplemente no coincide con el lugar donde la gente lo busca la primera vez que las herramientas de programación lo necesitan.
Habilitar el servidor MCP de escritorio y copiar la URL del servidor local
Una vez que active el interruptor en Dev Mode, la aplicación de escritorio de Figma genera una URL de servidor local. Tiene un aspecto similar a http://127.0.0.1:[port], con un número de puerto específico asignado en tiempo de ejecución. Debe copiar esta URL y pegarla en la configuración MCP de su editor de código.
Este es el paso que suele omitirse. El servidor MCP de escritorio comienza a ejecutarse, todo parece correcto dentro de Figma y, después, nada se conecta en el IDE. El motivo es que la configuración de su servidor MCP en el IDE aún no sabe dónde buscar. Copie la URL completa del servidor local desde el panel de Dev Mode de la aplicación de escritorio de Figma, abra la configuración de su editor y péguela como endpoint del servidor. Sin ese pegado, solo estará conectado al MCP de Figma en teoría. La herramienta de programación y Figma se ejecutan en universos separados.
Configurar el servidor MCP remoto: la vía recomendada
Para la mayoría de las configuraciones, empiece aquí. El servidor remoto en https://mcp.figma.com/mcp es la vía que Figma recomienda porque no requiere la aplicación de escritorio de Figma, funciona desde cualquier cliente compatible con MCP y está disponible en más tipos de planes que la ruta de escritorio/Dev Mode.
El patrón general para añadirlo es el siguiente: en su herramienta compatible con MCP, agregue una nueva entrada de servidor MCP que apunte a https://mcp.figma.com/mcp. La forma de hacerlo depende de la herramienta: Claude Code, Cursor, VS Code y Codex tienen interfaces ligeramente distintas para ello, que se explican más abajo. Sin embargo, el patrón es el mismo en todos: añada la URL, inicie la autenticación y complétela en el navegador.
Esa última parte no es opcional. Añadir la URL no equivale a conectar el servidor. La autenticación es un paso obligatorio independiente que ocurre en una ventana del navegador después de la configuración. En Claude Code, por ejemplo, ejecute /mcp después de añadir el servidor para confirmar el estado de la conexión. Si ve el servidor MCP de Figma listado sin errores de autenticación, está conectado. Si lo ve con un estado desconectado o pendiente, la autenticación en el navegador aún no se ha completado.
En herramientas agénticas como Claude Code, el agente de IA utiliza Figma como una herramienta a la que puede llamar durante una sesión. Una vez conectado y autenticado, puede ver el servidor MCP de Figma en su lista de herramientas disponibles y consultar el contexto del diseño directamente. Las nuevas entradas de servidor MCP aparecen en el panel de herramientas inmediatamente después de una autenticación correcta. La falta de autenticación es el principal modo de fallo aquí, y es el que la mayoría de las guías de configuración trata como una casilla de verificación en lugar de como un paso secuencial obligatorio.
🤔 Espere.
Añadir la URL del servidor a su configuración no significa que el servidor esté conectado. La autenticación debe completarse en el navegador durante la misma sesión: el servidor MCP de Figma permanece desconectado hasta que se apruebe OAuth, independientemente de lo correctamente que se haya introducido la URL. La configuración y la conexión son dos cosas diferentes. La mayoría de los fallos del primer intento se producen en la brecha entre ambas.
Configurar Cursor, VS Code y Codex para usar el servidor MCP de Figma
Cada herramienta de programación con IA tiene una ruta de configuración ligeramente diferente. El requisito de autenticación es idéntico en las tres; lo que cambia es dónde añade el servidor y cómo se ve la interfaz. Considere "cliente MCP" como el marco de referencia: cualquier herramienta que hable el protocolo de contexto de modelo puede conectarse, pero cada cliente de su código base tiene su propio ritual de configuración. Las herramientas impulsadas por IA que no admiten MCP de forma nativa no se conectarán independientemente de lo que configure.
Añadir el servidor MCP de Figma en Cursor
En Cursor, la vía más rápida es el método de plugin. Escriba /add-plugin figma en la barra de comandos o utilice el enlace directo de la documentación de herramientas MCP de Figma. Cualquiera de los dos métodos configura automáticamente el servidor MCP y registra el catálogo MCP de Figma de habilidades de agente para que los agentes de IA interactúen directamente con el contexto de diseño de Figma desde el editor. No necesita editar manualmente un archivo de configuración para esta vía.
Importante: la autenticación sigue siendo necesaria después de instalar el plugin. El plugin configura el lado del cliente. El lado de Figma aún necesita la aprobación OAuth. No asuma que instalar el plugin completó la conexión. No lo hizo. Ejecute una consulta de prueba y busque una solicitud de autenticación en el navegador antes de darlo por terminado.
Configurar el servidor MCP de Figma en VS Code
El protocolo de contexto de modelo es un estándar abierto, y la implementación de VS Code utiliza un archivo de configuración JSON para registrar servidores. Abra la paleta de comandos y ejecute MCP: Open User Configuration para acceder a mcp.json. Añada una entrada para Figma con la URL remota HTTPS como dirección del servidor. Guarde el archivo y, a continuación, haga clic en Start en el panel MCP. VS Code le pedirá que apruebe el acceso en una ventana del navegador; apruébelo.
Hay un requisito poco evidente: GitHub Copilot debe estar habilitado para que el servidor MCP de Figma funcione en VS Code. La interfaz estandarizada que proporciona el protocolo de contexto requiere Copilot como capa de cliente. Sin Copilot activo, la entrada del servidor aparece en la configuración, pero las herramientas de programación nunca llegan a llamarlo. Esta es una de esas situaciones en las que un protocolo es un estándar abierto y "compatible" y "funcional" no son lo mismo sin comprobar primero los requisitos previos.
Conectar Figma MCP en Codex
En Codex, utilice la interfaz de Plugins o el método CLI: codex mcp add figma --url https://mcp.figma.com/mcp. Esto registra el servidor y expone Figma como una herramienta sobre la que los agentes pueden crear consultas. Las herramientas de Figma aparecen en la interfaz de chat solo después de completar la autenticación, el mismo paso OAuth en el navegador que requiere cualquier otro cliente. Si escribe una solicitud relacionada con diseño inmediatamente después de ejecutar el comando de adición y no obtiene nada útil, compruebe primero la autenticación antes de asumir que el comando falló.
Cómo delimitar solicitudes con URL de nodos de Figma para generar mejor código
Aquí es donde la mayoría de las personas que conectan correctamente el servidor siguen obteniendo resultados mediocres. El servidor MCP de Figma puede leer todos sus archivos de diseño de Figma. Eso no significa que deba pedirle que lo haga. Dar a una herramienta de IA una URL de archivo completa es como entregar a alguien un documento de 200 páginas y pedirle que "implemente eso". La salida de código generado refleja lo que el LLM puede analizar realmente, y un archivo completo saturará la ventana de contexto o devolverá una salida genérica que ignora el frame específico que le importa.
El enfoque correcto es el siguiente: haga clic con el botón derecho en el frame, componente o capa específicos que desea implementar, seleccione "Copiar enlace a la selección" (o tome la URL de la barra de direcciones del navegador con el ID de nodo añadido) y pegue esa URL específica del frame de Figma en su solicitud. La URL del nodo indica a la herramienta conectada por MCP exactamente qué parte del componente o diseño de Figma debe leer. La generación de código resultante refleja las restricciones de diseño, los tokens de diseño y la jerarquía de componentes reales de ese nodo específico, no un promedio estadístico de todo el archivo.
Para encontrar el ID del nodo: en Figma, haga clic en un frame o capa. La URL del navegador se actualiza para incluir un parámetro node-id. Copie la URL completa. Esa es su referencia delimitada. En la aplicación de escritorio de Figma, haga clic con el botón derecho en cualquier elemento seleccionado y elija "Copiar enlace a la selección". El resultado es el mismo.
Al redactar solicitudes de código de esta manera, incluya la URL directamente en el texto de la solicitud. La herramienta de IA llamará al servidor MCP con esa referencia de nodo específica y escribirá código basándose en lo que realmente ve.
📊 En la práctica:
Una solicitud como "Implemente el diseño en [URL de Figma específica del nodo] como un componente de React usando los tokens de nuestro sistema de diseño" genera código que refleja valores de espaciado reales, tokens de tipografía y estructura de componentes. Una solicitud como "Genere un componente de React para una tarjeta" genera lo que el modelo crea que parece una tarjeta. La única diferencia es la URL. El código generado que coincide con su diseño depende casi por completo de esta única decisión de delimitación.
Ese es todo el truco. Delimite al nodo, no al archivo.
Cómo verificar que el servidor MCP de Figma está funcionando realmente
Un servidor conectado y un servidor que funciona no son lo mismo. Esto es lo que realmente significa "funcionando", para que no tenga que adivinar.
Comprobación 1: El cliente MCP muestra "figma" sin errores de autenticación. En Claude Code, ejecute /mcp. En VS Code, abra el panel MCP. En Cursor, compruebe el estado del plugin en la barra lateral. El servidor MCP expone una lista de herramientas al cliente; si ve las herramientas de Figma listadas sin estado de desconexión ni error, la conexión está activa. Si la lista muestra una advertencia de autenticación o un estado gris, vuelva al navegador y complete OAuth antes de hacer cualquier otra cosa.
Comprobación 2: Ejecute una consulta de prueba con una URL de nodo. Pegue la URL de un frame específico de Figma en una solicitud y pida al agente de IA que describa el diseño. Si devuelve contexto de diseño real, como valores de espaciado, nombres de componentes, referencias de tokens o sintaxis de color, la integración está leyendo datos reales del archivo de Figma. Si devuelve una descripción genérica o indica que no puede acceder al archivo, algo en la cadena de autenticación o permisos sigue fallando.
Comprobación 3: La salida de código refleja el sistema de diseño real. El código generado debe hacer referencia a componentes reales, tokens de diseño reales y a la estructura de diseño de su diseño de Figma. Si la salida podría haberse generado sin ningún contexto de Figma, el servidor MCP no se está llamando. Esta es la prueba de flujo de trabajo de desarrollo que ayuda a los LLM a generar código fundamentado en el diseño y que más importa en la práctica: ¿cambia la salida de código cuando delimita la solicitud a un frame diferente? Si la respuesta es sí, MCP funciona. Si la salida es idéntica independientemente de la URL de frame que pase, la herramienta no está leyendo el contexto.
Para configuraciones de escritorio: Figma muestra una confirmación de "servidor habilitado y en ejecución" en el panel de Dev Mode. Búsquela antes de realizar pruebas desde el lado del editor. Si indica que está en ejecución, pero el editor no puede conectarse, compruebe de nuevo que copió y pegó la URL del servidor local en la configuración del editor, no la URL remota mcp.figma.com.
[El registro de cambios de GitHub sobre Figma MCP también señala que, con VS Code y Copilot, puede crear y modificar contenido nativo de Figma directamente desde el editor, enviando la interfaz renderizada de vuelta como un frame editable. Si ese ciclo bidireccional es su objetivo, ya es una realidad y la misma conexión que acaba de configurar lo admite.]
Conviene conocer un patrón: si está creando pipelines de diseño a código más complejos y de varios pasos, del tipo en que el código se revisa, se envía a un repositorio y se comprueba periódicamente respecto al sistema de diseño, una herramienta como Latenode puede acompañar la conexión MCP y orquestar lo que sucede después de generar el código. AI Agent Builder de Latenode puede coordinar un agente "lector" que consulta el contexto de Figma y un agente "redactor" que genera código, con un nodo de JavaScript que posprocesa la salida para aplicar convenciones de nomenclatura antes de que nada llegue al código base. Los precios por ejecución significan que un flujo de 6 pasos como ese cuenta como una ejecución, no como seis. Conviene saberlo si ya ha superado la etapa de configuración individual y está entrando en la automatización a escala de equipo.
