Il canvas

Il canvas è la bozza interattiva, in tempo reale. Fai clic, scrivi e scorri come faresti su una pagina vera. La barra sopra contiene gli strumenti descritti in questa pagina.

Anteprima e codice

• Anteprima mostra la schermata funzionante.
• Codice mostra il codice React della versione nel canvas. È di sola lettura; seleziona Copia codice per copiarlo.

Larghezze desktop, tablet e smartphone

Usa i tre pulsanti dei dispositivi per vedere la bozza a larghezza piena, a 768 pixel (tablet) o a 390 pixel (smartphone). Compaiono quando il canvas ha spazio sufficiente.

Tutte le dimensioni, il pulsante dopo lo smartphone, mostra la bozza a larghezza smartphone, tablet e desktop affiancate, ognuna come pagina dal vivo ridotta per entrare. Modalità chiara o scura e lingua dell'anteprima valgono per tutte e tre, così puoi controllare una lingua a ogni larghezza in una volta. Per selezionare, misurare o annotare, torna a una sola larghezza.

Misurare le spaziature

Seleziona Misura le spaziature (l'icona del righello) per controllare le spaziature come faresti in uno strumento di design. Puoi anche tenere premuto Alt (Opzione su Mac) sopra il canvas senza attivarlo.

• Passa sopra un elemento per vedere righelli rossi su tutti e quattro i lati, con le distanze in pixel. In alto, in basso, a sinistra e a destra, ognuno arriva all'elemento più vicino sulla stessa linea, o al bordo del suo contenitore se in mezzo non c'è niente. L'elemento mostra anche larghezza e altezza.
• Fai clic su un elemento per misurare a partire da lì, poi passa sopra un altro per vedere gli spazi tra i due. Passa sopra il suo contenitore per vedere tutti e quattro i margini interni.
• Su uno schermo touch, tocca un elemento e poi un altro.
• Premi Esc per rilasciare l'elemento su cui hai fatto clic, e di nuovo per smettere di misurare.

Le distanze sono pixel CSS della bozza, bordi inclusi, quindi la dimensione del canvas non le cambia. Mentre misuri, i clic non premono pulsanti e non seguono link.

Ricarica

Dopo che hai fatto clic qua e là in una bozza, Ricarica il canvas la riporta alla prima schermata. Il pulsante resta disattivato finché non interagisci con la bozza.

Versioni

Ogni bozza di una sessione viene conservata come versione. Quando ce n'è più di una, la barra mostra un contatore come 2/2 con i pulsanti Annulla e Ripeti.

• Annulla mostra la versione precedente e Ripeti quella successiva. Puoi anche premere ⌘+Z e ⌘+Maiusc+Z (Ctrl su Windows) quando non stai scrivendo in un campo. La versione cambia senza ricaricare l’area di lavoro.
• La tua prossima richiesta modifica la versione presente nel canvas, così puoi tornare indietro e prendere un'altra direzione.
• Un prototipo salvato conserva fino alle sue 20 versioni più recenti.

Confronta le versioni

Seleziona Confronta versioni per vedere due versioni affiancate con un cursore tra le due. Entrambi i lati scorrono insieme.

• Scegli due versioni qualsiasi negli elenchi Prima e Dopo.
• Trascina il divisore, oppure attivalo e usa i tasti freccia (tieni premuto Maiusc per spostamenti più ampi, Home e Fine per i bordi).
• Torna alla versione prima mette la versione prima nel canvas, così la tua prossima richiesta la modifica.
• Seleziona Fine o premi Esc per uscire.

Anteprima chiara e scura

Quando una bozza usa uno dei tuoi temi colori, compare un pulsante Modalità scura per controllare entrambe le modalità. Cambia solo la bozza, non Vibr.

Anteprima in un'altra lingua

Il pulsante Lingua dell'anteprima (l'icona di traduzione) mostra la bozza in un'altra lingua, così vedi come regge il tuo design prima che qualcuno lo traduca davvero. Scegli tra più di 40 lingue, tra cui arabo ed ebraico, che si leggono da destra a sinistra. Testi, segnaposto ed etichette della bozza cambiano e la pagina imposta lingua e direzione di conseguenza. Il codice non cambia e la lingua resta attiva mentre continui a costruire.

• Traduce il tuo modello. Vibr invia il testo visibile della bozza al modello che hai scelto, usando la tua chiave, qualche decina di stringhe alla volta. Il testo nuovo, come un contatore che aumenta, viene tradotto quando compare. Ogni stringa viene tradotta una sola volta per sessione.
• Da destra a sinistra. Le nuove bozze usano proprietà logiche, come marginInlineStart, che si invertono da sole. Quando è attivo l'arabo o l'ebraico, la revisione del design cerca anche gli stili che usano left o right e le frecce che non si rispecchiano, e Correggi li sistema prima di mostrare la bozza. Una bozza creata prima del cambio di lingua mostra invece un avviso, con Adatta da destra a sinistra.
• Pseudo non richiede un modello. Accenta ogni lettera e allunga il testo di circa il 40%, come succede spesso con il tedesco o il finlandese, così le etichette tagliate e le larghezze fisse emergono subito.
• Gli esempi non richiedono una chiave. Gli esempi esistono in tutte le lingue di Vibr, quindi l'anteprima in una qualsiasi di esse, arabo ed ebraico compresi, funziona senza chiave. Le altre lingue, e il testo che aggiungi a un esempio, le traduce il tuo modello.
• Esporta in quella lingua. Con una lingua attiva, il menu Esporta aggiunge App in quella lingua. La pagina esportata si apre nella lingua, con la sua direzione, e traduce anche il resto del testo della bozza, come altre schede e finestre di dialogo. Le altre esportazioni mantengono il testo originale della bozza.
• Font. Se un font importato non ha le lettere della lingua, un avviso ne indica alcune e suggerisce font di Google Fonts simili che le hanno. Usa… ne aggiunge uno alla scala tipografica del font come riserva, così il canvas e le app esportate lo caricano.
• Scegli Il testo originale della bozza per tornare indietro.

Link nel canvas

I link non escono dal canvas, quindi non puoi perdere la bozza facendo clic su uno di essi. Vibr ti dice invece dove porta il link. Un'app esportata segue i suoi link. I pulsanti che aprono un'altra schermata salvata funzionano con Riproduci; vedi Flussi.

Su smartphone

Sugli schermi piccoli, Vibr mostra Chat e Anteprima come schede. Un punto su Anteprima indica una nuova bozza che non hai ancora visto. Gli strumenti che non entrano sopra il canvas passano nel menu Azioni. Quando gli strumenti sopra il canvas non entrano tutti, scorrili di lato.