L’onglet Design du 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 des éléments partagent des options de style communes.

Skip the Design tab entirely.

Tell the AI Editor to “give the paywall a dark, premium feel” and it restyles every element at once — fills, corners, type, and spacing.

Explore the AI Editor›

Visibilité

Le bouton Visibility détermine si l’élément est affiché à l’écran.

• Show (par défaut) : L’élément est toujours visible.
• Conditional : L’élément est visible uniquement lorsque des conditions spécifiques 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 principale / la vidéo de tout l’écran.

• Couleur unie . Utilisez le sélecteur de couleur, entrez une valeur hexadécimale ou attribuez un style de couleur global. Ajustez l’opacité pour rendre l’arrière-plan semi-transparent.
• Dégradé . Ajoutez un remplissage en dégradé avec deux points de couleur ou plus. Faites glisser les points pour ajuster la transition et modifiez l’angle du dégradé pour en contrôler la direction.

• Image ou Vidéo . Définit 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é du titre Border.

Lorsqu’une bordure est présente, configurez :

• Color : utilisez le sélecteur de couleur, saisissez une valeur hexadécimale ou attribuez un style de couleur global. 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).

• Curseur de rayon : Définit le même rayon pour les quatre coins
• Bascule par coin : Activez cette option 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 contours de l’élément
• Background blur : floute l’arrière-plan
• Layer blur : floute l’élément et ses enfants

Vous pouvez cumuler plusieurs effets sur un même élément. Activez ou désactivez la 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éduit rhythmiquement pour attirer l’attention.

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

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

Prévisualiser l’animation

Par défaut, le builder affiche des écrans statiques — les animations restent immobiles jusqu’à ce que vous les activiez. Deux façons de procéder :

• Cliquez sur le bouton Toggle animations au-dessus de la prévisualisation 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 si l’écran actif contient au moins une animation.
• Ouvrez le menu contextuel de l’écran (l’icône à trois points à côté du calque d’écran) et choisissez Play Animation.

Apparence

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

Propriétés de typographie (é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 d’un coup tous ses paramètres typographiques.
• Fonts : liste toutes les familles de polices disponibles. Recherchez 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, importez 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 la pastille de couleur pour ouvrir le sélecteur de couleurs. Saisissez une valeur hexadécimale, 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 texte barré

Troncature

Activez la troncature pour couper le texte qui dépasse le paramètre Max Lines. C’est utile lorsque vous prenez en charge plusieurs langues : si une chaîne traduite est plus longue que l’original, la troncature évite que la mise en page ne soit cassée.

Paramètres spécifiques aux états (é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. Passez d’un état à l’autre pour configurer des propriétés visuelles différentes 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, interrupteurs 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 de texte pour mettre en évidence le choix actif

Pour appliquer un style à un élément sélectionnable lorsqu’il n’est pas interactif, ajoutez manuellement un troisième état. 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 obligatoire est vide.

États de saisie

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

• Default : Apparence normale, sans focus
• Active : Le champ est actif et prêt à recevoir une saisie
• Invalid : La valeur saisie échoue à la validation
• Disabled : Le champ n’est pas interactif

Autres éléments avec des états

Certains éléments exposent un style propre à leurs états en dehors du modèle standard Default / Selected / Disabled :

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

Styles réutilisables

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

Styles de texte

Les styles de texte regroupent un ensemble complet de paramètres typographiques : famille de polices, graisse, taille, interligne, 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. Saisissez 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 de 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 possède un nom (comme « Texte principal » ou « Marque »), une valeur hexadécimale 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. Saisissez un nom et choisissez une couleur.

Lorsque vous modifiez 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 variante correcte en fonction du mode de couleur actuel de l’appareil.

Pour prévisualiser le mode sombre dans le builder, utilisez le sélecteur de thème dans la barre d’outils inférieure.