Figma a sitio web: lanza una landing page
Convierte un frame de marketing de Figma en HTML, CSS y JavaScript, y luego publica el sitio terminado.
Convierte diseños de Figma en aplicaciones web funcionales
Pega un enlace de marco de Figma, describe lo que la página debe hacer, y deja que Manus construya el frontend y backend que puedas publicar.
De un marco de diseño a una página funcional
Manus lee el diseño, los componentes, las fuentes y los colores en el frame de Figma para crear una app web funcional.
Marco de diseñoPágina en funcionamiento
Ejemplo ilustrativo.
Convierte el diseño en código para las páginas que necesites
Empieza con una página de inicio, un panel o varios marcos conectados. Cada solicitud puede describir el comportamiento detrás del diseño.
Figma a código: crea un panel funcional
Comparte un diseño de panel de administración y describe los datos y acciones que necesitas. Manus crea una aplicación web con componentes de frontend y backend.
Figma a app: conecta todo el flujo
Incluye varios cuadros en una sola solicitud de diseño a código. Describe cómo se vinculan las páginas, qué sucede al hacer clic y qué estados de componentes son importantes.
Convierte Figma en código con un enlace, no con un plugin
No se necesita un plugin aparte de Figma a código para el flujo de trabajo documentado. Conecta tu cuenta de Figma, pega un enlace de frame y di qué debe funcionar en la página.
Publica tu sitio y luego sigue mejorándolo
El diseño con IA a código no termina con una vista previa. Publica el sitio web, conecta tu propio dominio y describe en una conversación los cambios que quieres.
Un enlace, una solicitud clara, un sitio que puedes publicar
Explica cómo se conectan tus frames. Luego revisa el resultado y sigue haciendo cambios en la conversación.
Sigue construyendo con Manus
Preguntas frecuentes
¿Cómo convierto Figma a código con Manus?
Conecta tu cuenta de Figma a Manus, luego comparte un enlace a un marco de Figma y describe la app web que quieres crear. Manus lee su diseño, componentes, fuentes y colores, y luego crea el frontend y los componentes de backend necesarios.
¿Puede Manus convertir Figma en HTML y CSS?
Sí. La importación documentada de Figma genera HTML, CSS y JavaScript para el frontend, además de los componentes de backend necesarios para la aplicación web solicitada. De forma predeterminada, Manus la construye como un proyecto de React y CSS de Tailwind que se ejecuta como HTML, CSS y JavaScript en el navegador. Describe las páginas y el comportamiento que necesitas junto con el enlace del frame.
¿Manus admite Figma a React y Figma a Tailwind?
Sí. Manus crea sitios web con React y CSS de Tailwind de forma predeterminada, así que un diseño importado desde Figma se convierte en un frontend de React con estilos de Tailwind, además del código de backend que tu solicitud necesite. Puedes exportar el código del proyecto a un repositorio privado de GitHub.
¿Necesito un plugin para convertir Figma a código?
No se necesita un plugin aparte en el flujo documentado. Conecta tu cuenta de Figma, comparte un enlace de frame con Manus y explica qué construir; puedes añadir más frames cuando tu diseño tenga varias páginas o estados.
¿Necesito instalar un servidor MCP de Figma?
No. Manus se conecta a tu cuenta de Figma directamente mediante el inicio de sesión de Figma. Después de conectarlo, importa un enlace de marco y describe la app; no hay que instalar ni ejecutar un servidor Figma MCP aparte.
¿Necesito Dev Mode de Figma o un puesto de pago de Figma?
No. Manus importa marcos a través de tu cuenta de Figma conectada en lugar de Dev Mode, y una cuenta gratuita de Figma puede conectarse. Figma limita la frecuencia con la que las apps pueden leer archivos: los planes gratuitos y los puestos sin Dev Mode tienen una pequeña cuota mensual, mientras que los puestos de pago con Dev Mode tienen límites mucho más altos. Si llegas al límite, Manus te lo indica.
¿Un flujo de trabajo de IA que convierte Figma en código puede crear una app funcional?
Sí. Comparte el enlace de un frame de Figma y describe la aplicación. Manus analiza el diseño y construye el frontend, además de los componentes de backend necesarios para una aplicación web funcional.
¿Manus puede manejar diseños e interacciones de varias páginas?
Sí. Comparte varios frames de Figma y explica su flujo entre páginas, interacciones o estados de componentes, como el hover. Esto ayuda a Manus a construir una experiencia web interactiva y de varias páginas.
¿Puedo publicar el sitio después de convertirlo?
Sí. Previsualiza la aplicación web, haz clic en Publicar y quedará accesible en línea. Puedes conectar un dominio personalizado y seguir haciendo cambios describiéndoselos a Manus.
¿En qué se diferencia esto de Figma Make?
Figma Make es un producto de Figma. Con Manus, el flujo documentado comienza con un enlace de frame de Figma y una solicitud de aplicación web: puede incluir componentes de backend, y luego puedes publicar el sitio y seguir editándolo en la conversación.
¿Puedo usar la salida de Figma a Flutter o de Figma a React Native?
Esta página trata sobre la conversión de Figma a aplicación web. La guía de importación menciona HTML, CSS y JavaScript para el frontend; no confirma la salida en Flutter o React Native.