A partir de hoy, puedes generar archivos de diseño de Figma desde Codex con el servidor MCP de Figma. El servidor MCP está diseñado para trabajar en ambas direcciones: llevar interfaces en funcionamiento al lienzo de Figma y convertirlas de nuevo en código con la misma facilidad, para que puedas desarrollar tus mejores ideas, no solo las primeras.
La aplicación de escritorio de Codex está diseñada específicamente para la codificación con agentes. Ofrece una interfaz enfocada en gestionar varios agentes en paralelo en distintos proyectos, seguir su progreso sin perder el contexto e integrar herramientas externas. Esa fluidez resulta familiar. En Figma, los equipos trabajan con la misma facilidad. El lienzo está diseñado para explorar e iterar. Es un espacio donde las mejores ideas tienen lugar para tomar forma. Al conectar el lienzo de Figma con Codex, ese espíritu de exploración se extiende directamente al flujo de trabajo de desarrollo y ofrece a los usuarios una nueva y potente forma de crear desde prototipos hasta aplicaciones de producción.
Crear una aplicación a partir de un diseño
Uno de los principales casos de uso del servidor MCP de Figma es obtener contexto de los archivos de Figma y usarlo para generar código. El servidor MCP de Figma puede capturar información de archivos de Figma Design, Make y FigJam y pasarla a Codex como parte del proceso de desarrollo.
Para empezar, abre el archivo de Figma que usarás como base para crear tu aplicación. Haz clic derecho en un marco y selecciona “Copiar como” y luego “Copiar enlace a la selección”.
Estas URL de selección enlazan directamente a un marco o nodo del lienzo de Figma. Las selecciones pueden abarcar un solo elemento o un conjunto de componentes, pero, en esencia, son los datos de origen que un agente usará para generar código. Pueden provenir de archivos de Figma Design, Make o FigJam. Una vez que tengas la URL, abre Codex y selecciona un proyecto nuevo o uno existente. Desde ahí, puedes darle instrucciones a Codex con un prompt como este:
help me implement this Figma design in code, use my existing design system components as much as possible.Los prompts como este le indican al agente que llame a la herramienta get_design_context del servidor MCP de Figma. Esta herramienta ayuda a extraer información clave de diseño de los archivos de Figma, como la distribución, los estilos y los datos de los componentes, y luego proporciona ese contexto a Codex para generar código.
Además de extraer información de diseño, el servidor MCP de Figma ofrece otras herramientas útiles. Para ver la lista completa, consulta nuestra documentación.
Del código al lienzo
Después de iterar en el código, querrás llevar tu diseño de vuelta al lienzo para comparar flujos, explorar alternativas y validar tus suposiciones. El servidor MCP de Figma facilita el traslado de esas pantallas de vuelta a Figma sin tener que recrearlas manualmente 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 y llevar una interfaz real y funcional directamente al lienzo para explorar más a fondo y colaborar.
Primero, tendrás que renderizar la interfaz de usuario de tu aplicación. Puedes hacerlo de forma local o mediante 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:
- Decide si quieres crear un nuevo archivo de Figma o usar uno existente.
- Determina en qué espacio de trabajo guardar el archivo.
- Configura la aplicación para capturar la interfaz de usuario.
- Abre tu aplicación en una nueva sesión del navegador.
Cuando la aplicación se recargue, 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 en ese momento y envíala al archivo de Figma.
Seleccionar elemento: elige un componente o elemento específico de la página para capturarlo
Abrir archivo: abre el archivo de Figma para inspeccionar las nuevas capas de tu diseño
Una vez que hayas capturado toda la información que quieres transferir a Figma, puedes abrir el archivo o volver a Codex. Codex tendrá lista la URL del archivo de Figma.
Un viaje de ida y vuelta: una historia de MCP
Ahora que creaste tu aplicación y configuraste tu archivo de diseño, puedes empezar a iterar. Aquí puedes aprovechar al máximo lo que ofrece el lienzo de Figma, como:
- Agregar componentes del sistema de diseño
- Actualizar estilos, fuentes y colores para que usen variables
- Ajustar la distribución y agregar anotaciones con instrucciones
- Diseñar distintas interacciones y estados vacíos
- Colaborar en distintas variantes y explorar alternativas
Cuando termines de perfeccionar la interfaz de usuario, puedes seguir los mismos pasos que describimos al principio de este artículo para incorporar esos cambios a tu aplicación a través del servidor MCP.
Cuando el código y el lienzo están conectados, puedes pasar con fluidez de la ejecución a la exploración. Este proceso de ida y vuelta permite aprovechar todo el potencial del servidor MCP de Figma con Codex: la capacidad de partir de cualquier punto para crear experiencias de aplicación útiles y de alta calidad sin sacrificar la velocidad.
Para obtener más información sobre el servidor MCP de Figma, consulta nuestra documentación o empieza por instalar el servidor MCP de Figma directamente en la aplicación de escritorio de Codex.