Créez un style pour enregistrer des paramètres de texte ou un remplissage (comme une couleur, un dégradé ou une image de fond), et réutilisez-le sur des éléments dans plusieurs écrans. Lorsque vous modifiez un style, la modification s’applique à tous les éléments et écrans qui l’utilisent.

Chaque flow possède son propre ensemble de styles.

Ouvrez le panneau Styles pour créer, parcourir et modifier les styles de votre flow :

• Styles de texte : Paramètres typographiques (police, graisse, taille).
• Styles de couleur : Remplissages tels que les couleurs, les dégradés et les images. Un même style de couleur peut inclure des versions distinctes pour le mode clair et le mode sombre.

Styles de texte

Les styles de texte regroupent un ensemble de paramètres typographiques : famille de polices, graisse, taille, interligne et espacement des lettres. Chaque template de flow inclut des préréglages par défaut, et vous pouvez créer des styles personnalisés.

Pour créer un style de texte :

1. Ouvrez le panneau Styles .
2. Dans l’en-tête du panneau, cliquez sur Create style.
3. Définissez Type sur Text, entrez un nom et configurez les paramètres typographiques.
4. Cliquez sur Create.

Pour enregistrer les paramètres typographiques actuels d’un élément texte en tant que nouveau style de texte, cliquez sur à côté des onglets du sélecteur de police. L’élément utilise alors le nouveau style.

Pour appliquer un style de texte, sélectionnez un élément texte et choisissez le style dans le menu déroulant des polices de la section Typography.

Pour modifier un style de texte, cliquez sur son entrée dans le panneau Styles, modifiez ses paramètres, puis cliquez sur Save.

Styles de couleurs

Un style de couleur est un remplissage enregistré : une couleur, un dégradé, une image, une vidéo, ou une combinaison de ces éléments. Si vous utilisez un thème sombre, il peut avoir des versions spécifiques à chaque thème. Le chiffre affiché dans l’entrée du style indique le nombre d’éléments et d’écrans qui l’utilisent.

Créer un style de couleur

Pour créer un style de couleur :

1. Ouvrez le panneau Styles .
2. Dans l’en-tête du panneau, cliquez sur Create style.
3. Définissez Type sur Color et saisissez un nom.
4. Configurez le style. Vous pouvez modifier la couleur ou le type de remplissage de son calque, et ajouter d’autres calques par-dessus.
5. Cliquez sur Save.

Pour transformer la valeur actuelle d’un calque de remplissage ou d’une couleur en style, cliquez sur son swatch, puis sur l’icône à côté des onglets Custom et Styles, et cliquez sur Save. Le calque de remplissage ou la couleur utilise désormais ce style.

Modifier un style de couleur

Pour modifier un style de couleur :

1. Ouvrez le panneau Styles .
2. Sélectionnez l’onglet Colors.
3. Cliquez sur une entrée de style.
4. Chaque version peut contenir plusieurs calques. Cliquez sur l’échantillon pour définir le calque selon son type de remplissage :
   • Couleur unie
   • Dégradé
   • Image ou vidéo

Couleurs unies

1. Définissez la couleur : saisissez une valeur hexadécimale ou cliquez sur l’aperçu pour en choisir une.
2. Réglez l’opacité avec le curseur.
3. Cliquez sur Save.

Dégradés

1. Sélectionnez le type de remplissage Gradient.
2. Définissez les points d’arrêt, leurs couleurs et la Direction.
3. Cliquez sur Save.

Images et vidéos

Un élément Image ou Vidéo ne peut pas avoir un fichier différent pour le thème sombre. À la place, créez un conteneur et définissez son arrière-plan sur un style de couleur. Dans chaque version du style, configurez une couche image ou vidéo :

1. Sélectionnez le type de remplissage Image ou Video.
2. Importez le fichier source pour la locale sélectionnée dans la barre d’outils inférieure. Vous pouvez cliquer sur Replace si un fichier est déjà importé.
3. Cliquez sur Save.

Styles multi-couches

Chaque version d’un style de couleur peut contenir plusieurs couches. Vous pouvez utiliser des styles multi-couches pour créer des visuels plus complexes, comme des images teintées.

Pour ajouter un calque, cliquez sur l’entrée de style. Ensuite, dans la section Properties, Light ou Dark, cliquez sur le bouton . Un nouveau calque apparaît au-dessus des calques existants. Pour modifier l’ordre des calques, faites glisser leurs lignes. Configurez le nouveau calque, puis cliquez sur Save.

Les calques ne s’affichent pas tous partout où vous appliquez le style. Certains calques ne sont visibles que si vous appliquez le style à certaines propriétés ou certains éléments :

• Remplissage (champs de saisie et sélecteurs) : Couche inférieure uniquement. Les autres couches sont ignorées.
• Remplissage (tous les autres éléments) : Toutes les couches.
• Bordure (champs de saisie et sélecteurs) : Une seule couleur unie ou dégradé. Les couches image et vidéo sont ignorées.
• Bordure (tous les autres éléments) : Couleurs unies et dégradés. Les couches image et vidéo sont ignorées.
• Couleur du texte : Couches de couleur unie uniquement. Les couches dégradé, image et vidéo sont ignorées. Si une version ne contient aucune couche de couleur unie, le texte n’a pas de couleur dans ce mode et est invisible.
• Icône, ombre et autres couleurs : Ne prend pas en charge les styles multicouches. Vous ne pouvez appliquer qu’un style de couche unique avec une couleur unie.

Appliquer un style de couleur

Pour appliquer un style de couleur à un élément, cliquez sur le swatch de son calque de remplissage, de sa couleur de texte, de sa couleur de bordure ou de sa couleur d’icône. Remplacez la valeur statique par le style en cliquant sur l’onglet Styles et en sélectionnant l’entrée de style souhaitée. Si aucun style ne correspond à la valeur dont vous avez besoin, enregistrez la valeur actuelle comme style.

Pour appliquer un style à plusieurs éléments d’un écran, demandez à l’AI Editor, par exemple : Apply the Card background style to all cards. Pour configurer des styles et les appliquer à l’ensemble du flow, utilisez le skill flow-generator.

Vous ne pouvez pas appliquer un style de couleur à un élément Image ou Vidéo, car ces éléments n’ont pas de remplissage. À la place, créez un conteneur et définissez son arrière-plan.

Gérer les styles

Dans le panneau Styles :

• Pour renommer un style, cliquez sur son entrée, modifiez le champ Name, puis cliquez sur Save.
• Pour dupliquer un style, faites un clic droit sur son entrée et sélectionnez Duplicate.
• Pour supprimer un style, cliquez sur son entrée, puis cliquez sur Delete style. Si des éléments utilisent ce style, sélectionnez le style qui le remplacera.
• Pour modifier l’ordre des styles, faites glisser leurs entrées vers le haut ou vers le bas dans la liste.
• Pour copier des styles dans un autre flow, sélectionnez leurs entrées (Maj+clic pour en sélectionner plusieurs) et appuyez sur ⌘C / Ctrl+C. Ouvrez le même onglet (Text ou Colors) dans l’autre flow et appuyez sur ⌘V / Ctrl+V.

Mode sombre

Un style de couleur peut avoir une valeur distincte pour le mode sombre. Lorsque l’appareil de l’utilisateur est en mode sombre, le flow utilise cette valeur à la place.

Pour utiliser des valeurs sombres, ajoutez un thème sombre au flow. Ensuite, modifiez la valeur sombre de chaque style qui doit différer en mode sombre.