L’onglet Design dans le panneau de droite contrôle l’apparence visuelle de chaque élément. Les propriétés disponibles dépendent du type d’élément, mais la plupart partagent des options de style communes.

Visibilité

Le bouton Visibility détermine si l’élément s’affiche à l’écran.

• Show (par défaut) : L’élément est toujours visible.
• Conditional : L’élément n’est visible que lorsque certaines conditions sont remplies. Consultez Visibilité conditionnelle pour plus d’informations.
• Hide : L’élément est toujours masqué. Utilisez cette option pour retirer temporairement un élément du flow sans le supprimer.

Remplissage

La section Fill contrôle l’arrière-plan de l’élément. Quatre types de remplissage sont disponibles : couleur unie, dégradé, image et vidéo.

Utilisez cette propriété pour définir l’image / vidéo principale de tout l’écran.

• Solid color . Utilisez le sélecteur de couleur, entrez une valeur hex, ou assignez un style de couleur de projet. Ajustez l’opacity pour rendre l’arrière-plan semi-transparent.
• Gradient . Ajoutez un remplissage en dégradé avec deux stops de couleur ou plus. Faites glisser les stops pour ajuster la transition, et modifiez l’angle du dégradé pour contrôler sa direction.

• Image ou Video . Définissez une image / vidéo comme arrière-plan de l’élément.

Bordure

Les bordures sont désactivées par défaut. Cliquez sur à côté de Border dans le panneau de droite pour en ajouter une. Pour supprimer une bordure, cliquez sur à côté de l’en-tête Border.

Lorsqu’une bordure est présente, configurez :

• Color : Utilisez le sélecteur de couleur, entrez une valeur hex, ou assignez un style de couleur de projet. Ajustez l’opacity pour rendre la bordure semi-transparente.
• Width : L’épaisseur de la bordure en pixels.

Coins

La section Corners contrôle le rayon de bordure (coins arrondis).

• Radius slider : Définit le même rayon pour les quatre coins
• Per-corner toggle : Activez pour définir un rayon différent pour chaque coin individuellement

Effets

Cliquez sur le bouton plus à côté de Effects pour ajouter un ou plusieurs effets visuels :

• Drop shadow : Une ombre derrière l’élément
• Inner shadow : Une ombre à l’intérieur des limites de l’élément
• Background blur : Flou de l’arrière-plan
• Layer blur : Flou de l’élément et de ses enfants

Vous pouvez empiler plusieurs effets sur le même élément. Basculez sa visibilité pour désactiver temporairement un effet.

Animation

Cliquez sur le bouton à côté de Animation pour ajouter un effet animé. Actuellement, Pulse est la seule animation disponible — l’élément s’agrandit et se rétrécit de façon rythmique pour attirer l’attention.

Configurez l’animation Pulse avec les paramètres suivants :

Paramètre	Description
Scale amount (%)	L’agrandissement de l’élément par rapport à sa taille d’origine
Duration (ms)	Durée d’un seul cycle d’animation
Delay between loops (ms)	Pause entre les répétitions
Shadow color	Couleur de l’effet d’ombre pulsée
Shadow size (px)	Taille de l’ombre pulsée

Prévisualiser l’animation

Le builder affiche des écrans statiques par défaut — les animations restent fixes jusqu’à ce que vous les activiez. Deux façons de le faire :

• Cliquez sur le bouton Toggle animations au-dessus de l’aperçu de l’appareil. Il active ou désactive les animations de l’écran — une fois activées, elles tournent en continu jusqu’à ce que vous cliquiez à nouveau. Le bouton n’apparaît que lorsque l’écran actif contient au moins une animation.
• Ouvrez le menu contextuel de l’écran (l’icône à trois points à côté de la couche d’écran) et choisissez Play Animation.

Apparence

• Opacity : Va de 0 % (transparent) à 100 % (opaque)
• Rotation : Entrez une valeur en degrés pour faire pivoter l’élément

Propriétés typographiques (éléments texte)

Les éléments texte affichent une section Typography avec les contrôles suivants :

Police

Cliquez sur le menu déroulant de police pour ouvrir le sélecteur de polices. Il comporte deux onglets :

• Styles : Liste les styles de texte enregistrés dans votre projet. Sélectionnez un style pour appliquer en une fois tous ses paramètres typographiques.
• Fonts : Liste toutes les familles de polices disponibles. Cherchez ou faites défiler pour trouver celle dont vous avez besoin. Les polices intégrées peuvent s’afficher différemment selon les appareils — pour un rendu cohérent, téléchargez une police personnalisée.

Taille et graisse

• Weight : Sélectionnez une graisse de police dans le menu déroulant
• Size : Sélectionnez une taille dans le menu déroulant ou saisissez une valeur personnalisée

Couleur

Cliquez sur l’échantillon de couleur pour ouvrir le sélecteur. Entrez une valeur hex, utilisez la palette, ou sélectionnez l’un des styles réutilisables. Ajustez le curseur d’opacité pour rendre le texte semi-transparent.

Alignement

Deux groupes de contrôles d’alignement :

• Horizontal : Gauche , Centre , ou Droite
• Vertical : Haut , Milieu , ou Bas

Décoration

• None : Aucune décoration (par défaut)
• Underline : Ajoute un soulignement au texte
• Strikethrough : Ajoute un barré

Troncature

Activez la troncature pour couper le texte qui dépasse le paramètre Max Lines. Cela est utile pour prendre en charge plusieurs langues : si une chaîne traduite est plus longue que l’originale, la troncature l’empêche de casser la mise en page.

Paramètres par état (éléments interactifs)

Les éléments interactifs prennent en charge plusieurs états visuels. Lorsque vous sélectionnez un tel élément, une section States apparaît dans le panneau de droite. Basculez entre les états pour configurer différentes propriétés visuelles pour chacun.

Chaque état peut remplacer n’importe quelle propriété visuelle — remplissage, bordure, couleur de typographie, opacité, etc.

États sélectionnables

Les éléments appartenant à un groupe sélectionnable (options de quiz, produits, onglets, bascules d’essai) proposent deux états par défaut :

• Default : L’apparence normale de l’élément
• Selected : L’apparence lorsque l’utilisateur a sélectionné cette option. Remplacez des propriétés comme le remplissage, la couleur de bordure et la couleur du texte pour mettre en évidence le choix actif

Pour styliser un élément sélectionnable lorsqu’il n’est pas interactif, ajoutez un troisième état manuellement. Ouvrez States settings et ajoutez un Disabled state.

L’état Disabled est conditionnel. Sélectionnez-le et cliquez sur Set conditions pour définir quand l’élément devient désactivé à l’exécution, par exemple lorsqu’un champ requis est vide.

États de champ de saisie

Les champs de saisie proposent des états supplémentaires :

• Default : Apparence normale, sans focus
• Active : Le champ est actif et prêt pour la saisie
• Invalid : La valeur saisie ne passe pas la validation
• Disabled : Le champ n’est pas interactif

Autres éléments avec états

Quelques éléments exposent un style spécifique à l’état en dehors du schéma standard Default / Selected / Disabled :

• Étapes de l’indicateur de progression — trois états par étape : Completed, Current et Upcoming.
• Points de carrousel — deux variantes de couleur : Color pour les points inactifs et Active Color pour le point de la diapositive actuelle.

Styles réutilisables

Le panneau Styles dans la barre latérale gauche vous permet de définir des styles réutilisables qui s’appliquent à tout votre flow. Deux types de styles sont disponibles : les styles de texte et les styles de couleur. Vous devez utiliser les styles de couleur pour activer la prise en charge du mode sombre.

Styles de texte

Les styles de texte stockent un ensemble complet de paramètres typographiques — famille de polices, graisse, taille, interlignage, alignement et décoration. Chaque modèle 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 et sélectionnez l’onglet Text.
2. Cliquez sur Create style.
3. Entrez un nom et configurez les paramètres typographiques.
4. Cliquez sur Create.

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

Styles de couleur

Les styles de couleur sont des couleurs nommées que vous pouvez référencer dans tout votre flow. Chaque style de couleur a un nom (comme « Primary text » ou « Brand »), une valeur hex et un compteur d’utilisation indiquant combien d’éléments y font référence.

Pour créer un style de couleur :

1. Ouvrez le panneau Styles et sélectionnez l’onglet Colors.
2. Cliquez sur Create style.
3. Entrez un nom et choisissez une couleur.

Lorsque vous mettez à jour un style de couleur, tous les éléments qui y font référence se mettent à jour automatiquement.

Mode sombre

Si nécessaire, vous pouvez ajouter deux variantes à chaque style de couleur — une pour le mode clair et une pour le mode sombre . Le SDK applique automatiquement la bonne variante selon le thème de couleur actuel de l’appareil.

Pour prévisualiser le mode sombre dans le builder, utilisez le theme toggle dans la barre d’outils inférieure.