Vai al contenuto principale

​
Prima di importare da Figma

Preparare correttamente il file Figma aiuta Base44 a leggere il design e ricrearlo come layout funzionante.
  • Assicurati di lavorare in un file Figma Design. FigJam, Slides e altri tipi di file non sono supportati.
    Figmadeisgnfiles
  • Seleziona un singolo frame o sezione che vuoi importare. Non usare un documento completo o link a livello di pagina.
  • In Figma, clicca Share e sotto Who has access, imposta il link su Anyone with the link – Can view. Copia il link del frame o sezione selezionato e incollalo in Import from Figma in Base44. Dopo l’importazione, puoi rimettere i permessi del file Figma su privato se preferisci.
Import from Figma si concentra sul frame o sezione selezionato. Altre parti del file Figma non vengono portate in Base44 a meno che tu non le importi separatamente.

​
Strutturare il layout Figma

Una struttura chiara in Figma rende più facile per Base44 costruire un layout responsive che corrisponda al tuo intento.
Una home page ben strutturata con sezioni chiare e componenti coerenti dà i migliori risultati quando estendi il design in un’app completa.
  • 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.
    Selectingtwoelementsforautolayout
  • Mantieni il nesting significativo: Raggruppa gli elementi che appartengono insieme (per esempio, immagine + titolo + descrizione in una card) ed evita nesting profondo e inutile che non riflette la struttura visiva.
    Autolayout
  • 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

Pulire gli elementi vettoriali prima dell’import rende il posizionamento e il rendering più accurati. Appiattire e semplificare i vettori riduce le sorprese in come gli elementi si allineano, ridimensionano e renderizzano in Base44.
  • Appiattisci vettori complessi: Se un vettore è costruito da molti percorsi separati (per esempio, un’icona fatta da più forme), appiattiscilo in un unico vettore quando puoi.
    Flattencomplexvectorsintoasinglevector
  • 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.
    Hiddenelements
  • Semplifica i fill: Se un elemento ha più fill, mantieni solo ciò che ti serve davvero. Base44 importa solo l’ultimo fill su un elemento.
    Multiplfills

​
Font, effetti e altre limitazioni

Alcune parti del design Figma vengono adattate durante l’importazione così il layout risultante funziona in modo affidabile in Base44.
  • 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.
Se il tuo design si basa fortemente su effetti non supportati o configurazioni complesse di variabili, aspettati differenze visive dopo l’import e prevedi di rifinire il risultato in Base44.

​
Aggiungere una pagina da Figma

Una volta che l’app è nel builder, puoi continuare ad aggiungere frame Figma come nuove pagine. Non sei limitato all’importazione iniziale: ogni frame che aggiungi diventa una nuova pagina nell’app. Per aggiungere una pagina da Figma:
  1. Apri l’app nel builder.
  2. Nell’input della chat, clicca l’icona +.
  3. Seleziona Add page from Figma.
  4. Incolla un link al frame Figma che vuoi importare.
  5. Clicca Add page.
Base44 genera una nuova pagina dal design e la aggiunge all’app. Si applicano gli stessi requisiti di configurazione del file: assicurati che il link del frame sia impostato su Anyone with the link – Can view prima di aggiungerlo.
L’accesso Editor è necessario per aggiungere pagine da Figma. I Viewer non possono aggiungere pagine. L’app inoltre non può stare elaborando un altro prompt contemporaneamente. Aspetta che l’eventuale generazione attiva finisca prima di aggiungere una pagina.
Importare frame dallo stesso file Figma mantiene font, colori e spaziatura coerenti tra le pagine. Dopo aver aggiunto una pagina, chiedi alla chat AI di collegare la navigazione tra le pagine esistenti e quella nuova.

​
Costruire il resto dell’app

Una volta importato il frame Figma, puoi trattare la nuova pagina come la base per un’app o sito completo.
  • 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.
Puoi usare un prompt come:
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.
Se vedi pattern ripetuti nel design importato (come card, righe di funzionalità o blocchi call-to-action), menzionali nel prompt così l’IA può riutilizzarli sulle nuove pagine.
Questa pagina è stata tradotta utilizzando l’IA. Per informazioni più accurate e aggiornate, consulta la versione inglese.