Skip to main content
Un thème est une palette de couleurs et un arrondi d’angles partagés pour vos écrans. Chaque fichier a un thème et une apparence (clair ou sombre), et les écrans sont stylisés avec les jetons du thème. Modifiez un thème, et tous les écrans qui l’utilisent suivent la modification. Votre équipe travaille ainsi à partir d’un même ensemble de décisions, au lieu de redéfinir les couleurs dans chaque prompt. Les thèmes que vous créez ou générez sont enregistrés dans votre organisation et listés sous Themes sur Home. Tous les fichiers de l’organisation peuvent donc les utiliser.

​
Choisir un thème pour un fichier

Choisissez le thème et l’apparence des nouveaux écrans depuis l’éditeur de prompt, à l’intérieur d’un fichier. Le bouton de thème n’est pas disponible dans la zone de prompt sur Home.
1

Ouvrir le menu des thèmes

Dans l’éditeur de prompt, cliquez sur le bouton de thème. Il affiche la pastille du thème actuel, ou une roue chromatique lorsque le thème est sur Automatic. Le menu est intitulé Theme for new screens.
2

Choisir un thème

Sélectionnez Automatic, l’un des thèmes de votre organisation (listés en premier), ou un thème intégré : Default, Blue, Grayscale, Green, Ice, Orange, Red, Rose, Violet ou Yellow.
3

Choisir une apparence

Sous Appearance, choisissez Light ou Dark, ou Automatic pour laisser Flowstep décider écran par écran à partir de votre prompt. Par exemple, « a dark dashboard » (un tableau de bord sombre) donne un rendu sombre.
Votre choix s’applique aux écrans que vous générez ensuite. Les écrans déjà présents sur le canevas conservent leur apparence.

​
Laisser Flowstep concevoir un thème

Lorsqu’un fichier n’a pas encore de thème (un nouveau fichier dont le thème est resté sur Automatic), Flowstep conçoit un thème personnalisé en même temps que les premiers écrans générés. Une étape Designing theme apparaît dans le chat pendant ce travail. Flowstep crée le thème à partir de :
  • Les couleurs que vous mentionnez dans votre prompt
  • Les couleurs de vos consignes de conception
  • Les couleurs de marque issues des pièces jointes et des liens que vous collez
  • Le produit et l’ambiance décrits dans votre prompt, lorsqu’il n’y a pas d’information plus précise
Le thème reçoit un nom court, une palette complète pour les modes clair et sombre, ainsi qu’un niveau d’arrondi. Il est enregistré dans votre organisation, sous Themes sur Home, et le fichier l’utilise pour chaque écran généré ensuite. Une fois qu’un fichier a un thème, Flowstep n’en conçoit pas un autre de sa propre initiative. Pour obtenir un thème neuf, sélectionnez à nouveau Automatic dans le menu des thèmes. La génération suivante en conçoit un nouveau, et le fichier s’y fixe. Si Flowstep ne peut pas concevoir de thème, le fichier revient à un thème intégré.
Mentionnez les couleurs de votre marque dans votre premier prompt, ou définissez-les dans vos consignes de conception avant de générer. Le thème généré partira alors de ces couleurs.

​
Modifier le thème d’un seul écran

Pour restyler un seul écran sans toucher au reste du fichier :
  1. Sélectionnez l’écran sur le canevas.
  2. Dans le menu situé au-dessus de l’écran, cliquez sur le bouton Theme.
  3. Choisissez l’un des thèmes de votre organisation ou un thème intégré, ou basculez entre Light et Dark.
Changer de thème redessine l’écran instantanément. Basculer entre Light et Dark demande à l’IA de restyler l’écran, comme une modification par IA. Le menu est indisponible pendant qu’une génération est en cours.

​
Modifier un thème

Ouvrez un thème depuis la section Themes sur Home. L’éditeur de thème affiche un aperçu en direct du thème, avec Theme settings à droite. Utilisez les boutons Light et Dark en haut pour changer l’aperçu, et cliquez sur le nom du thème pour le renommer.
  • Colors : chaque groupe de couleurs a une pastille pour le mode clair et une pour le mode sombre : Primary, Secondary, Accent, Muted, Destructive, Background, Card, Popover, Border, Input, Ring, Charts et Sidebar. Cliquez sur une pastille pour modifier les couleurs du groupe, par exemple sa couleur de remplissage et sa couleur de texte, avec le sélecteur de couleurs ou une valeur hexadécimale.
  • Radius : choisissez un niveau d’arrondi (Square, Slight, Balanced, Soft ou Round), ou sélectionnez Custom et faites glisser Base radius pour définir le vôtre.
Vos modifications sont enregistrées en tant que brouillon, si bien que les écrans ne changent pas pendant que vous travaillez. Lorsque vous êtes prêt :
  • Cliquez sur Publish pour mettre à jour tous les écrans qui utilisent le thème. Flowstep confirme avec le message « Published. Screens using this theme are updating. » (Publié. Les écrans qui utilisent ce thème sont en cours de mise à jour.)
  • Cliquez sur Reset changes pour abandonner vos modifications non publiées. Les écrans qui utilisent le thème ne sont pas affectés.
Pour supprimer un thème, cliquez sur Delete theme en bas de Theme settings, ou sur l’icône de corbeille à côté du thème dans la liste Themes sur Home. Un thème supprimé n’est plus proposé dans les menus de thèmes. Les écrans qui l’utilisent déjà conservent toutefois leur apparence, et rien ne change sur votre canevas.
Tous les membres de votre organisation, à l’exception des Guest (invités), peuvent modifier et supprimer les thèmes.

​
Lier les couleurs et les angles à votre thème

Les couleurs et les angles peuvent pointer vers un jeton de thème au lieu d’une valeur fixe. Une valeur liée suit le thème de l’écran. Lorsque le thème change (un autre thème, une modification publiée ou un passage du mode clair au mode sombre), les couleurs et les angles liés se mettent à jour avec lui. Colors : dans le panneau Fill ou Border, cliquez sur la pastille de couleur. Dans l’onglet Token, recherchez ou choisissez un jeton parmi les groupes Theme, Base ou Tailwind. Utilisez l’onglet Custom pour une couleur exacte. Une couleur liée affiche le nom de son jeton dans le panneau, et vous pouvez toujours ajuster son opacité. Corners : dans le panneau Corners, cliquez sur un aperçu d’angle. Dans l’onglet Token, choisissez un niveau (par exemple, md ou lg). Dans l’onglet Custom, saisissez une valeur exacte en pixels. Un angle lié affiche le nom de son jeton, et modifier l’arrondi du thème le réarrondit. Pour redonner une valeur fixe à une valeur liée, cliquez sur Detach from token. La couleur ou l’angle conserve son apparence actuelle, mais ne suit plus le thème.

​
Bon à savoir

  • Les écrans conservent leur propre thème : chaque écran mémorise son thème et son apparence. Changer le thème du fichier n’affecte que les écrans que vous générez ensuite. Utilisez le menu Theme de chaque écran pour restyler les écrans existants.
  • Versions publiées uniquement : les écrans affichent la version publiée d’un thème. Les brouillons ne sont visibles que dans l’éditeur de thème, jusqu’à leur publication.
  • Les liens vers les jetons sont conservés : les couleurs de thème utilisées dans les ombres, les filtres et les dégradés restent liées au thème lorsque Flowstep modifie ou régénère un écran.
  • Niveaux d’arrondi fixes : les jetons d’angle none et full sont toujours carrés et entièrement arrondis, quel que soit l’arrondi du thème.