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 app que admite servidores MCP (p. ej., VS Code, Cursor, Windsurf, Claude Code). Ve nuestro catálogo MCP para una lista completa de clientes compatibles ->
Los usuarios con el plan Inicial o con puestos View o Collab en planes pagos tendrán un límite de hasta 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, los cuales 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 manera rápida y precisa al proporcionar contexto importante a los agentes de IA que generan código a partir de 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 para que los agentes de IA interactúen con 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, consulta la documentación para desarrolladores del servidor MCP de Figma →
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.
-
Recuperación de 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.
-
Recuperación de recursos de Make
Recopila recursos de código de los archivos Make y proporciónalos al LLM como contexto. Esto puede resultarte útil a medida que pasas del prototipo a la aplicación de producción.
-
Mantén la consistencia de los componentes de tu sistema de diseño 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.
Configuración del servidor MCP
Puede conectar el servidor Figma MCP de dos maneras:
- Servidor MCP de escritorio: se ejecuta localmente a través de la app de escritorio de Figma.
-
Servidor MCP remoto: se conecta directamente al terminal alojado de Figma en
https://mcp.figma.com/mcp.
Habilitación del servidor MCP de escritorio
Abre la app 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 barra de herramientas en la parte inferior, cambia a Dev Mode o utiliza el atajo de teclado ShiftD.
En la sección del servidor MCP del panel de inspección, haz clic en Habilitar 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. Ten a la mano esta dirección para tu archivo de configuración en el siguiente paso.
Conexión del servidor MCP con tu editor
Sigue las instrucciones para tu editor específico para conectarte al servidor MCP de Figma, ya sea de manera 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.
Indicación a tu cliente MCP
El servidor MCP de Figma presenta 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 una selección (solo para el servidor de escritorio)
- Selecciona un marco o una capa dentro de Figma usando la aplicación de escritorio.
- Indica 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
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 herramientas disponibles y sugerencias de uso, consulta la documentación para desarrolladores del servidor MCP de Figma.
A medida que uses el servidor MCP de Figma, es posible que veas una ventana emergente dentro de Figma que te solicita feedback. Utiliza este formulario para compartir tu feedback con nosotros..