Usa i temi per mantenere coerenti colori e arrotondamento degli angoli in tutte le schermate di Flowstep

Un tema è una palette di colori condivisa e un arrotondamento degli angoli per le tue schermate. Ogni file ha un tema e un’apparenza (chiara o scura), e le schermate vengono stilizzate con i token del tema. Se modifichi un tema, ogni schermata che lo usa si aggiorna di conseguenza, così il tuo team lavora con un unico set di decisioni invece di ripetere i colori in ogni prompt. I temi che crei o generi vengono salvati nella tua organizzazione ed elencati in Themes nella Home, così qualsiasi file dell’organizzazione può usarli.

​

Scegli un tema per un file

Scegli il tema e l’apparenza per le nuove schermate dal compositore di prompt all’interno di un file. Il pulsante del tema non è disponibile nella casella dei prompt della Home.

​

Lascia che Flowstep progetti un tema

Quando un file non ha ancora un tema, ad esempio un nuovo file con il tema impostato su Automatic, Flowstep progetta un tema personalizzato insieme alle prime schermate che genera. Mentre lavora, vedi nella chat un passaggio Designing theme. Flowstep costruisce il tema a partire da:

• I colori che indichi nel prompt
• I colori nelle tue linee guida di design
• I colori del brand presenti negli allegati e nei link che incolli
• Il prodotto e l’atmosfera descritti nel prompt, quando non ci sono altri riferimenti più specifici

Il tema riceve un nome breve, una palette completa per la modalità chiara e scura e un livello di arrotondamento. Viene salvato nella tua organizzazione in Themes nella Home, e il file lo usa per ogni schermata generata successivamente. Una volta che un file ha un tema, Flowstep non ne progetta un altro di propria iniziativa. Per ottenere un tema nuovo, scegli di nuovo Automatic nel menu dei temi: la generazione successiva ne progetta uno nuovo e il file si adatta a quello. Se Flowstep non riesce a progettare un tema, il file ricorre a un tema predefinito.

​

Cambia il tema di una singola schermata

Per modificare lo stile di una sola schermata senza toccare il resto del file:

1. Seleziona la schermata sul canvas.
2. Nel menu sopra la schermata, fai clic sul pulsante Theme.
3. Scegli uno dei temi della tua organizzazione o un tema predefinito, oppure passa tra Light e Dark.

Cambiare tema ridisegna subito la schermata. Passare da Light a Dark (o viceversa) chiede all’AI di rimodellare lo stile della schermata, come per una modifica con AI. Il menu non è disponibile mentre una generazione è in corso.

​

Modifica un tema

Apri un tema dalla sezione Themes nella Home. L’editor del tema mostra un’anteprima dal vivo, con Theme settings sulla destra. Usa i pulsanti Light e Dark in alto per cambiare l’anteprima e fai clic sul nome del tema per rinominarlo.

• Colors — ogni gruppo di colori ha un campione per la modalità chiara e uno per quella scura: Primary, Secondary, Accent, Muted, Destructive, Background, Card, Popover, Border, Input, Ring, Charts e Sidebar. Fai clic su un campione per modificarne i colori, ad esempio il colore di riempimento e quello del testo di un gruppo, con il selettore colori o un valore esadecimale.
• Radius — scegli un livello di arrotondamento (Square, Slight, Balanced, Soft o Round), oppure seleziona Custom e trascina Base radius per impostare il tuo valore.

Le modifiche vengono salvate come bozza, quindi le schermate non cambiano mentre lavori. Quando sei pronto:

• Fai clic su Publish per aggiornare tutte le schermate che usano il tema. Flowstep conferma con il messaggio “Published. Screens using this theme are updating.” (Pubblicato. Le schermate che usano questo tema si stanno aggiornando.)
• Fai clic su Reset changes per scartare le modifiche non pubblicate. Le schermate che usano il tema non vengono toccate.

Per rimuovere un tema, fai clic su Delete theme in fondo a Theme settings, oppure sull’icona del cestino accanto al tema nell’elenco Themes nella Home. Un tema eliminato non viene più proposto nei menu dei temi, ma le schermate che lo usano già mantengono il loro aspetto, quindi nulla sul canvas cambia.

​

Collega colori e angoli al tema

Colori e angoli possono puntare a un token del tema invece che a un valore fisso. Un valore collegato segue il tema della schermata: quando il tema cambia (un tema diverso, una modifica pubblicata oppure il passaggio tra chiaro e scuro), i colori e gli angoli collegati si aggiornano di conseguenza. Colors — nel pannello Fill o Border, fai clic sul campione di colore. Nella scheda Token, cerca o scegli un token dai gruppi Theme, Base o Tailwind. Usa la scheda Custom per un colore esatto. Un colore collegato mostra il nome del token nel pannello, e puoi comunque regolarne l’opacità. Corners — nel pannello Corners, fai clic sull’anteprima di un angolo. Nella scheda Token, scegli un livello (ad esempio md o lg); nella scheda Custom, digita un valore esatto in pixel. Un angolo collegato mostra il nome del token, e modificare l’arrotondamento del tema lo riarrotonda di conseguenza. Per riportare un valore collegato a un valore fisso, fai clic su Detach from token. Il colore o l’angolo mantiene l’aspetto attuale, ma non segue più il tema.

​

Da sapere

• Le schermate mantengono il proprio tema — ogni schermata ricorda il proprio tema e la propria apparenza. Cambiare il tema del file influisce solo sulle schermate che generi successivamente: per modificare quelle esistenti, usa il menu Theme di ciascuna schermata.
• Solo le versioni pubblicate — le schermate mostrano la versione pubblicata di un tema. Le bozze sono visibili solo nell’editor del tema finché non le pubblichi.
• I collegamenti ai token resistono alle modifiche — i colori del tema usati in ombre, filtri e gradienti restano collegati al tema quando Flowstep modifica o rigenera una schermata.
• Livelli di arrotondamento che non si scalano — i token di angolo none e full sono sempre squadrati e completamente arrotondati, indipendentemente dall’arrotondamento del tema.