Skip to main content
Un design system salva il look and feel del tuo brand a livello di workspace: i suoi colori, i font, il logo e un set di componenti coordinati. Crealo una volta, impostalo come predefinito, e ogni nuova app che costruisci parte già in linea con il brand, così non devi ridefinire il tuo stile ogni volta. Non serve essere designer. Con pochi dettagli, come il tuo logo, una breve descrizione del tuo brand, lo stile che vuoi e gli eventuali file di design che hai, Base44 crea un intero design system per te, così tutte le tue app appaiono professionali e in linea con il brand.
Your design systems in workspace settings

I tuoi design system nelle impostazioni del workspace

Disponibilità:
  • I design system sono disponibili dal piano Builder in su.
  • I workspace sul piano Builder e superiori includono 1 design system. I workspace Enterprise non hanno limiti.
  • I design system si applicano alle web app, non alle app mobile. Un’app importata da Figma, avviata da un URL o migrata da un’altra piattaforma può ricevere un design system una volta completata la costruzione.
  • Creare e usare un design system non costa crediti.

​
Cosa include

Quando crei un design system, Base44 compila tutto ciò che mantiene le tue app coerenti e in linea con il brand, e lo mostra in un’anteprima live. Cambia un colore o un font, e ogni esempio si aggiorna subito, così vedi sempre come appare.
A design system, with your brand settings on the left and a live preview on the right

Un design system, con le impostazioni del brand a sinistra e un'anteprima live a destra

Un design system copre 3 cose:
  • Le basi del tuo brand: il tuo logo, il nome del brand, la tagline e una breve descrizione, più i valori fondamentali del brand, il tono di voce e le linee guida di design su come deve apparire.
  • Il tuo look and feel: i tuoi colori, i tuoi font, quanto sono arrotondati gli angoli, quanta ombra c’è sotto gli elementi e quanto spazio c’è tra di loro.
  • Elementi pronti all’uso: un set completo di componenti già in linea con il tuo brand e pronti da inserire in qualsiasi app, inclusi pulsanti, icone, card, navigazione, form e sezioni di pagina, ognuno stilizzato per i suoi stati interattivi.

​
Creare un design system

Crei un design system dalle impostazioni del workspace. In un unico form puoi combinare una breve descrizione, il tuo logo, un’importazione da Figma, un sito web o un pacchetto npm, e i tuoi file di design, e Base44 genera un design system completo da ciò che fornisci. Per creare un design system:
  1. Clicca sul nome del tuo workspace in basso a sinistra, poi clicca Settings.
  2. Clicca Design system.
  3. Clicca Create. Se il tuo workspace ha già un design system, clicca invece Create new design system.
  4. In Create your design system, aggiungi uno o più dei seguenti elementi:
    • Descrivi il tuo brand: scrivi una breve descrizione del tuo brand e aggiungi il logo nel riquadro accanto.
    • Importa una fonte esistente: puoi usare una fonte per design system. Passa tra le schede:
      • Figma file: trascina o seleziona un file .fig, fino a 1,9 GB, e allega tutte le sue pagine e frame o scegline alcuni. Base44 ridimensiona le immagini troppo grandi e prepara i file di grandi dimensioni in background, e non memorizza il file originale.
      • Website URL: incolla l’indirizzo di un sito web. Usa solo URL di cui hai i diritti sui contenuti.
      • NPM package: inserisci un pacchetto pubblicato per nome, name@version o un link npmjs.com. Per impostazione predefinita viene risolto dal registro npm pubblico, oppure clicca Private registry per aggiungere l’URL di un registro, un token di accesso e gli eventuali scope da risolvere lì. Il tuo token di accesso viene usato una volta per recuperare il pacchetto e non viene memorizzato.
    • Carica le tue risorse di design: aggiungi immagini, font, un file design.md o altri file di design, fino a 10 file.
  5. Clicca Create. Generare il design system può richiedere qualche minuto, e puoi uscire e tornare mentre è in corso.
  6. Rivedi il design system generato nell’anteprima, poi regola ciò che vuoi.
The Create a design system dialog with a logo, a brand description, an imported source, and uploaded design resources

Creare un design system dai materiali del tuo brand

​
Modificare il tuo design system

Quando apri un design system, lo modifichi in un editor a due pannelli. A sinistra ci sono tutte le impostazioni del brand e del design. A destra, una Preview live mostra quegli stili applicati a pulsanti, icone e card reali, così come appaiono nella tua app o sito. Quando cambi un’impostazione a sinistra, l’anteprima si aggiorna all’istante. Il nome e la tagline del design system si trovano in cima alla pagina. Clicca uno dei due per modificarlo direttamente. A sinistra, puoi modificare ogni parte del tuo design system:
Una breve descrizione del tuo brand. Base44 la usa per mantenere in linea con il brand tutto ciò che genera.
Aggiungi i loghi del tuo brand, o generane uno con l’AI. Clicca Add logo per caricare un logo, o Generate logo per descriverne uno e lasciare che Base44 lo crei. Un logo è contrassegnato come Primary, e puoi impostarne un altro come primario dal suo menu More actions.
Editing your brand logos

Modificare i loghi del tuo brand

Scegli i font per i titoli e il corpo del testo, o carica i tuoi. Puoi anche regolare il peso di ogni stile di font. Chiunque nel tuo workspace possa modificare, cioè proprietari, admin ed editor, può caricare un font. Viewer e ospiti no.
Choosing your heading and body fonts

Scegliere i font per titoli e corpo del testo

Clicca un colore per modificarlo, o clicca Generate palette e descrivi i colori che vuoi.
Editing a color in the palette

Modificare un colore nella palette

Definisce come comunica il tuo brand. Clicca Add tone per aggiungere un tratto, o clicca l’icona di generazione per lasciare che Base44 suggerisca un nuovo set.
Adding tone of voice traits

Aggiungere tratti del tono di voce

I principi che il tuo brand rappresenta. Clicca Add value per aggiungerne uno, o clicca l’icona di generazione per lasciare che Base44 suggerisca un nuovo set.
Adding your core values

Aggiungere i tuoi valori fondamentali

Imposta quanto appaiono arrotondati i tuoi componenti.
Setting your corner radius values

Impostare i valori del raggio degli angoli

Regola quanto spazio c’è tra gli elementi.
Fine-tuning your spacing scale

Regolare la scala di spaziatura

Imposta quanto appaiono in rilievo i tuoi componenti. Clicca un’ombra per regolarne posizione, sfocatura, estensione e colore.
Setting your shadow values

Impostare i valori delle ombre

Regole che mantengono coerente il linguaggio visivo della tua app. Clicca Add guideline per aggiungerne una, o apri il menu More actions su una linea guida per modificarla o eliminarla.
Editing your design guidelines

Modificare le tue linee guida di design

Le tue modifiche non vengono applicate finché non le salvi. Clicca Save changes per conservarle, o Reset changes per annullare le modifiche non ancora salvate. Un design system ha bisogno di un nome e di una overview prima di poter essere salvato.

​
Gestire i tuoi design system

Gestisci un design system dalla sua card nella sezione Design system. Apri l’icona More actions su un design system per modificarlo, impostarlo come predefinito o eliminarlo.
Chi può gestire i design system:
  • Proprietari e admin: possono creare, modificare, impostare il predefinito ed eliminare qualsiasi design system.
  • Editor: possono creare e modificare i design system. Solo proprietari e admin possono impostare il predefinito o eliminare un design system.
Opening a design system for editing

Aprire un design system per la modifica

​
Impostare un design system predefinito

Imposta un design system come predefinito del workspace così le nuove app partono automaticamente con esso. Per impostare il design system predefinito:
  1. Clicca sul nome del tuo workspace in basso a sinistra, poi clicca Settings.
  2. Clicca Design system.
  3. Sul design system che vuoi, clicca l’icona More actions e clicca Set as default.
Setting a design system as your workspace default

Impostare un design system come predefinito del workspace

Per smettere di usare un design system come predefinito, apri lo stesso menu e clicca Remove default.

​
Eliminare un design system

Elimina un design system che non ti serve più.
L’eliminazione di un design system dalla sua card ha effetto immediato e non può essere annullata.
Per eliminare un design system:
  1. Clicca sul nome del tuo workspace in basso a sinistra, poi clicca Settings.
  2. Clicca Design system.
  3. Sul design system che vuoi, clicca l’icona More actions e clicca Delete.
Deleting a design system

Eliminare un design system

​
Usare il design system mentre costruisci

Quando inizi una nuova app, il tuo design system predefinito è preselezionato, così l’app viene costruita in linea con il tuo brand fin dal primo prompt. Per scegliere un design system diverso, clicca l’icona Add nella chat AI, seleziona Use a design system, poi scegli quello che vuoi.
The home prompt box with the Add menu open, Use a design system highlighted, and the design system list beside it

Scegliere un design system quando inizi una nuova app

Puoi anche applicare un design system a un’app su cui stai già lavorando, dalla stessa icona Add nella chat AI. Quando il tuo workspace ha un solo design system, l’opzione ne mostra il nome, e cliccarla allega il design system al tuo prossimo prompt.
The AI chat Add menu open with Use a design system highlighted

Applicare il tuo design system dalla chat AI

L’applicazione di un design system ha effetto in un turno di build nella chat AI. Se la chat è impostata su una modalità che non costruisce, come Discuss, passa prima a Build.
Applicare un design system a un’app già costruita ricostruisce l’app per adattarla, invece di ristilizzarla sul posto. Applicalo presto, o aspettati che l’app venga rigenerata.

​
FAQ

Clicca su una domanda qui sotto per saperne di più sui design system.
No. Descrivi il tuo brand in poche parole, o importa da un sito web, un file Figma, un pacchetto npm o il tuo logo, e Base44 genera un design system completo per te. Puoi poi regolarne qualsiasi parte.
Sul piano Builder e superiori hai 1 design system per workspace, quindi usa un workspace separato per ogni cliente o progetto che ha bisogno del proprio brand. I workspace Enterprise non hanno limiti.
Questa pagina è stata tradotta con l’AI. Per le informazioni più accurate e aggiornate, consulta la versione inglese.