A partir de hoy, puedes generar archivos de diseño de Figma desde Codex con el servidor MCP de Figma. El servidor MCP te permite trabajar en ambos sentidos: puedes llevar una interfaz en funcionamiento al lienzo de Figma y pasarla de nuevo al código con la misma facilidad. Así puedes desarrollar tus mejores ideas, más allá de la primera que se te ocurra.
La aplicación de escritorio de Codex está diseñada específicamente para la codificación con agentes. Su interfaz te permite gestionar varios agentes en paralelo en distintos proyectos, seguir su progreso sin perder el contexto e integrar herramientas externas. Quienes trabajan en Figma ya conocen esa fluidez. Allí, los equipos pasan de una idea a otra con la misma facilidad. El lienzo está diseñado para explorar e iterar. Es un espacio donde las mejores ideas pueden tomar forma. Al conectar el lienzo de Figma con Codex, puedes explorar de la misma manera durante el desarrollo. Esto abre una nueva vía para crear desde prototipos hasta aplicaciones de producción.
Crear una aplicación a partir de un diseño
Uno de los principales usos del servidor MCP de Figma es obtener contexto de los archivos de Figma para generar código. El servidor MCP de Figma puede extraer información de archivos de Figma Design, Make y FigJam y enviarla a Codex durante el desarrollo.
Para empezar, abre el archivo de Figma que usarás como base para crear tu aplicación. Haz clic derecho en el marco que quieras usar y selecciona “Copiar como” y luego “Copiar enlace a la selección”.
La URL de cada selección apunta directamente a un marco o nodo del lienzo de Figma. La selección puede abarcar un solo elemento o un conjunto de componentes y contiene los datos que el agente usará para generar el código. Puedes hacer selecciones en archivos de Figma Design, Make o FigJam. Una vez que tengas la URL, abre Codex y elige un proyecto nuevo o uno existente. A continuación, puedes darle instrucciones a Codex con un prompt como este:
Ayúdame a implementar este diseño de Figma en código. Reutiliza los componentes de mi sistema de diseño en la medida de lo posible.Con un prompt como este, el agente llama a la herramienta get_design_context del servidor MCP de Figma. Esta herramienta extrae de los archivos de Figma información esencial sobre el diseño, como la distribución de los elementos, los estilos y los detalles de los componentes. Luego le proporciona ese contexto a Codex para que genere el código.
El servidor MCP de Figma ofrece otras herramientas además de las que permiten extraer información de diseño. Para ver la lista completa, consulta nuestra documentación.
Del código al lienzo
Después de probar cambios en el código, puedes volver a llevar el diseño al lienzo para comparar flujos, explorar alternativas y comprobar tus hipótesis. Con el servidor MCP de Figma, es fácil llevar esas pantallas de vuelta a Figma sin tener que recrearlas a mano a partir de lo que ves en el navegador. Con la herramienta generate_figma_design, puedes convertir una interfaz en funcionamiento en marcos de Figma totalmente editables en segundos. Así puedes explorar el diseño en mayor profundidad y colaborar con otras personas directamente en el lienzo a partir de la interfaz real.
Primero, necesitas renderizar la interfaz de tu aplicación. Puedes hacerlo de forma local o en un servidor web de acceso público. Luego, pídele a Codex que te ayude a generar un nuevo archivo de diseño de Figma.
Codex te guiará por los siguientes pasos:
- Elige si quieres crear un archivo de Figma o usar uno existente.
- Elige el espacio de trabajo donde guardarás el archivo.
- Configura la aplicación para capturar la interfaz.
- Abre la aplicación en una nueva sesión del navegador.
Cuando la aplicación se vuelva a cargar, verás una nueva barra de herramientas en la parte superior de la página con las siguientes opciones:
Pantalla completa: captura toda la pantalla tal como se muestra y envía la captura al archivo de Figma.
Seleccionar elemento: elige el componente o elemento de la página que quieras capturar.
Abrir archivo: abre el archivo de Figma para revisar las nuevas capas del diseño.
Una vez que hayas capturado todo lo que quieras transferir a Figma, puedes abrir el archivo o volver a Codex. Allí encontrarás la URL del archivo de Figma.
Una historia de ida y vuelta con MCP
Ahora que creaste tu aplicación y configuraste el archivo de diseño, puedes seguir iterando. En el lienzo de Figma puedes:
- Agregar componentes del sistema de diseño
- Actualizar los estilos, las fuentes y los colores para que usen variables
- Ajustar la distribución de los elementos y agregar anotaciones con instrucciones
- Diseñar distintas interacciones y estados vacíos
- Explorar y desarrollar varias versiones del diseño en equipo
Cuando termines de perfeccionar la interfaz, sigue los pasos del inicio de este artículo para incorporar los cambios a tu aplicación mediante el servidor MCP.
Cuando el código y el lienzo están conectados, puedes pasar con fluidez de explorar ideas a implementarlas y viceversa. Ese recorrido de ida y vuelta te permite aprovechar todo el potencial del servidor MCP de Figma con Codex: puedes partir del diseño o del código para crear experiencias de uso valiosas y de alta calidad sin sacrificar la velocidad de desarrollo.
Para saber más sobre el servidor MCP de Figma, consulta nuestra documentación o empieza a usarlo instalándolo directamente en la aplicación de escritorio de Codex.