Utilisez les thèmes pour garder les couleurs et les arrondis cohérents dans les écrans Flowstep

Un thème est une palette de couleurs partagée et un arrondi de coins pour vos écrans. Chaque fichier a un thème et une apparence (clair ou sombre), et les écrans sont stylisés à l’aide des jetons du thème. Modifiez un thème, et chaque écran qui l’utilise suit la modification : votre équipe travaille ainsi à partir d’un seul ensemble de décisions, au lieu de répéter 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 dans Home, afin que tout fichier de l’organisation puisse les utiliser.

​

Choisir un thème pour un fichier

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

​

Laisser Flowstep concevoir un thème

Lorsqu’un fichier n’a pas encore de thème — un nouveau fichier dont le thème est laissé sur Automatic —, Flowstep conçoit un thème personnalisé en même temps que les premiers écrans qu’il génère. Vous verrez une étape Designing theme dans le clavardage pendant qu’elle travaille. Flowstep construit le thème à partir de :

• Les couleurs que vous nommez dans votre prompt
• Les couleurs de vos directives de conception
• Les couleurs de marque provenant 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 rien de plus précis sur quoi se baser

Le thème reçoit un nom court, une palette complète pour les modes clair et sombre, ainsi qu’une étape d’arrondi. Il est enregistré dans votre organisation sous Themes dans Home, et le fichier l’utilise pour chaque écran généré par la suite. 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 tout neuf, sélectionnez de nouveau Automatic dans le menu des thèmes — la génération suivante conçoit un nouveau thème, et le fichier s’y fixe. Si Flowstep ne peut pas concevoir de thème, le fichier revient à un thème intégré.

​

Changer le thème d’un écran

Pour restyler un seul écran sans toucher au reste du fichier :

1. Sélectionnez l’écran sur le canevas.
2. Dans le menu 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 passez de Light à Dark.

Changer de thème redessine l’écran instantanément. Passer de Light à Dark demande à l’IA de restyler l’écran, comme pour une modification par IA. Le menu n’est pas disponible pendant qu’une génération est en cours.

​

Modifier un thème

Ouvrez un thème depuis la section Themes dans 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 comporte un échantillon pour le mode clair et un pour le mode sombre : Primary, Secondary, Accent, Muted, Destructive, Background, Card, Popover, Border, Input, Ring, Charts et Sidebar. Cliquez sur un échantillon pour modifier ses couleurs — par exemple, la couleur de remplissage et la couleur du texte d’un groupe — à l’aide du sélecteur de couleur ou d’une valeur hexadécimale.
• Radius — choisissez un niveau d’arrondi (Square, Slight, Balanced, Soft ou Round), ou choisissez Custom et faites glisser Base radius pour définir votre propre valeur.

Vos modifications sont enregistrées comme brouillon, de sorte que les écrans ne changent pas pendant que vous travaillez. Lorsque vous êtes prêt :

• Cliquez sur Publish pour mettre à jour chaque écran qui utilise le thème. Flowstep confirme avec « 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 annuler vos modifications non publiées. Les écrans qui utilisent le thème ne sont pas touchés.

Pour supprimer un thème, cliquez sur Delete theme au bas de Theme settings, ou sur l’icône de corbeille à côté de celui-ci dans la liste Themes de Home. Un thème supprimé n’est plus proposé dans les menus de thèmes, mais les écrans qui l’utilisent déjà conservent leur apparence : rien ne change sur votre canevas.

​

Lier les couleurs et les arrondis à votre thème

Les couleurs et les arrondis 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 arrondis liés se mettent à jour avec lui. Colors — dans le panneau Fill ou Border, cliquez sur l’échantillon de couleur. Sous l’onglet Token, recherchez ou choisissez un jeton dans 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 de coin. Sous l’onglet Token, choisissez une étape (par exemple, md ou lg); sous l’onglet Custom, saisissez une valeur exacte en pixels. Un coin lié affiche le nom de son jeton, et la modification de l’arrondi du thème le réarrondit. Pour transformer une valeur liée en valeur fixe, cliquez sur Detach from token. La couleur ou le coin conserve son apparence actuelle, mais ne suit plus le thème.

​

Bon à savoir

• Les écrans conservent leur propre thème — chaque écran retient 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 survivent aux modifications — les couleurs du 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.
• Les étapes d’arrondi qui ne s’adaptent pas — les jetons de coin none et full sont toujours carrés et entièrement arrondis, quel que soit l’arrondi du thème.