Acerca de MCP
El Protocolo de contexto de modelo ↗ o MCP es un estándar de código abierto que regula cómo los diferentes agentes y apps de IA se comunican entre sí o con otros sistemas externos.
Las empresas y los propietarios de apps, como Figma, pueden crear sus propios servidores MCP que sigan este estándar para que sus apps puedan interactuar con otros productos y sistemas que también utilicen el estándar MCP.
De esta manera, todas tus herramientas pueden comunicarse entre sí y transmitir información contextual para mejorar cada paso del proceso de creación.
Uso de Figma MCP y Figma Design
El servidor MCP de Figma toma información importante, como variables y componentes, de tus archivos de Figma Design, y las lleva directamente a tu entorno de desarrollo. Esto puede ayudar a mejorar tus flujos de trabajo y mantener tu código consistente con los componentes de tu diseño.
Equipamos el servidor MCP de Figma con herramientas útiles que te permiten realizar acciones basadas en el contenido de tus archivos de diseño. No es necesario que conozcas todas las herramientas disponibles, ya que cuando escribes indicaciones en tu cliente de IA, este encuentra automáticamente la herramienta adecuada para cada tarea.
Tu herramienta agéntica debe tener un comando de herramientas que puedas utilizar para ver la lista completa de herramientas disponibles. Consulta nuestra documentación para desarrolladores para obtener la información más actualizada.
Uso de Figma MCP y Figma Make
El servidor MCP de Figma también funciona con Figma Make, la herramienta de Figma impulsada por IA que convierte tus ideas en prototipos interactivos y apps, todo ello respaldado por código real. Figma Make es ideal para cualquiera, independiente de su nivel de habilidad o rol, que desee crear aplicaciones funcionales rápidamente.
Al combinar Figma Make con el servidor MCP de Figma, los modelos de IA pueden ver el código subyacente detrás de tus archivos de Figma Make y mejorar la calidad del código generado en tus herramientas de desarrollo impulsadas por IA.
Más información sobre Figma Make →
Uso del servidor MCP de Figma y FigJam
También puedes utilizar el servidor MCP de Figma con FigJam. Utiliza las herramientas de diagramado de FigJam, como formas y conectores, para crear diagramas de flujo y otros diagramas que ilustren la lógica de la app que estás tratando de crear.
Luego, con la ayuda del servidor MCP de Figma, tus herramientas de desarrollo agénticas pueden utilizar el diagrama como referencia para generar rápidamente el código y la lógica de la aplicación para tus productos.
Tipos de servidores e integraciones
Figma tiene un servidor MCP de escritorio que puedes utilizar con la app de Figma para escritorio, y un servidor MCP remoto alojado por el equipo de Figma para cuando utilizas Figma en tu navegador.
Después de configurar el servidor MCP de Figma, puedes integrarlo con tus herramientas agénticas favoritas, como VS Code, Claude Code, Cursor y Windsurf. Si buscas una herramienta que no aparece en esta colección, puedes encontrar el catálogo completo de herramientas compatibles en el catálogo MCP de Figma. También te recomendamos que consultes la documentación de la herramienta que estás utilizando para conocer los últimos pasos de instalación.
Al crear indicaciones y escribir código, estas herramientas agénticas son las que generan el resultado final del código, por lo que es posible que algunas herramientas generen resultados más cercanos a su visión que otras. El servidor Figma MCP solo envía el contexto y los detalles de tus archivos de diseño, no el código.
Cuando tengas todo listo para comenzar con el servidor MCP de Figma, puedes consultar nuestras otras lecciones o la documentación para desarrolladores de Figma, donde encontrarás instrucciones paso a paso sobre cómo configurar tu servidor MCP en tus herramientas favoritas.
Cómo mejora MCP los flujos de trabajo
Una vez configurado el servidor MCP, podrá realizar las siguientes tareas:
- Seleccionar un marco de Figma y convertirlo en código con una herramienta de desarrollo agéntica.
- Incorporar variables, componentes y datos de disposición directamente en tu indicación. Esto es especialmente útil para los sistemas de diseño y los flujos de trabajo basados en componentes.
- Recopila recursos de código de archivos de Figma Make y proporciónalos a tus herramientas agénticas como contexto. Esto puede ser útil al pasar de un prototipo a una aplicación lista para la producción.
Con Dev Mode y Code Connect
El servidor MCP de Figma funciona aún mejor cuando conectas tu código base a Figma con Dev Mode y Code Connect. Dev Mode es una interfaz enfocada en el desarrollador para inspeccionar los diseños y navegar por ellos. Puedes acceder a Dev Mode desde la barra de herramientas. Y Code Connect es el puente que conecta el código base de tus componentes con Dev Mode.
Después de configurar Code Connect, podrás ver el código real que se asigna directamente a tu código base al inspeccionarlo en Dev Mode. Y con el servidor MCP de Figma, tus herramientas de desarrollo agénticas pueden generar código basado en tus diseños y el código base conectado, asegurando que tu código y diseño estén siempre sincronizados.
Para obtener instrucciones detalladas sobre cómo configurar Code Connect, consulta nuestra documentación para desarrolladores. Y para obtener más información sobre Dev Mode revisa nuestro video de introducción a Dev Mode en YouTube →
Conclusión
Esto es todo por esta breve descripción general sobre qué es MCP y cómo el servidor MCP de Figma puede...
- Incorporar el contexto de tus sistemas de diseño en tus herramientas de desarrollo agénticas
- Utilizar el servidor MCP de Figma con Figma Make
- Mejorar la consistencia del resultado de tu código con Code Connect mientras utilizas los componentes de tu sistema de diseño actual
Los sistemas de diseño pueden ayudar a tu equipo a diseñar de forma consistente a gran escala. Aprende más sobre sistemas de diseño en nuestro curso de Introducción a los sistemas de diseño →
Si estás entusiasmado por comenzar, revisa nuestras próximas lecciones sobre cómo configurar el servidor MCP de Figma para algunas de las herramientas de desarrollo de IA más populares, como Cursor, VS Code y Claude Code.
¡Pon a prueba tus conocimientos!