Canvas Editor
Il canvas di editing wireframe e dove progetti e perfezi le tue schermate. La barra laterale sinistra contiene tutti gli strumenti di disegno e selezione, il centro e il canvas dove posizioni e disponi gli elementi, e la barra laterale destra mostra le proprieta dell'elemento selezionato.
Strumenti
Seleziona
Clicca per selezionare e spostare elementi sul canvas. Gli elementi selezionati mostrano le loro proprieta nella barra laterale destra.
Rettangolo
Disegna elementi contenitore rettangolari sul canvas.
Cerchio
Disegna elementi circolari sul canvas.
Testo
Aggiungi etichette di testo e blocchi di contenuto.
Immagine
Posiziona elementi segnaposto per immagini.
Pulsante
Aggiungi elementi pulsante interattivi.
Input
Aggiungi campi di input per i moduli.
+ (Add Screen)
Aggiungi una nuova schermata al progetto wireframe.
Locked Elements
Le schermate generate dall'IA sono bloccate per impostazione predefinita — gli elementi non possono essere spostati o ridimensionati finché non vengono sbloccati. Premi Ctrl + D per sbloccare tutti gli elementi nella schermata corrente, dandoti il controllo totale per riorganizzarli e modificarli.
Storyboard Mode
La modalita storyboard ti permette di vedere tutti i tuoi frame e i loro punti di connessione in una vista a volo d'uccello. Passa tra il canvas a schermata singola e la modalita storyboard usando lo stesso pulsante nella barra laterale sinistra. In modalita storyboard, ogni schermata e mostrata come una scheda con un'anteprima del suo layout.
Storyboard Features
Panoramica frame
Visualizza tutte le schermate a colpo d'occhio con i loro conteggi di elementi e anteprime visive.
Imposta modale
Contrassegna qualsiasi schermata come un overlay modale invece di una pagina intera.
Clicca per modificare
Clicca su qualsiasi scheda frame per passare alla sua vista canvas per la modifica dettagliata.
Controlli zoom
Usa i controlli zoom a sinistra per ingrandire/ridurre lo storyboard.
Connessioni di flusso
Visualizza come le schermate sono connesse tramite azioni di flusso tra i frame.
Element Properties
Fai doppio clic su qualsiasi elemento del canvas per entrarci e aprire il suo pannello proprietà nella barra laterale destra. Il pannello ha tre schede: Proprietà, Flusso e Colori. Da qui puoi modificare la posizione, le dimensioni, lo stile e il comportamento di ogni elemento.
Properties Tab
Posizione (X, Y)
Imposta la posizione esatta in pixel dell'elemento sul canvas.
Dimensione (Larghezza, Altezza)
Imposta le dimensioni dell'elemento in pixel.
Z-Index (Ordine livelli)
Controlla quali elementi appaiono sopra gli altri.
Raggio del bordo
Imposta l'arrotondamento degli angoli con un valore numerico o usa i preset Netto, Arrotondato o Pillola.
Contenuto testo
Modifica il testo visualizzato all'interno dell'elemento.
Scheda colori
Personalizza i colori di sfondo, bordo e testo per l'elemento selezionato.
Flows
I flussi definiscono azioni e navigazione tra le schermate. Un flusso e un'azione come navigare a un'altra pagina, aprire un modale o indirizzare a un'area diversa. Piccole icone di link sul canvas indicano quali elementi hanno flussi collegati. I frame vengono collegati automaticamente tra loro durante la generazione IA e vengono create anche le connessioni di flusso.
Setting Up Flows
Seleziona un elemento
Clicca sull'elemento a cui vuoi aggiungere un flusso.
Apri scheda flusso
Nella barra laterale destra, passa alla scheda Flusso per vedere le connessioni esistenti o aggiungerne di nuove.
Aggiungi connessione
Clicca Aggiungi prima connessione (o il pulsante +) per creare un nuovo flusso. Scegli una schermata o frame di destinazione a cui collegare.
Visualizza sul canvas
Gli elementi connessi mostrano una piccola icona link sul canvas per indicare che hanno azioni di flusso.
Block Connections
Le Connessioni Blocchi ti permettono di allegare blocchi dalla Libreria Blocchi direttamente agli elementi del wireframe. Quando fai doppio clic su un elemento e scorri verso il basso nel pannello proprietà, troverai la sezione Connessioni Blocchi. Clicca su + Aggiungi Blocco per collegare un blocco (HTML, componente o template) all'elemento. I blocchi collegati vengono referenziati durante la generazione del codice con IA, rendendo facile allegare codice HTML o componente specifico agli elementi del wireframe.
AI Editing
La barra dei prompt IA nella parte inferiore del canvas ti permette di usare l'IA per modificare o creare schermate. Seleziona il tuo modello di IA dal menu a tendina a sinistra, descrivi le modifiche desiderate e l'IA modificherà il wireframe per te. Puoi anche usare l'input vocale o il pulsante Modifica CLI per la modifica avanzata.
Context-Aware Prompting
Schermata singola
Quando si modifica una singola schermata, la barra prompt mostra "Modifica di 'Nome schermata'" e le modifiche IA si applicano solo a quella schermata.
Storyboard
In modalita storyboard, l'IA puo modificare tutti i frame contemporaneamente o costruire nuovi frame usando quelli esistenti come riferimento.
Input vocale
Usa l'icona microfono nella barra prompt per dettare le tue istruzioni invece di digitare.
Modifica CLI
Clicca su Modifica CLI per una modalita di modifica avanzata con piu controllo sulle modifiche basate sull'IA.
Export & Integration
I wireframe possono essere esportati, importati o usati direttamente durante la creazione di progetti o all'interno del Hub Progetti. Questo rende facile passare dal design wireframe a un progetto funzionante senza ricreare i design manualmente.