Importare da Figma

​

Iniziare una nuova app da Figma

1. Vai su Base44.
2. Clicca l’icona + nella prompt box.
3. Clicca Import from Figma.
4. Clicca Connect to Figma.
5. Segui le istruzioni a schermo per dare a Base44 l’accesso a Figma.
6. Incolla il link Figma e clicca Generate.

​

Aggiungere una pagina da Figma

1. Apri l’app nell’editor.
2. Nella chat AI, clicca l’icona + e seleziona Add page from Figma.
3. In Figma, clicca con il tasto destro sul frame o sezione che vuoi importare.
4. Scegli “Copy/Paste as”, poi seleziona “Copy link to selection”.
5. Incolla il link nel dialogo e clicca Add page.

​

Linee guida per l’import da Figma

​

Strutturare il layout Figma

• Dividi la pagina in sezioni logiche: Racchiudi contenuti correlati (per esempio, hero, riga di funzionalità o footer) dentro frame o gruppi così ogni area della pagina è chiaramente definita.
• Usa auto layout per la gerarchia: Applica Auto Layout a componenti come card, barre di navigazione e blocchi di contenuto ripetitivi. Per esempio, una card informativa con immagine, titolo e descrizione dovrebbe essere raggruppata come Frame o Group, o preferibilmente Auto Layout. Questo aiuta Base44 a capire come gli elementi si relazionano e come devono ridimensionarsi.
  
• Mantieni il nesting significativo: Raggruppa gli elementi che appartengono insieme (per esempio, immagine + titolo + descrizione in una card) ed evita nesting profondo e inutile.
  
• Allinea e spazia in modo coerente: Usa padding, gap e allineamento coerenti dentro i frame così Base44 può preservare spaziatura e gerarchia.

​

Lavorare con vettori e forme

• Appiattisci vettori complessi: Se un vettore è costruito da molti percorsi separati, appiattiscilo in un unico vettore quando puoi.
  
• Trasforma gli stroke in outline prima di appiattire: Per linee, cerchi, stelle e forme simili:
  • Usa Outline Stroke poi appiattisci il risultato in un unico elemento vettoriale.
• Rimuovi elementi nascosti: Elimina i layer completamente nascosti o spinti lontano dalla canvas così non interferiscono con il layout importato.
  
• Semplifica i fill: Se un elemento ha più fill, mantieni solo ciò che ti serve. Base44 importa solo l’ultimo fill su un elemento.
  

​

Font, effetti e altre limitazioni

• Font:
  • Solo i Google Font sono pienamente supportati.
  • I font personalizzati vengono sostituiti con un font predefinito durante l’import. Puoi aggiornare la tipografia in seguito in Base44.
• Effetti di design che potrebbero non essere preservati esattamente:
  • Filtri immagine
  • Più layer di sfondo su un singolo elemento
  • Variabili e stili basati su variabili
• Rifiniture del layout:
  • Rifinisci spaziatura, responsività e interazioni dopo l’import usando la chat AI o la modalità Visual Edit.
  • Se qualcosa non sembra giusto, regola la struttura direttamente in Base44 o aggiorna il file Figma e importa di nuovo da un frame più pulito.

​

Costruire il resto dell’app

• Usa la pagina importata come home page e riferimento principale per struttura, layout e linguaggio visivo.
• Chiedi alla chat AI di:
  • Identificare quali pagine aggiuntive mancano (per esempio, About, Pricing, Blog o Contact).
  • Creare nuove pagine che seguano lo stesso linguaggio di design e principi di layout.
  • Collegare pulsanti, menu e link sulla home page alle nuove pagine interne.

Review the home page carefully, including both its content and its design style. Use the home page as the main reference to understand the website's structure and design language. Identify which additional pages are needed to create a complete website. Create the missing pages while maintaining the same design language, layout principles, and visual style as the home page, so they feel like a direct continuation and not disconnected. When finished, return to the home page and connect all relevant buttons and links so each one navigates to the appropriate internal page.