Le canevas

Le canevas est le brouillon interactif, en direct. Cliquez, saisissez du texte et faites défiler comme sur une vraie page. La barre au-dessus contient les outils décrits sur cette page.

Aperçu et code

• Aperçu affiche l'écran fonctionnel.
• Code affiche le code React de la version présente sur le canevas. Il est en lecture seule ; sélectionnez Copier le code pour le copier.

Largeurs ordinateur, tablette et mobile

Utilisez les trois boutons d'appareil pour voir le brouillon en pleine largeur, à 768 pixels (tablette) ou à 390 pixels (mobile). Ils apparaissent quand le canevas a la place de les afficher.

Toutes les tailles, le bouton qui suit le mobile, affiche le brouillon en largeur mobile, tablette et ordinateur côte à côte, chacun comme une page en direct réduite pour tenir. Le mode clair ou sombre et la langue de l'aperçu s'appliquent aux trois : vous vérifiez une langue dans toutes les largeurs à la fois. Pour sélectionner, mesurer ou annoter, revenez à une seule largeur.

Mesurer les espacements

Sélectionnez Mesurer les espacements (l'icône de règle) pour vérifier les espacements comme dans un outil de design. Vous pouvez aussi maintenir Alt (Option sur Mac) au-dessus du canevas sans l'activer.

• Survolez un élément pour voir des règles rouges sur ses quatre côtés, avec les distances en pixels. En haut, en bas, à gauche et à droite, chacune va jusqu'à l'élément le plus proche dans son alignement, ou jusqu'au bord de son conteneur s'il n'y a rien entre les deux. L'élément affiche aussi sa largeur et sa hauteur.
• Cliquez sur un élément pour mesurer à partir de lui, puis survolez-en un autre pour voir les écarts entre les deux. Survolez son conteneur pour voir ses quatre marges intérieures.
• Sur un écran tactile, touchez un élément, puis un autre.
• Appuyez sur Échap pour relâcher l'élément sur lequel vous avez cliqué, puis une seconde fois pour arrêter de mesurer.

Les distances sont les pixels CSS du brouillon, bordures comprises : la taille du canevas ne les change donc pas. Pendant la mesure, les clics n'activent pas les boutons et ne suivent pas les liens.

Recharger

Après avoir cliqué dans un brouillon, Recharger le canevas le ramène à son premier écran. Ce bouton est désactivé tant que vous n'avez pas interagi avec le brouillon.

Versions

Chaque brouillon d'une session est conservé en tant que version. Dès qu'il y en a plus d'une, la barre affiche un compteur comme 2/2 avec les boutons Annuler et Rétablir.

• Annuler affiche la version précédente, et Rétablir la suivante. Vous pouvez aussi appuyer sur ⌘+Z et ⌘+Maj+Z (Ctrl sous Windows) lorsque vous n'êtes pas en train de saisir dans un champ. La version change sans recharger l’espace de travail.
• Votre prochaine demande révise la version affichée sur le canevas : vous pouvez donc revenir en arrière et prendre une autre direction.
• Un prototype enregistré conserve jusqu'à ses 20 versions les plus récentes.

Comparer des versions

Sélectionnez Comparer les versions pour voir deux versions côte à côte, séparées par un curseur. Les deux côtés défilent ensemble.

• Choisissez deux versions quelconques dans les listes Avant et Après.
• Faites glisser le séparateur, ou placez le focus dessus et utilisez les touches fléchées (maintenez Maj pour des pas plus grands, Origine et Fin pour aller aux bords).
• Revenir à la version avant place la version avant sur le canevas : votre prochaine demande la révisera.
• Sélectionnez Terminé ou appuyez sur Échap pour quitter.

Aperçu clair et sombre

Quand un brouillon utilise l'un de vos thèmes de couleurs, un bouton Mode sombre apparaît pour vérifier les deux modes. Cela ne modifie que le brouillon, pas Vibr.

Aperçu dans une autre langue

Le bouton Langue de l'aperçu (l'icône de traduction) affiche le brouillon dans une autre langue, pour voir comment votre design tient le coup avant que quiconque ne le traduise pour de bon. Choisissez parmi plus de 40 langues, dont l'arabe et l'hébreu, qui se lisent de droite à gauche. Le texte, les textes indicatifs et les libellés du brouillon changent, et la page adopte la langue et le sens de lecture correspondants. Votre code ne change pas, et la langue reste active pendant que vous construisez.

• Votre modèle traduit. Vibr envoie le texte visible du brouillon au modèle que vous avez choisi, avec votre clé, quelques dizaines de chaînes à la fois. Le nouveau texte, comme un compteur qui augmente, est traduit dès qu'il apparaît. Chaque chaîne n'est traduite qu'une fois par session.
• De droite à gauche. Les nouveaux brouillons utilisent des propriétés logiques, comme marginInlineStart, qui s'inversent d'elles-mêmes. Quand l'arabe ou l'hébreu est actif, la relecture du design recherche aussi les styles qui utilisent left ou right et les flèches qui ne s'inverseront pas, et Corriger les rectifie avant d'afficher le brouillon. Un brouillon créé avant le changement de langue affiche plutôt un avis, avec Adapter pour la droite à gauche.
• Pseudo ne nécessite aucun modèle. Il accentue chaque lettre et allonge le texte d'environ 40 %, comme c'est souvent le cas en allemand ou en finnois, pour révéler immédiatement les libellés tronqués et les largeurs fixes.
• Les exemples n'ont pas besoin de clé. Les exemples existent dans toutes les langues de Vibr, donc l'aperçu dans l'une d'elles, arabe et hébreu compris, fonctionne sans clé. Les autres langues, et le texte que vous ajoutez à un exemple, sont traduits par votre modèle.
• Exporter dans cette langue. Quand une langue est active, le menu Exporter propose App en cette langue. La page exportée s'ouvre dans la langue, avec son sens de lecture, et traduit aussi le reste du texte du brouillon, comme les autres onglets et les boîtes de dialogue. Les autres exports conservent le texte d'origine du brouillon.
• Polices. Si une police importée n'a pas les lettres de la langue, un avis en cite quelques-unes et propose des polices Google Fonts proches qui les ont. Utiliser… en ajoute une à l'échelle typographique de la police comme police de secours : le canevas et les apps exportées la chargent.
• Choisissez Le texte d'origine du brouillon pour revenir en arrière.

Liens dans le canevas

Les liens ne quittent pas le canevas : vous ne pouvez donc pas perdre votre brouillon en cliquant sur l'un d'eux. Vibr vous indique plutôt où mène le lien. Une app exportée suit ses liens. Les boutons qui ouvrent un autre écran enregistré fonctionnent avec Lire ; consultez Parcours.

Sur un téléphone

Sur les petits écrans, Vibr affiche Chat et Aperçu sous forme d'onglets. Un point sur Aperçu signale un nouveau brouillon que vous n'avez pas encore vu. Les outils qui ne tiennent pas au-dessus du canevas passent dans le menu Actions. Si les outils au-dessus du canevas ne tiennent pas tous, faites-les défiler sur le côté.