Éditeur de canevas
Le canevas d'édition de maquettes est l'endroit où vous concevez et affinez vos écrans. La barre latérale gauche contient tous les outils de dessin et de sélection, le centre est le canevas où vous placez et disposez les éléments, et la barre latérale droite affiche les propriétés de l'élément sélectionné.
Outils
Sélectionner
Cliquez pour sélectionner et déplacer des éléments sur le canevas. Les éléments sélectionnés affichent leurs propriétés dans la barre latérale droite.
Carré
Dessinez des éléments conteneurs rectangulaires sur le canevas.
Cercle
Dessinez des éléments circulaires sur le canevas.
Texte
Ajoutez des étiquettes de texte et des blocs de contenu.
Image
Placez des éléments d'espace réservé pour les images.
Bouton
Ajoutez des éléments de bouton interactifs.
Champ de saisie
Ajoutez des champs de saisie de formulaire.
+ (Ajouter un écran)
Ajoutez un nouvel écran au projet de maquette.
Éléments verrouillés
Les écrans générés par IA sont verrouillés par défaut — les éléments ne peuvent pas être déplacés ou redimensionnés tant qu'ils ne sont pas déverrouillés. Appuyez sur Ctrl + D pour déverrouiller tous les éléments de l'écran actuel, vous donnant un contrôle total pour les réorganiser et les modifier.
Mode storyboard
Le mode storyboard vous permet de voir tous vos cadres et leurs points de connexion en vue d'ensemble. Basculez entre le canevas mono-écran et le mode storyboard en utilisant le même bouton dans la barre latérale gauche. En mode storyboard, chaque écran est affiché comme une carte avec une prévisualisation de sa mise en page.
Fonctionnalités du storyboard
Vue d'ensemble des cadres
Voyez tous les écrans en un coup d'œil avec leur nombre d'éléments et leurs prévisualisations visuelles.
Définir comme modale
Marquez n'importe quel écran comme superposition modale au lieu d'une page complète.
Cliquer pour modifier
Cliquez sur n'importe quelle carte de cadre pour accéder à sa vue de canevas pour une modification détaillée.
Contrôles de zoom
Utilisez les contrôles de zoom à gauche pour zoomer/dézoomer dans le storyboard.
Connexions de flux
Visualisez comment les écrans sont connectés via les actions de flux entre les cadres.
Propriétés de l'élément
Double-cliquez sur n'importe quel élément du canevas pour y entrer et ouvrir son panneau de propriétés dans la barre latérale droite. Le panneau comporte trois onglets : Propriétés, Flux et Couleurs. De là, vous pouvez modifier la position, la taille, le style et le comportement de chaque élément.
Onglet Propriétés
Position (X, Y)
Définissez la position exacte en pixels de l'élément sur le canevas.
Taille (Largeur, Hauteur)
Définissez les dimensions de l'élément en pixels.
Z-Index (Ordre des calques)
Contrôlez quels éléments apparaissent au-dessus des autres.
Rayon de bordure
Définissez l'arrondi des coins avec une valeur numérique ou utilisez les préréglages Angulaire, Arrondi ou Pilule.
Contenu textuel
Modifiez le texte affiché à l'intérieur de l'élément.
Onglet Couleurs
Personnalisez les couleurs d'arrière-plan, de bordure et de texte pour l'élément sélectionné.
Flux
Les flux définissent les actions et la navigation entre les écrans. Un flux est une action telle que naviguer vers une autre page, ouvrir une modale ou diriger vers une autre zone. De petites icônes de lien sur le canevas indiquent quels éléments ont des flux attachés. Les cadres sont automatiquement liés entre eux pendant la génération par IA, et les connexions de flux sont également créées.
Configuration des flux
Sélectionner un élément
Cliquez sur l'élément auquel vous voulez ajouter un flux.
Ouvrir l'onglet Flux
Dans la barre latérale droite, passez à l'onglet Flux pour voir les connexions existantes ou en ajouter de nouvelles.
Ajouter une connexion
Cliquez sur Ajouter la première connexion (ou le bouton +) pour créer un nouveau flux. Choisissez un écran ou cadre cible vers lequel lier.
Voir sur le canevas
Les éléments connectés affichent une petite icône de lien sur le canevas pour indiquer qu'ils ont des actions de flux.
Connexions de blocs
Les connexions de blocs vous permettent d'attacher des blocs de la bibliothèque de blocs directement aux éléments wireframe. Lorsque vous double-cliquez sur un élément et faites défiler vers le bas dans le panneau de propriétés, vous trouverez la section Connexions de blocs. Cliquez sur + Ajouter un bloc pour lier un bloc (HTML, composant ou modèle) à l'élément. Les blocs connectés sont référencés lors de la génération de code par IA, facilitant l'attachement de code HTML ou de composant spécifique aux éléments wireframe.
Édition par IA
La barre de saisie IA en bas du canevas vous permet d'utiliser l'IA pour modifier ou créer des écrans. Sélectionnez votre modèle d'IA dans le menu déroulant à gauche, décrivez les modifications souhaitées et l'IA ajustera le wireframe pour vous. Vous pouvez également utiliser la saisie vocale ou le bouton Édition CLI pour une édition avancée.
Invite contextuelle
Écran unique
Lors de la modification d'un écran unique, la barre d'invite affiche « Modification de 'Nom de l'écran' » et les modifications IA ne s'appliquent qu'à cet écran.
Storyboard
En mode storyboard, l'IA peut modifier tous les cadres en une fois ou construire de nouveaux cadres en utilisant les cadres existants comme référence.
Entrée vocale
Utilisez l'icône microphone dans la barre d'invite pour dicter vos instructions au lieu de taper.
Édition CLI
Cliquez sur Édition CLI pour un mode d'édition avancé avec plus de contrôle sur les modifications alimentées par l'IA.
Export et intégration
Les wireframes peuvent être exportés, importés ou utilisés directement lors de la création de projets ou au sein du Hub de projets. Cela facilite le passage de la conception wireframe à un projet fonctionnel sans avoir à recréer manuellement les designs.