Figma a sitio web: lanza una landing page
Convierte un marco de marketing de Figma a 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 el backend que puedes publicar.
De un diseño a una página funcional
Manus lee el diseño, los componentes, las fuentes y los colores del marco de Figma para crear una app web funcional.
Marco de diseñoPágina funcional
Ejemplo ilustrativo.
De diseño a código para las páginas que necesitas
Empieza con una página de aterrizaje, 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
Comparta un diseño de panel de administración y describa los datos y acciones que necesita. Manus construye una app web con componentes de frontend y backend.
Figma a app: conecta todo el flujo
Lleva varios marcos a una sola solicitud de diseño a código. Describe cómo se vinculan las páginas, qué ocurre al hacer clic y qué estados de componentes importan.
Convierte Figma en código con un enlace, no un plugin
No se necesita un plugin independiente de Figma a código para el flujo de trabajo documentado. Conecta tu cuenta de Figma, pega un enlace de marco e indica qué debe funcionar en la página.
Publica tu sitio y luego sigue refiná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 deseas.
Un enlace, una solicitud clara, un sitio que puedes publicar
Explica cómo se conectan tus marcos. Luego revisa el resultado y sigue haciendo cambios en la conversación.
Sigue creando con Manus
Preguntas frecuentes
¿Cómo convierto Figma en código con Manus?
Conecta tu cuenta de Figma a Manus, luego comparte un enlace a un marco de Figma y describe la aplicación 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. Por defecto, Manus la construye como un proyecto de React y Tailwind CSS 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 marco.
¿Manus admite Figma a React y Figma a Tailwind?
Sí. Manus crea sitios web con React y Tailwind CSS de forma predeterminada, por lo 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 necesite tu solicitud. Puedes exportar el código del proyecto a un repositorio privado de GitHub.
¿Necesito un plugin de Figma a código?
No se necesita un plugin independiente para el flujo documentado. Conecta tu cuenta de Figma, comparte un enlace de marco con Manus y explica qué construir; puedes añadir más marcos cuando tu diseño tenga varias páginas o estados.
¿Necesito instalar un servidor MCP de Figma?
No. Manus se conecta directamente a tu cuenta de Figma mediante el inicio de sesión de Figma. Después de conectarlo, importa un enlace de un frame y describe la app; no hay un servidor Figma MCP separado que instalar ni ejecutar.
¿Necesito Dev Mode de Figma o una plaza de Figma de pago?
No. Manus importa frames 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 asignación mensual, mientras que los puestos de pago con Dev Mode tienen límites mucho más altos. Si alcanzas el límite, Manus te lo indica.
¿Puede un flujo de trabajo de IA de Figma a código crear una aplicación funcional?
Sí. Comparte el enlace de un marco de Figma y describe la app. Manus analiza el diseño y construye el frontend, además de los componentes de backend necesarios para una aplicación web funcional.
¿Puede Manus manejar diseños e interacciones de varias páginas?
Sí. Comparte varios marcos de Figma y explica su flujo de páginas, interacciones o estados de componentes, como hover. Esto ayuda a Manus a crear una experiencia web interactiva 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éndolos 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 a un marco 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 cubre 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 de Flutter o React Native.