Passer au contenu principal
Screenshot 2026 05 06 At 14 25 48
Les designs Flowstep sont entièrement modifiables après leur génération. Vous n’êtes pas limité à ce que l’IA produit au départ — vous pouvez ajuster les visuels directement dans l’éditeur, utiliser le chat pour décrire les modifications en langage naturel, ou demander à Flowstep de générer des variantes et de nouveaux écrans. Utilisez la méthode qui correspond le mieux à la modification que vous souhaitez faire.

Deux façons de modifier

Faites des modifications directement sur le canvas en sélectionnant et en modifiant les éléments. Cette méthode fonctionne mieux pour les ajustements précis — déplacer un composant, changer une couleur, mettre à jour un libellé ou affiner l’espacement.
1

Sélectionnez l'élément que vous souhaitez modifier

Cliquez sur n’importe quel composant ou calque dans votre design pour le sélectionner.
2

Effectuez vos modifications

Utilisez les contrôles de l’éditeur pour ajuster les propriétés comme la couleur, la taille, la position ou le contenu du texte.
3

Vérifiez le résultat

Vos modifications s’appliquent immédiatement sur le canvas. Continuez à modifier ou passez à l’écran suivant.

Modifier juste une partie d’un écran

Vous n’avez pas besoin de modifier des écrans entiers. Sélectionnez un sous-élément — une carte, un bouton, un libellé de texte — et votre prompt de chat s’applique uniquement à celui-ci, laissant le reste de l’écran intact.
  • Passez au mode Direct selection avec Shift+V (ou la liste déroulante sur le bouton de barre d’outils Sélectionner) pour sélectionner l’élément le plus profond sous votre clic. Appuyez sur V pour la sélection normale, ou maintenez Cmd (Mac) / Ctrl (Windows) pour utiliser temporairement la sélection directe. Échap quitte la sélection directe.
  • Sélectionnez des sous-éléments sur plusieurs écrans avec Cmd+Shift — un seul prompt peut modifier jusqu’à 6 écrans par message.
Lorsqu’un élément d’image est sélectionné (en dehors du mode wireframe), un panneau Image apparaît dans le panneau des propriétés : prévisualisez l’image, échangez-la en faisant glisser un nouveau fichier image sur l’aperçu ou en cliquant sur Pick image, ou enregistrez-la avec Download image.

Copier et coller des éléments

Copiez une sélection et collez-la là où vous en avez besoin — dans le même fichier, dans un autre fichier ou dans un autre onglet du navigateur, car les copies passent par le presse-papiers de votre système.
  • Copier avec Cmd+C (Mac) / Ctrl+C (Windows), couper avec Cmd+X / Ctrl+X, et coller avec Cmd+V / Ctrl+V.
  • Dupliquer une sélection sur place avec Cmd+D / Ctrl+D.
  • Les éléments collés apparaissent légèrement décalés par rapport aux originaux afin de ne pas les recouvrir.
Ces raccourcis agissent sur les éléments sélectionnés ; lorsque vous modifiez du texte, ils reprennent le fonctionnement habituel de copie et de collage de texte.

Nommer les écrans sur le canevas

Chaque écran affiche son nom sur un libellé au-dessus de lui sur le canevas. Un écran que vous n’avez pas encore nommé affiche Screen.
  • Double-cliquez sur le libellé pour renommer l’écran, puis appuyez sur Enter pour enregistrer — cliquer ailleurs enregistre également. Les noms peuvent comporter jusqu’à 100 caractères.
  • Cliquez une fois sur le libellé pour sélectionner l’écran, puis faites-le glisser pour le déplacer sur le canevas.

Ajuster l’opacité, le mode de fusion et les coins

Sélectionnez un élément pour affiner son apparence dans le panneau des propriétés :
  • Opacity (opacité) — définissez le degré de transparence de l’élément, de 0 à 100 %. Le même panneau contient un mode de fusion (Normal, Multiply, Screen, Overlay, et d’autres) qui détermine comment l’élément se mélange avec ce qui se trouve derrière lui.
  • Corners (coins) — arrondissez les coins de l’élément. Définissez un seul Corner radius (rayon des coins) pour les quatre, ou activez Per corner (par coin) pour donner au coin supérieur gauche, supérieur droit, inférieur droit et inférieur gauche leur propre rayon. Chaque valeur peut être un Token (jeton) de votre thème ou un montant Custom (personnalisé).

Zoomer jusqu’au pixel

Zoomez le canevas jusqu’à 25 600 % pour vérifier l’espacement et l’alignement de près. Au-delà de 200 %, des lignes de grille alignées sur les pixels apparaissent et deviennent plus visibles à mesure que vous zoomez, afin que vous puissiez aligner les éléments exactement.

Restaurer une version précédente

Chaque génération IA dans l’historique du chat conserve son résultat original. Si un écran a été modifié ou supprimé depuis sa génération, son message de chat affiche un bouton Restore — Restore original pour annuler les modifications, ou Restore / Restore all pour réapparaître les écrans supprimés. Utilisez-le pour revenir à un état connu et bon après une modification qui part dans la mauvaise direction. Survolez n’importe quel message dans le panneau de chat pour voir quand il a été envoyé. Les messages récents affichent l’heure ; les plus anciens affichent depuis combien de temps ils ont été envoyés (par exemple, « il y a 1 jour »), avec la date et l’heure complètes dans une info-bulle.

Actions en un clic

Screenshot 2026 05 06 At 14 29 34
Au-delà des modifications directes, vous pouvez demander à Flowstep d’explorer des alternatives :
  • Réessayez à partir de zéro — demandez à Flowstep de produire une version nouvelle de l’écran actuel avec une mise en page ou une direction visuelle différente.
  • Afficher l’écran suivant — demandez à Flowstep de générer ce qui vient logiquement ensuite dans le flux utilisateur.
  • Rendre plus joli — ajustez l’espacement, l’alignement et les couleurs dans le design. La mise en page reste la même.
Ces options vous permettent d’itérer rapidement sans avoir à écrire un prompt chaque fois.

Itération pour affiner

Le design est rarement parfait à la première tentative. Utilisez l’édition basée sur le chat pour chaque tour de rétroaction — décrivez ce qui fonctionne et ce qui ne fonctionne pas, et Flowstep ajuste à partir de là. Il n’y a pas de limite au nombre de fois que vous pouvez itérer sur un écran.
Lors de l’itération via chat, référencez des éléments spécifiques par nom ou emplacement pour obtenir des résultats plus précis. Par exemple : « Déplacez le bouton d’appel à l’action au bas de l’écran et rendez-le en pleine largeur » est plus efficace que « corrigez le bouton ».