Antes de empezar
Quién puede utilizar esta función
El servidor remoto está disponible en todos los puestos y planes.
El servidor de escritorio está disponible en un puesto Dev o Full para todos los planes de pago.
Debes utilizar un editor de código o una aplicación que admita servidores MCP (es decir, VS Code, Cursor, Windsurf, Claude Code). Consulta nuestro catálogo MCP para ver una lista completa de los clientes compatibles ->
Los usuarios con el plan Inicial o con puestos View o Collab en planes de pago estarán limitados a un máximo de 6 llamadas a herramientas al mes.
Los usuarios con un puesto Dev o Full en los planes Profesional, Organización o Empresa tienen límites de tasa por minuto, que siguen los mismos límites que la API REST de Figma de nivel 1. Al igual que con la API REST de Figma, Figma se reserva el derecho de cambiar los límites de tasa.
El servidor MCP de Figma ayuda a los desarrolladores a implementar diseños de forma rápida y precisa al proporcionar contexto importante a los agentes de IA que generan código a partir de archivos de Figma Design, FigJam y Make. Las herramientas del servidor MCP de Figma aportan contexto adicional de Figma a tu flujo de trabajo, de modo que tu código no solo se adapta a los sistemas existentes, sino también a tu diseño.
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.
Nota: Esta página es una descripción general del servidor MCP de Figma. Para obtener instrucciones detalladas y ejemplos de código, consulte la documentación para desarrolladores del servidor MCP de Figma →
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.
-
Recuperar recursos de FigJam
Accede al contenido de tus diagramas de FigJam y utilízalo en tu flujo de trabajo de generación de código. Incorpora ideas en fase inicial, flujos o mapas de arquitectura directamente en el desarrollo.
-
Recuperar recursos de Make
Recopila recursos de código de los archivos de Make y proporciónaselos al LLM como contexto. Esto puede resultarte útil a medida que pasas del prototipo a la aplicación de producción.
-
Mantén la coherencia de los componentes de tu sistema de diseño 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.
Configurar el servidor MCP
Puedes conectar el servidor MCP de Figma de dos maneras:
- Servidor MCP de escritorio: se ejecuta localmente a través de la aplicación de escritorio de Figma.
-
Servidor MCP remoto: se conecta directamente al terminal alojado de Figma en
https://mcp.figma.com/mcp.
Habilitar el servidor MCP de escritorio
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 barra de herramientas en la parte inferior, cambia a Dev Mode o usa el atajo de teclado ShiftD.
En la sección del servidor MCP del panel de inspección, haz clic en Habilitar el servidor MCP de escritorio.
Una vez que el servidor esté en funcionamiento, aparecerá un mensaje de confirmación en la parte inferior de la ventana.
El servidor se ejecuta localmente en http://127.0.0.1:3845/mcp. Mantén esta dirección a mano para tu archivo de configuración en el siguiente paso.
Conecta el servidor MCP a tu editor
Sigue las instrucciones de tu editor específico para conectarte al servidor MCP de Figma, ya sea de forma local o remota:
| Cliente | Compatibilidad con el servidor de escritorio | Compatibilidad con el servidor remoto |
| Amazon Q | ✓ | |
| Android Studio | ✓ | ✓ |
| Claude Code | ✓ | ✓ |
| Codex de OpenAI | ✓ | ✓ |
| Cursor | ✓ | ✓ |
| Gemini CLI | ✓ | ✓ |
| Kiro | ✓ | |
| OpenHands | ✓ | |
| Replit | ✓ | |
| VS Code | ✓ | ✓ |
| Warp | ✓ | ✓ |
Consejo: para ver la lista más reciente de editores y clientes compatibles, consulta nuestro Catálogo MCP.
Indica a tu cliente MCP
El servidor MCP de Figma introduce un conjunto de herramientas que ayudan a los LLM a traducir diseños en Figma. Una vez conectado, puedes indicar a tu 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 una selección (solo para el servidor de escritorio)
- Selecciona un marco o una capa en Figma usando la aplicación de escritorio.
- Indica 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
El servidor MCP de Figma incluye varias herramientas que ayudan a tu asistente de IA a generar, adaptar y alinear el código con tus diseños. Cada herramienta es compatible con diferentes flujos de trabajo, desde la producción de código hasta el mapeo de componentes o la recuperación de tokens de diseño. Para obtener más información sobre las herramientas disponibles y sugerencias de uso, consulte la documentación para desarrolladores del servidor MCP de Figma.
Al utilizar el servidor MCP de Figma, es posible que aparezca una ventana emergente dentro de Figma pidiéndote comentarios. Utiliza este formulario para compartir tu opinión con nosotros.