🚧 El servidor MCP en Dev Mode está actualmente en beta abierta. Es posible que algunas funciones y configuraciones aún no estén disponibles. La función puede cambiar y podrías experimentar bugs o problemas de rendimiento durante el período beta.
Antes de empezar
Quién puede utilizar esta función
El servidor MCP en Dev Mode está en beta abierta.
Disponible en un puesto Dev o Full en los planes Profesional, Organización o Empresa
Debes utilizar un editor de código o una aplicación que admita Servidores MCP (es decir, VS Code, Cursor, Windsurf, Claude Code)
Solo puedes usar el servidor MCP de Dev Mode desde la aplicación de escritorio de Figma. Descargar la aplicación de escritorio de Figma →
El servidor MCP de Dev Mode integra Figma directamente en tu flujo de trabajo proporcionando información y contexto de diseño cruciales a los agentes de IA que generan código a partir de los archivos de diseño de Figma.
Los servidores MCP son parte de una interfaz estandarizada que permite a los agentes de IA interactuar con las fuentes de datos utilizando el Protocolo de contexto de modelo.
Con el servidor habilitado, puedes:
-
Generar código desde los marcos seleccionados
Selecciona un marco de Figma y conviértelo en código. Ideal para los equipos de productos que crean nuevos flujos o repiten las funciones de la aplicación.
-
Extraer contexto de diseño
Introduce variables, componentes y datos de disposición directamente en tu IDE. Esto es especialmente útil para los sistemas de diseño y los flujos de trabajo basados en componentes.
-
Programa de manera más inteligente con Code Connect
Aumenta la calidad de salida reutilizando tus componentes reales. Code Connect mantiene la coherencia del código generado con el código base.
Paso 1: activar el Servidor MCP
- Abre la aplicación de escritorio de Figma y asegúrate de que la has 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 indique que el servidor está habilitado y funcionando.
El servidor se ejecuta localmente en http://127.0.0.1:3845/sse
. Mantén 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 escritorio de Figma, los clientes MCP podrán conectarse a tu servidor. Sigue las instrucciones de tu cliente para añadir el servidor MCP en Dev Mode.
-
Ve a Code → Configuración → Ajustes o usa el atajo
⌘ ,
-
En la barra de búsqueda, escribe «MCP».
-
Selecciona Editar en settings.json.
-
Añade la configuración de MCP del 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": verdadero
-
Abre la barra de herramientas del chat usando
⌥⌘B
o⌃⌘I
y cambia al modo Agente. -
Abre el menú herramienta de selección y busca una sección etiquetada:
Servidor MCP: Figma Dev Mode MCP
. Si no aparece una lista de herramientas, reinicia la aplicación de escritorio de Figma y VS Code.
Nota: debes tener GitHub Copilot habilitado en tu cuenta para usar MCP en VS Code.
Para obtener más información, 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.
-
Introduce la siguiente configuración y guárdala:
{ "mcpServers": { "Figma": { "url": "http://127.0.0.1:3845/sse" } } }
Para más información, consulta la documentación oficial del cursor.
- Abre Windsurf → Configuración → Configuración de Windsurf o usa el atajo
⌘ ,
. - Ve a configuración de Cascade y selecciona Abrir tienda de plugins.
- Busca Figma e instala el complemento.
- Abra Cascade: 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
- Usa los siguientes comandos para comprobar la configuración de MCP y administrar servidores:
- Enumera todos los servidores configurados
lista de claude mcp
- Obtén detalles de un servidor específico
claude mcp obtener mi-servidor
- Eliminar un servidor
claude mcp eliminar mi-servidor
- Enumera todos los servidores configurados
Otros editores de código y herramientas compatibles con SSE (eventos enviados por el servidor) también pueden conectarse al servidor MCP del Dev Mode.
Si estás utilizando un editor o herramienta diferente, revisa su documentación para confirmar que admite la comunicación basada en SSE. Si es así, puedes añadir manualmente el servidor MCP de Dev Mode 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 a través del protocolo SSE. Sigue 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ía ver una conexión correcta y las herramientas disponibles. Si la conexión falla o no ves ninguna herramienta, verifica que el servidor esté activo en la aplicación de escritorio de Figma.
Paso 3: indica a tu cliente MCP
El servidor MCP de Dev Mode introduce un conjunto de herramientas que ayudan a los LLMs a traducir diseños en Figma. Una vez conectado, puedes indicarle a su cliente MCP que acceda a un nodo de diseño específico.
Hay dos maneras de proporcionar el contexto de Figma Design a tu cliente de IA:
Basado en la selección
- Selecciona un marco o una capa en Figma usando la aplicación de escritorio.
- Solicita a tu cliente que te ayude a implementar tu selección actual.
Basado en 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á la identificación del nodo necesaria para que el servidor MCP identifique sobre qué objeto debe devolver información.
Herramientas y sugerencias de uso
get_code
Utiliza esto para generar código para tu selección de Figma usando el servidor MCP. La salida predeterminada es React + Tailwind, pero puedes personalizarla mediante tus indicaciones:
-
Cambia 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».
-
Utiliza tus componentes
- «Genera mi selección de Figma usando componentes de src/components/ui»
- «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 iniciar las indicaciones.
Aprende a configurar Code Connect para una mejor reutilización de componentes →
get_variable_defs
Devuelve las variables y estilos utilizados en tu selección, como colores, espaciado y tipografía.
- Enumera todos los tokens usados
- «Obtén las variables utilizadas 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 mi selección de Figma».
get_code_connect_map
Recupera una correspondencia entre los ID de nodo de Figma y sus componentes de código correspondientes en tu base de código. Específicamente, devuelve un objeto donde cada clave es una ID de nodo de Figma, y el valor contiene:
-
codeConnectSrc
: la ubicación del componente en tu código base (por ejemplo, una ruta de archivo o un URL). -
codeConnectName
: el nombre del componente en tu base de código.
Esta asignación se utiliza para conectar elementos de diseño de Figma directamente a sus implementaciones de React (u otro marco), lo que permite flujos de trabajo de diseño a código eficientes y garantiza 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 utilizar esta herramienta, dirígete a Preferencias > Configuración del servidor MCP en Dev Mode > Habilitar la herramienta get_image
Esto toma una captura de pantalla de tu selección para preservar la fidelidad del diseño. Mantenlo activado a menos que estés gestionando los límites de tokens.
Configuración del servidor MCP en Dev Mode
Estos son ajustes adicionales que puedes alternar en Preferencias y usar con el cliente MCP
Activa la herramienta get_image
- Usar marcadores de posición: omite la extracción de imágenes y añade marcadores de posición genéricos en su lugar, lo cual 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 componentes de tu base de código conectada siempre que sea posible.
Al utilizar el servidor MCP en Dev Mode, es posible que aparezca una ventana emergente dentro de Figma pidiendo tus comentarios. Utiliza este formulario para compartir tu opinión con nosotros.
Prácticas recomendadas de MCP
La calidad del código generado depende de varios factores. Algunos los controlas tú, y otros las herramientas que estás usando. Aquí tienes algunas sugerencias para obtener resultados limpios y coherentes.
Organiza tu archivo de Figma para un mejor código
Proporciona el mejor contexto para tu intención de diseño, para que el MCP y tu asistente de IA puedan generar un código que sea claro, coherente y esté alineado con tu sistema.
-
Usa componentes para cualquier elemento reutilizado (botones, tarjetas, entradas, etc.)
-
Vincula componentes a tu base de código a través de Code Connect. Esta es la mejor manera de lograr una reutilización coherente de componentes en el código. Sin esto, el modelo tiene que adivinar.
-
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: redimensiona el marco en Figma para verificar que se comporte como se espera antes de generar 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 de algo.
Escribe instrucciones efectivas para guiar a la IA
MCP proporciona a tu asistente de IA datos estructurados de Figma, pero tu indicación impulsa el resultado. Unas buenas indicaciones pueden:
- Alinear el resultado con tu marco de trabajo o sistema de estilo.
- Seguir la estructura de archivos y las convenciones de nombres
- Añade código a rutas específicas (p. ej.
src/components/ui
) - Añade o modifica el código en los archivos existentes en lugar de crear nuevos
- Sigue sistemas de disposición específicos (por ejemplo cuadrícula, flexbox, absoluto)
Ejemplos:
- «Genera código SwiftUI de iOS desde este marco»
- «Usa Chakra UI para este diseño»
- «Usa componentes
src/components/ui
» - «Añade esto a
src/components/marketing/PricingCard.tsx
» - «Utiliza nuestro componente de disposición
Stack
»
Piensa en las indicaciones como si fueran instrucciones para un compañero de equipo. Una intención clara lleva a mejores resultados.
Desencadena herramientas específicas cuando sea necesario
El MCP admite diferentes herramientas, y cada una proporciona a tu asistente de IA un tipo diferente de contexto estructurado. A veces, el asistente no selecciona automáticamente la opción correcta, especialmente a medida que hay más herramientas disponibles. Si los resultados están desactivados, intenta ser explícito en tu indicación.
- get_code ofrece 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 de trabajo o estilo de código, dependiendo de tu indicación.
- get_variable_defs extrae las variables y estilos usados en tu selección (color, espaciado, tipografía, etc.). Esto ayuda al modelo a referenciar tus tokens directamente en el código generado.
Por ejemplo, si estás obteniendo código sin procesar en lugar de tokens, prueba algo como:
- «Obtén los nombres y valores de las variables usadas en este marco»
Añadir reglas personalizadas
Establece directrices a nivel de proyecto para mantener la coherencia 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 use tu cliente MCP para los archivos de instrucciones.
Ejemplos:
---
Descripción: Reglas del MCP en Dev mode de Figma
globs:
alwaysApply: verdadero
---
- El servidor MCP en Dev Mode de Figma proporciona un extremo de activos que puede servir activos de imagen y SVG
- IMPORTANTE: Si el servidor MCP en Dev mode de Figma devuelve una fuente de host local para una imagen o un SVG, use esa imagen o fuente SVG directamente
- IMPORTANTE: NO importe/añada nuevos paquetes de iconos, todos los recursos deben estar en la carga útil de Figma
- IMPORTANTE: NO utilice ni cree marcadores de posición si se proporciona una fuente de anfitrión local
# Servidores MCP
## Reglas del MCP en Dev mode de Figma
- El servidor MCP en Dev Mode de Figma proporciona un extremo de activos que puede servir activos de imagen y SVG
- IMPORTANTE: Si el servidor MCP en Dev mode de Figma devuelve una fuente de host local para una imagen o un SVG, use esa imagen o fuente SVG directamente
- IMPORTANTE: NO importe/añada nuevos paquetes de iconos, todos los recursos deben estar en la carga útil de Figma
- IMPORTANTE: NO utilice ni cree marcadores de posición si se proporciona una fuente de anfitrión local
- IMPORTANTE: Usa siempre 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, utiliza tokens de diseño de Figma siempre que estén disponibles
- Cumple con los requisitos de accesibilidad WCAG
- Añade documentación del componente
- Sitúa los componentes de la interfaz de usuario en `/path_to_tu_design_system`; evita los estilos en línea a menos que sea realmente necesario
Añadirlos una vez puede reducir drásticamente la necesidad de indicaciones repetitivas y garantiza que los compañeros de equipo o los agentes sigan sistemáticamente las mismas expectativas.
Asegúrate de consultar la documentación de tu cliente IDE o MCP para saber cómo estructurar las reglas y experimentar para encontrar lo que mejor funciona para tu equipo. Una orientación clara y coherente suele dar lugar a un código mejor y más reutilizable, con menos idas y venidas.
Desglosar las grandes selecciones
Divide las pantallas en partes más pequeñas (como componentes o fragmentos lógicos) para obtener resultados más rápidos y fiables.
Las selecciones grandes pueden ralentizar las herramientas, causar errores o resultar en respuestas incompletas, especialmente cuando hay demasiado contexto para que el modelo lo procese. En su lugar:
- Genera código para secciones más pequeñas o componentes individuales (por ejemplo, Tarjeta, Encabezado, Barra lateral
- Si parece lento o atascado, reduce el tamaño de tu selección
Esto ayuda a mantener el contexto manejable y los resultados más predecibles, tanto para ti como para el modelo.
Si algo en el resultado no parece del todo correcto, generalmente ayuda volver a lo básico: cómo está estructurado el archivo de Figma, cómo está redactado el mensaje y qué contexto se está enviando. Seguir las prácticas recomendadas mencionadas puede marcar una gran diferencia y, a menudo, lleva a un código más coherente y reutilizable.