Modifica e perfeziona i design di Flowstep tramite chat o canvas

I design di Flowstep sono completamente modificabili dopo la generazione. Non sei bloccato in quello che l’IA produce inizialmente: puoi regolare i visivi direttamente nell’editor, usare la chat per descrivere i cambiamenti in linguaggio naturale, oppure chiedere a Flowstep di generare variazioni e nuove schermate. Usa il metodo che si adatta meglio al cambiamento che vuoi apportare.

​

Due modi per modificare

​

Modifica solo parte di una schermata

Non devi modificare interi schermate. Seleziona un sottoelemento — una card, un pulsante, un’etichetta di testo — e il tuo prompt della chat si applica solo ad esso, lasciando il resto della schermata intatto.

• Passa alla modalità Direct selection con Shift+V (o il dropdown sul pulsante della barra di selezione) per selezionare l’elemento più profondo sotto il tuo clic. Premi V per la selezione normale, o tieni premuto Cmd (Mac) / Ctrl (Windows) per usare la selezione diretta temporaneamente. Escape esce dalla selezione diretta.
• Seleziona sottoelementi su più schermate con Cmd+Shift — un singolo prompt può modificare fino a 6 schermate per messaggio.

Quando è selezionato un elemento immagine (al di fuori della modalità wireframe), un pannello Image appare nel pannello proprietà: visualizza l’anteprima dell’immagine, scambiala trascinando un nuovo file immagine sull’anteprima o facendo clic su Pick image, oppure salvala con Download image.

​

Copia e incolla elementi

Copia una selezione e incollala dove ti serve: nello stesso file, in un altro file o in un’altra scheda del browser, perché le copie vanno negli appunti del sistema.

• Copia con Cmd+C (Mac) / Ctrl+C (Windows), taglia con Cmd+X / Ctrl+X e incolla con Cmd+V / Ctrl+V.
• Duplica una selezione sul posto con Cmd+D / Ctrl+D.
• Gli elementi incollati vengono posizionati leggermente sfalsati rispetto agli originali, così non li coprono.

Queste scorciatoie agiscono sugli elementi selezionati; mentre modifichi un testo, tornano alla normale copia e incolla del testo.

​

Dai un nome alle schermate sul canvas

Ogni schermata mostra il proprio nome in un’etichetta sopra di essa sul canvas. Una schermata a cui non hai ancora dato un nome riporta Screen.

• Fai doppio clic sull’etichetta per rinominare la schermata, poi premi Enter per salvare: anche fare clic altrove salva. I nomi possono contenere fino a 100 caratteri.
• Fai clic una volta sull’etichetta per selezionare la schermata, poi trascinala per spostarla sul canvas.

​

Regola opacità, modalità di fusione e angoli

Seleziona un elemento per perfezionarne l’aspetto nel pannello delle proprietà:

• Opacity — imposta quanto è trasparente l’elemento, da 0 a 100%. Lo stesso pannello contiene una modalità di fusione (Normal, Multiply, Screen, Overlay e altre) che controlla come l’elemento si mescola con ciò che si trova dietro di esso.
• Corners — arrotonda gli angoli dell’elemento. Imposta un unico Corner radius per tutti e quattro, oppure attiva Per corner per assegnare a ciascuno degli angoli in alto a sinistra, in alto a destra, in basso a destra e in basso a sinistra un raggio proprio. Ogni valore può essere un Token del tuo tema oppure un valore Custom.

​

Ingrandisci fino al pixel

Ingrandisci il canvas fino al 25.600% per verificare con precisione spaziatura e allineamento. Oltre il 200%, compaiono linee della griglia allineate ai pixel che diventano più visibili man mano che ingrandisci, così puoi allineare gli elementi con esattezza.

​

Ripristina una versione precedente

Ogni generazione IA nella cronologia della chat mantiene il suo risultato originale. Se una schermata è stata modificata o eliminata da quando è stata generata, il suo messaggio di chat mostra un pulsante Restore — Restore original per annullare le modifiche, oppure Restore / Restore all per recuperare le schermate eliminate. Usalo per tornare a uno stato noto come buono dopo che una modifica è andata nella direzione sbagliata. Passa il mouse su qualsiasi messaggio nel pannello chat per vedere quando è stato inviato. I messaggi recenti mostrano l’ora; quelli più vecchi mostrano quanto tempo fa sono stati inviati (ad esempio, “1 giorno fa”), con la data e l’ora complete in un tooltip.

​

Azioni con un clic

Oltre alle modifiche dirette, puoi chiedere a Flowstep di esplorare alternative:

• Try again from scratch — chiedi a Flowstep di produrre una versione nuova della schermata corrente con un layout o una direzione visiva diversa.
• Show the next screen — chiedi a Flowstep di generare cosa logicamente viene dopo nel flusso utente.
• Make it pretty — regola la spaziatura, l’allineamento e i colori nel design. Il layout rimane lo stesso.

Queste opzioni ti permettono di iterare rapidamente senza dover scrivere un prompt ogni volta.

​

Iterare per perfezionare

Il design raramente funziona perfettamente al primo tentativo. Usa la modifica basata su chat per ogni round di feedback: descrivi cosa funziona e cosa no, e Flowstep si adatta da lì. Non c’è limite a quante volte puoi iterare su una schermata.