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.
La pagina Design system nelle impostazioni del workspace, con una card del design system Base44 che mostra in anteprima il logo, un pulsante, i campioni di colore e il carattere Inter, accanto a un riquadro tratteggiato Create new design system

I tuoi design system nelle impostazioni del workspace

Disponibilità:
  • I design system sono disponibili dal piano Builder in su. Ogni workspace può avere 1 design system, e quanti te ne servono sul piano Enterprise.
  • 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 e la sua anteprima live

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

I proprietari e gli admin del workspace creano i 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.
La card Logos con i pulsanti Generate logo e Add logo, e un logo contrassegnato come Primary

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. I proprietari e gli admin del workspace possono caricare un font.
La card Typography con Heading e Body entrambi impostati su Inter, sopra i pesi dei font Regular a 400, Medium a 500, Semibold a 600 e Bold a 700

Scegliere i font per titoli e corpo del testo

Clicca un colore per modificarlo, o clicca Generate palette e descrivi i colori che vuoi.
La card Color palette con un selettore di colore aperto sul primo campione, che mostra un campo sfumatura, un cursore della tonalità e valori R, G e B di 26, accanto ai campioni Secondary, Accent, Text, Muted e Destructive

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.
La card Tone of voice con confident, clear, friendly, direct e optimistic come chip rimovibili, sopra un pulsante Add tone

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.
La card Core values con Effortless, Complete, Trustworthy, Modern e Empowering come chip rimovibili, sopra un pulsante Add value

Aggiungere i tuoi valori fondamentali

Imposta quanto appaiono arrotondati i tuoi componenti.
La card Corner radius con riquadri di anteprima e campi in pixel per none a 0, sm a 6, md a 12, lg a 20 e full a 9999

Impostare i valori del raggio degli angoli

Regola quanto spazio c’è tra gli elementi.
La card Spacing scale con barre che crescono da sp-1 a 4 pixel fino a sp-7 a 48 pixel, ciascuna con un campo in pixel modificabile

Regolare la scala di spaziatura

Imposta quanto appaiono in rilievo i tuoi componenti. Clicca un’ombra per regolarne posizione, sfocatura, estensione e colore.
La card Shadow con 5 riquadri di anteprima con ombre di profondità crescente, etichettati none, sm, md, lg e xl

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.
La card Design guidelines, descritta come regole che l'agente segue per questo brand, con 7 linee guida scritte ciascuna con un menu More actions, sopra un pulsante Add guideline

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 del workspace: possono creare, modificare, impostare il predefinito ed eliminare qualsiasi design system.
  • Altri membri del workspace: possono visualizzare i design system e allegarne uno nella chat AI, ma non possono crearli, modificarli o eliminarli.
La pagina delle impostazioni Design system con il menu della card aperto ed Edit evidenziato, sopra Set as default e Delete

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.
La pagina Design system con il menu della card aperto e Set as default evidenziato, tra Edit e Delete

Impostare un 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.
La pagina delle impostazioni Design system con il menu della card aperto e Delete evidenziato, sotto Edit e Set as default

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. Sul piano Enterprise non ci sono limiti.
Questa pagina è stata tradotta con l’AI. Per le informazioni più accurate e aggiornate, consulta la versione inglese.