Da Figma al sito web: lancia una landing page
Trasforma un frame di marketing da Figma in HTML, CSS e JavaScript, poi pubblica il sito completato.
Incolla un link a un frame di Figma, descrivi cosa dovrebbe fare la pagina, e lascia che Manus costruisca il frontend e il backend che puoi pubblicare.
Manus legge il layout, i componenti, i caratteri e i colori nel frame di Figma per creare un'app web funzionale.
Esempio illustrativo.
Inizia con una landing page, una dashboard o diversi frame collegati. Ogni richiesta può descrivere il comportamento dietro il design.
Trasforma un frame di marketing da Figma in HTML, CSS e JavaScript, poi pubblica il sito completato.
Condividi un design di dashboard amministrativa e descrivi i dati e le azioni di cui hai bisogno. Manus crea un'app web con componenti frontend e backend.
Porta più frame in un'unica richiesta di design-to-code. Descrivi come si collegano le pagine, cosa succede al clic e quali stati dei componenti sono importanti.
Non è necessario alcun plugin separato da Figma a codice per il flusso di lavoro documentato. Collega il tuo account Figma, incolla un link a un frame e indica cosa deve funzionare nella pagina.
La trasformazione da design AI a codice non finisce con l'anteprima. Pubblica il sito web, collega il tuo dominio personale e descrivi le modifiche che desideri in una conversazione.
Spiega come si collegano i tuoi frame. Poi rivedi il risultato e continua a modificare nella conversazione.
Collega il tuo account Figma a Manus, poi condividi il link a un frame di Figma e descrivi l'app web che vuoi costruire. Manus legge il layout, i componenti, i font e i colori, quindi crea il frontend e i componenti backend necessari.
Sì. L'importazione documentata di Figma genera HTML, CSS e JavaScript per il frontend, oltre ai componenti backend necessari per l'app web richiesta. Per impostazione predefinita, Manus lo costruisce come progetto React e Tailwind CSS che viene eseguito come HTML, CSS e JavaScript nel browser. Descrivi le pagine e il comportamento di cui hai bisogno insieme al link del frame.
Sì. Manus crea siti web con React e Tailwind CSS per impostazione predefinita, quindi un design importato da Figma diventa un frontend React con stile Tailwind, oltre al codice backend richiesto dalla tua richiesta. Puoi esportare il codice del progetto in un repository GitHub privato.
Nessun plugin separato fa parte del flusso documentato. Collega il tuo account Figma, condividi un link a un frame con Manus e spiega cosa costruire; puoi aggiungere altri frame quando il tuo design ha più pagine o stati.
No. Manus si collega direttamente al tuo account Figma tramite l'accesso a Figma. Dopo averlo collegato, importa un link al frame e descrivi l'app; non è necessario installare o eseguire un server Figma MCP separato.
No. Manus importa i frame tramite il tuo account Figma connesso, non tramite Dev Mode, e un account Figma gratuito può connettersi. Figma limita la frequenza con cui le app possono leggere i file: i piani gratuiti e i posti senza Dev Mode dispongono di una piccola quota mensile, mentre i posti a pagamento con Dev Mode hanno limiti molto più alti. Se raggiungi il limite, Manus te lo comunica.
Sì. Condividi un link a un frame di Figma e descrivi l'app. Manus analizza il design e costruisce il frontend oltre ai componenti backend necessari per un'app web funzionante.
Sì. Condividi più frame di Figma e spiega il flusso delle pagine, le interazioni o gli stati dei componenti, come l'hover. Questo aiuta Manus a costruire un'esperienza web interattiva multi-pagina.
Sì. Visualizza l'anteprima dell'app web, clicca su Pubblica e sarà accessibile online. Puoi collegare un dominio personalizzato e continuare a fare modifiche descrivendole a Manus.
Figma Make è un prodotto di Figma. Con Manus, il percorso documentato inizia con un link a un frame di Figma e una richiesta per una web app: può includere componenti backend, dopodiché puoi pubblicare il sito e continuare a modificarlo in conversazione.
Questa pagina riguarda la conversione da Figma ad app web. La guida all'importazione indica HTML, CSS e JavaScript per il frontend; non confirma l'output per Flutter o React Native.