🚧 Actualmente, el servidor MCP en Dev Mode está en fase beta abierta. Es posible que algunas funciones y configuraciones aún no estén disponibles. La función puede cambiar y podrías experimentar errores o problemas de rendimiento durante la versión beta.
Antes de empezar
Quién puede utilizar esta función
El servidor MCP en Dev Mode está en fase beta abierta.
Disponible en un puesto Dev o Full en los planes Profesional, Organización o Empresa.
Debes usar un editor de código o una aplicación que admite servidores MCP (por ejemplo, VS Code, Cursor, Windsurf, Claude Code).
Solo puedes usar el servidor MCP en Dev Mode desde la aplicación de Figma para escritorio. Descarga la aplicación de Figma para escritorio →
El servidor MCP en Dev Mode integra Figma en tu flujo de trabajo brindando información de diseño esencial y contexto a los agentes de IA que generan código a partir de archivos de diseño de Figma.
Los servidores MCP son parte de una interfaz estandarizada para que los agentes de IA interactúen con fuentes de datos utilizando el Protocolo de contexto de modelo.
Con el servidor habilitado, puedes hacer lo siguiente:
-
Generar código a partir de marcos seleccionados.
Selecciona un marco de Figma y conviértelo en código. Ideal para equipos de producto que desarrollan nuevos flujos o iteran en las funciones de la aplicación.
-
Extrae el contexto de diseño
Incorpora datos de disposición, componentes y variables directamente en tu IDE. Esto es especialmente útil para los sistemas de diseño y los flujos de trabajo basados en componentes.
-
Codifica de manera más inteligente con Code Connect
Mejora la calidad del resultado reutilizando tus componentes actuales. Code Connect mantiene tu código generado consistente con tu base de código.
Paso 1: Habilita el Servidor MCP
- Abre la aplicación de Figma para escritorio y asegúrate de haber actualizado a la última versión.
- Crea o abre un archivo de Figma Design.
- En la esquina superior izquierda, abre el menú de Figma.
- En Preferencias, selecciona Habilitar Servidor MCP en Dev Mode.
Deberías ver un mensaje de confirmación en la parte inferior de la pantalla que te informe que el servidor está habilitado y operativo.
El servidor se ejecuta localmente en http://127.0.0.1:3845/sse
. Ten esta dirección a mano para tu archivo de configuración en el siguiente paso.
Paso 2: Configura tu cliente MCP
Una vez que el servidor esté funcionando localmente en la aplicación de Figma para escritorio, los clientes MCP podrán conectarse a tu servidor. Sigue las instrucciones para tu cliente específico para añadir el servidor MCP en Dev Mode.
-
Ve a Código → Configuración → Configuración o usa el atajo
⌘ ,
-
En la barra de búsqueda, escribe “MCP”.
-
Selecciona Edit in settings.json.
-
Agrega la configuración de MCP en Dev Mode de Figma a tus servidores:
"chat.mcp.discovery.enabled": true, "mcp": { "servers": { "Figma Dev Mode MCP": { "type": "sse", "url": "http://127.0.0.1:3845/sse" } } }, "chat.agent.enabled": true
-
Abre la barra de herramientas del chat usando
⌥⌘B
o⌃⌘I
y cambia al modo Agente. -
Abre el menú de herramientas de selección y busca una sección etiquetada como:
Servidor MCP: MCP en Dev Mode de Figma
. Si no aparecen herramientas, reinicia la aplicación de Figma para escritorio y VS Code.
Nota: Debes tener GitHub Copilot habilitado en tu cuenta para usar MCP en VS Code.
Para más detalles, consulta la documentación oficial de VS Code.
-
Abre Cursor → Configuración → Configuración del cursor.
-
Ve a la pestaña MCP.
-
Haz clic en + Añadir nuevo servidor MCP global.
-
Ingresa la siguiente configuración y guárdala:
{ "mcpServers": { "Figma": { "url": "http://127.0.0.1:3845/sse" } } }
Para más detalles, consulta la documentación oficial de Cursor.
- Abre Windsurf → Configuración → Configuración de Windsurf o usa el atajo
⌘ ,
. - Dirígete a Configuración de Cascade y selecciona Abrir tienda de plugins.
- Busca Figma e instala el plugin.
- Abre Cascade y deberías ver el servidor MCP de Figma y las herramientas disponibles.
Nota: Para Windsurf, cambia la propiedad de URL
en el archivo de configuración a serverUrl
para evitar errores.
- Abre tu terminal y ejecuta:
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
- Utiliza los siguientes comandos para verificar la configuración de MCP y administrar servidores:
- Enumera todos los servidores configurados
claude mcp list
- Obtener detalles de un servidor específico
claude mcp get my-server
- Eliminar un servidor
claude mcp remove my-server
- Enumera todos los servidores configurados
Otros editores de código y herramientas que admiten SSE (Server-Sent Events) también pueden conectarse al servidor MCP en Dev Mode.
Si estás usando otro editor o herramienta, revisa su documentación para confirmar que admite la comunicación basada en SSE. En ese caso, puedes agregar el servidor MCP en Dev Mode manualmente usando esta configuración:
{
"mcpServers": {
"Figma Dev Mode MCP": {
"url": "http://127.0.0.1:3845/sse"
}
}
}
Nota: El servidor MCP en Dev Mode se comunica mediante el protocolo SSE. Usa los pasos de tu editor para configurar un servidor MCP compatible con SSE y usa la URL: http://localhost:3845/sse
Una vez configurado, actualiza o inicia el servidor. Deberías ver una conexión exitosa y las herramientas disponibles. Si la conexión falló o no ves ninguna herramienta, verifica que el servidor esté activo en la aplicación de Figma para escritorio.
Paso 3: Indica a tu cliente MCP
El servidor MCP en Dev Mode introduce un conjunto de herramientas que ayudan a los LLM a traducir diseños en Figma. Una vez conectado, puedes indicarle a tu cliente MCP que acceda a un nodo de diseño específico.
Hay dos maneras de proporcionar contexto de diseño de Figma a tu cliente de IA:
Basado en la selección
- Selecciona un marco o una capa dentro de Figma usando la aplicación de escritorio.
- Solicita a tu cliente que te ayude a implementar tu selección actual.
Basado en los enlaces
- Copia el enlace a un marco o capa en Figma.
- Solicita a tu cliente que te ayude a implementar el diseño en la URL seleccionada.
Nota: Tu cliente no podrá navegar a la URL seleccionada, pero extraerá el ID de nodo que el servidor MCP necesita para identificar sobre qué objeto debe devolver información.
Herramientas y sugerencias de uso
get_code
Usa esto para generar código para tu selección de Figma con el servidor MCP. La salida predeterminada es React + Tailwind, pero puedes personalizarla con tus indicaciones:
-
Modifica el marco
- "Genera mi selección de Figma en Vue".
- "Genera mi selección de Figma en HTML simple + CSS".
- "Genera mi selección de Figma en iOS".
-
Usa tus componentes
- "Genera mi selección de Figma usando componentes de src/components/u"
- "Genera mi selección de Figma usando componentes de src/ui y estilo con Tailwind"
Puedes pegar enlaces o seleccionar el marco o componente en Figma antes de las indicaciones.
Te mostramos cómo configurar Code Connect para optimizar la reutilización de los componentes →
get_variable_defs
Devuelve las variables y estilos utilizados en tu selección, como colores, espaciado y tipografía.
- Enumera todos los tokens empleados
- "Obtén las variables usadas en mi selección de Figma".
- Concéntrate en un tipo específico
- "¿Qué variables de color y espaciado se usan en mi selección de Figma?"
- Obtén tanto los nombres como los valores
- "Enumera los nombres de las variables y sus valores usados en tu selección de Figma".
get_code_connect_map
Recupera una asignación entre los ID de nodo de Figma y sus componentes de código correspondientes en tu código base. Específicamente, devuelve un objeto en que cada clave es un ID de nodo de Figma, y el valor contiene:
-
codeConnectSrc
: La ubicación del componente en tu código base (por ejemplo, una URL o ruta de archivo). -
codeConnectName
: El nombre del componente en tu código base.
Esta asignación se utiliza para conectar los elementos de diseño de Figma con sus implementaciones en React (u otro marco), lo que permite flujos de trabajo de diseño a código sin interrupciones y asegura que se utilicen los componentes correctos para cada parte del diseño. Si un nodo de Figma está conectado a un componente de código, esta función te ayuda a identificar y utilizar el componente exacto en tu proyecto.
get_image
Para usar esta herramienta, ve a Preferencias > Configuración del servidor MCP en Dev Mode > Activar herramienta get_image
Esto toma una captura de pantalla de tu selección para conservar la fidelidad de la disposición. Mantén esto activado, a menos que estés gestionando los límites de tokens.
Configuración del servidor MCP en Dev Mode
Estas son configuraciones adicionales que puedes activar o desactivar en Preferencias y usar con el cliente MCP
Activa la herramienta get_image
- Usa marcadores de posición: Omite la extracción de imágenes y agrega marcadores de posición genéricos en su lugar, lo que es útil si prefieres intercambiarlos manualmente en el código. De lo contrario, extrae imágenes reales de tu archivo.
Habilitar Code Connect
Incluye las asignaciones de Code Connect en la respuesta, de modo que el código generado pueda reutilizar los componentes de tu código base conectado siempre que sea posible.
A medida que uses el servidor MCP en Dev Mode, es posible que veas una ventana emergente dentro de Figma que te solicita feedback. Para brindarlo, usa este formulario.
Prácticas recomendadas de MCP
La calidad del código generado depende de varios factores. Algunos controlados por ti, y otros por las herramientas que estás utilizando. A continuación, encontrarás algunas sugerencias para obtener resultados organizados y consistentes.
Organiza tu archivo de Figma para optimizar el código
Proporciona el mejor contexto para tu intención de diseño, de modo que el MCP y tu asistente de IA puedan generar un código que sea claro y consistente, y esté alineado con tu sistema.
-
Usa componentes para cualquier cosa reutilizada (botones, tarjetas, entradas, etc.)
-
Vincula componentes a tu código base a través de Code Connect. Esta es la mejor manera de lograr un uso consistente de componentes en el código. Sin eso, el modelo está adivinando.
-
Usa variables para el espaciado, el color, el radio y la tipografía.
-
Nombra las capas semánticamente (por ejemplo,
CardContainer
, noGroup 5
) -
Usa la Disposición automática para comunicar la intención de diseño adaptable.
Consejo: Cambia el tamaño del marco en Figma para comprobar que se comporta como se espera antes de generar el código.
-
Usa anotaciones y recursos de desarrollo para transmitir la intención del diseño que es difícil de capturar solo a partir de los elementos visuales, como el comportamiento, la alineación o la respuesta esperados.
Escribe indicaciones efectivas para guiar a la IA
El MCP brinda a tu asistente de IA datos estructurados de Figma, pero tu indicación determina el resultado. Las buenas indicaciones pueden hacer lo siguiente:
- Alinear el resultado con tu marco o sistema de diseño.
- Seguir las convenciones de nomenclatura y la estructura de los archivos.
- Agregar código a rutas específicas (por ejemplo,
src/components/ui
) - Añadir o modificar el código en los archivos existentes en lugar de crear nuevos.
- Seguir sistemas de disposición específicos (por ejemplo, cuadrícula, flexbox, absoluto).
Ejemplos:
- “Genera código SwiftUI para iOS desde este marco”
- “Usa la UI de Chakra para esta disposición”
- “Usa componentes de
src/components/ui
” - “Añade esto a
src/components/marketing/PricingCard.tsx
" - “Usa nuestro componente de disposición
Stack
”
Piensa en las indicaciones como un breve resumen para un compañero de equipo. Una intención clara conduce a mejores resultados.
Activa herramientas específicas cuando sea necesario
El MCP es compatible con diferentes herramientas, y cada una brinda a tu asistente de IA un tipo diferente de contexto estructurado. A veces, el asistente no elige el correcto automáticamente, en especial a medida que hay más herramientas disponibles. Si los resultados no son correctos, intenta ser explícito en tu indicación.
- get_code brinda una representación estructurada de React + Tailwind de tu selección en Figma. Este es un punto de partida que tu asistente de IA puede traducir a cualquier marco o estilo de código, dependiendo de tu indicación.
- get_variable_defs extrae las variables y estilos utilizados en tu selección (color, espaciado, tipografía, etc.). Esto ayuda al modelo a referenciar tus tokens en el código generado.
Por ejemplo, si estás recibiendo código sin procesar en lugar de tokens, intenta algo como:
- "Obtén los nombres y valores de las variables utilizados en este marco".
Agrega reglas personalizadas
Establece directrices a nivel de proyecto para mantener la consistencia del resultado, tal como las notas de incorporación para un nuevo desarrollador. Estas son cosas como:
- Primitivas de disposición preferidas
- Organización de archivos
- Patrones de nomenclatura
- Qué no se debe codificar
Puedes proporcionar esto en cualquier formato que tu cliente de MCP use para los archivos de instrucciones.
Ejemplos:
---
descripción: Reglas del MCP en Dev Mode de Figma
globs:
alwaysApply: true
---
- El servidor MCP en Dev Mode de Figma proporciona un extremo para recursos que puede servir recursos de imagen y SVG.
- IMPORTANTE: Si el servidor MCP en Dev Mode de Figma devuelve una fuente localhost para una imagen o un SVG, usa esa imagen o fuente SVG.
- IMPORTANTE: NO importes o agregues nuevos paquetes de íconos, todos los recursos deben estar en la carga útil de Figma.
- IMPORTANTE: NO uses ni crees marcadores de posición si se proporciona una fuente localhost.
# Servidores MCP
## Reglas de MCP en Dev Mode de Figma
- El servidor MCP en Dev Mode de Figma proporciona un extremo para recursos que puede servir recursos de imagen y SVG.
- IMPORTANTE: Si el servidor MCP en Dev Mode de Figma devuelve una fuente localhost para una imagen o un SVG, usa esa imagen o fuente SVG.
- IMPORTANTE: NO importes o agregues nuevos paquetes de íconos, todos los recursos deben estar en la carga útil de Figma.
- IMPORTANTE: NO uses ni crees marcadores de posición si se proporciona una fuente localhost.
- IMPORTANTE: Usa componentes de `/path_to_tu_design_system` siempre que sea posible.
- Prioriza la fidelidad de Figma para que coincida exactamente con los diseños.
- Evita los valores codificados, usa tokens de diseño de Figma donde estén disponibles.
- Cumple con los requisitos de accesibilidad WCAG.
- Añade documentación del componente.
- Coloca los componentes de UI en `/path_to_tu_design_system`; evita los estilos en línea, a menos que sea realmente necesario.
Agregar estos una vez puede reducir drásticamente la necesidad de indicaciones repetitivas y garantiza que tus compañeros de equipo o agentes sigan las mismas expectativas de forma consistente.
Asegúrate de revisar la documentación de tu IDE o cliente MCP para saber cómo estructurar las reglas y experimenta para encontrar lo que mejor funcione para tu equipo. Una guía clara y consistente a menudo produce un código mejor y más reutilizable con menos idas y vueltas.
Divide selecciones grandes
Divide las pantallas en partes más pequeñas (como componentes o fragmentos lógicos) para obtener resultados más rápidos y confiables.
Las selecciones grandes pueden ralentizar las herramientas, causar errores o provocar respuestas incompletas, especialmente cuando hay demasiado contexto para que el modelo lo procese. En cambio:
- Genera código para secciones más pequeñas o componentes individuales (por ejemplo, Tarjeta, Encabezado, Barra lateral).
- Si te parece lento o se atasca, reduce el tamaño de la selección.
Esto ayuda a que el contexto sea manejable y los resultados, más previsibles, tanto para ti como para el modelo.
Si algo en el resultado no se ve del todo bien, generalmente, es útil revisar lo básico: cómo está estructurado el archivo de Figma, cómo está redactada la indicación y qué contexto se está enviando. Seguir las prácticas recomendadas mencionadas puede marcar una gran diferencia y, a menudo, conduce a un código más consistente y reutilizable.