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

Deux façons de modifier

Effectuez des modifications directement sur le canevas 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 une étiquette, ou ajuster 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 telles que 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 canevas. Continuez la modification ou passez à l’écran suivant.

Modifier une partie seulement d’un écran

Vous n’avez pas besoin de modifier des écrans entiers. Sélectionnez un sous-élément — une carte, un bouton, une étiquette de texte — et votre prompt de chat s’applique uniquement à celui-ci, laissant le reste de l’écran inchangé.
  • Passez au mode Direct selection avec Maj+V (ou le menu déroulant sur le bouton de la barre d’outils Select) 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 la sélection directe temporairement. Échap quitte la sélection directe.
  • Sélectionnez des sous-éléments sur plusieurs écrans avec Cmd+Maj — un seul prompt peut modifier jusqu’à 6 écrans par message.
Quand un élément image est sélectionné (en dehors du mode fil de fer), un panneau Image apparaît dans le panneau des propriétés : apercevez l’image, remplacez-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, puisque les copies sont envoyées au presse-papiers de votre système.
  • Copiez avec Cmd+C (Mac) / Ctrl+C (Windows), coupez avec Cmd+X / Ctrl+X, et collez avec Cmd+V / Ctrl+V.
  • Dupliquez 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 ordinaire de la copie et du collage de texte.

Nommer les écrans sur le canevas

Chaque écran affiche son nom sur une étiquette au-dessus de lui, sur le canevas. Un écran que vous n’avez pas encore nommé affiche Screen.
  • Double-cliquez sur l’étiquette pour renommer l’écran, puis appuyez sur Enter pour enregistrer — cliquer ailleurs enregistre aussi. Les noms peuvent comporter jusqu’à 100 caractères.
  • Cliquez une fois sur l’étiquette 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 autres) qui détermine comment l’élément se mélange à 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 (coin par coin) pour donner au coin supérieur gauche, au coin supérieur droit, au coin inférieur droit et au coin 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, ce qui vous permet d’aligner les éléments exactement.

Restaurer une version antérieure

Chaque génération d’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 ramener les écrans supprimés. Utilisez-le pour revenir à un état connu et bon après une modification qui va 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 infobulle.

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 :
  • Try again from scratch — demandez à Flowstep de produire une version nouvelle de l’écran actuel avec une mise en page ou une direction visuelle différente.
  • Show the next screen — demandez à Flowstep de générer ce qui vient logiquement ensuite dans le flux d’utilisateur.
  • Make it pretty — ajustez l’espacement, l’alignement et les couleurs dans l’ensemble du 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 arrive rarement parfait du premier coup. Utilisez la modification basée sur le chat pour chaque tour de commentaires — décrivez ce qui fonctionne et ce qui ne fonctionne pas, et Flowstep s’ajuste à partir de là. Il n’y a aucune limite à la fréquence à laquelle vous pouvez itérer sur un écran.
Lors de l’itération via le chat, référencez les éléments spécifiques par leur nom ou leur 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 pleine largeur » est plus efficace que « réparez le bouton ».