Interface du Flow Builder

L’interface principale du Flow Builder regroupe tous les outils nécessaires pour ajouter des éléments visuels, modifier leurs propriétés et ajuster la logique du flow. Cet article décrit chaque zone de l’interface : son rôle et où la trouver.

Contrôles du projet et raccourcis utiles (barre d’outils supérieure)

• Close : Quitter l’éditeur de flow et revenir à la page des flows.
• App name : Identifie l’application à laquelle appartient le flow.
• All flows : Ouvre la liste de tous les flows pour cette application.
• Flow status : L’icône à gauche du nom du flow indique le statut du flow actuel :
  • Draft
  • Publishing (indicateur de chargement)
  • Failed
  • ou Live .
• Rename the flow : Cliquez sur le nom du flow pour le renommer. Plusieurs flows peuvent avoir le même nom — donnez à chaque nouveau flow un nom unique.
• View mode toggle : Basculez entre la vue de conception et la vue Remote Config.
• Undo/Redo : Cliquez sur les icônes en forme de flèche pour annuler ou rétablir vos modifications. Vous pouvez aussi utiliser ⌘Z / Ctrl+Z pour annuler.
• Save draft / Publish : Cliquez sur Save draft pour enregistrer votre progression sans mettre en ligne (⌘ / Ctrl+S). Ouvrez le menu déroulant pour accéder au bouton Publish. Vous ne pouvez ajouter votre flow à un placement qu’après l’avoir publié.

Zone de prévisualisation (centre)

La zone centrale de l’espace de travail simule l’apparence de votre flow sur un appareil mobile.

• Pour sélectionner un élément et modifier ses propriétés, cliquez dessus. Pour sélectionner un élément enfant à l’intérieur d’un conteneur, cliquez d’abord sur le conteneur, puis sur l’élément enfant.
• Pour modifier les propriétés de l’écran lui-même, cliquez en dehors de tout élément, ou sélectionnez l’écran dans le panneau Screens and Layers.
• Pour changer l’ordre d’un élément, faites glisser son entrée vers le haut ou vers le bas dans le panneau Screens and Layers.

Barre d’écran actif (au-dessus de l’aperçu de l’appareil)

• Screen name — un badge avec le nom de l’écran actuel.
• Toggle animations — active ou désactive les aperçus d’animation des éléments ; ils s’exécutent en continu jusqu’à ce qu’ils soient désactivés. Visible uniquement lorsque l’écran actif contient au moins une animation. N’a aucun effet sur la visibilité des animations sur l’appareil réel.
• Add element — ouvre la bibliothèque d’éléments à l’écran actuel. Équivalent au + en haut du panneau Screens and Layers — pratique quand le panneau est replié.

Commandes d’affichage (barre d’outils inférieure)

Les outils de la barre d’outils inférieure permettent de contrôler l’aperçu.

• Device : Sélectionnez l’un des modèles iPhone ou téléphone Android disponibles pour modifier les dimensions de la fenêtre d’affichage et le contour de l’appareil.
• Screen orientation : Basculez entre les modes portrait et paysage pour prévisualiser votre flow dans différentes orientations.
• Color scheme : Passez du mode clair au mode sombre pour voir comment votre design s’adapte aux différents thèmes.
• Locale : Sélectionnez une locale pour prévisualiser votre flow avec du contenu localisé.
• View options : Activez ou désactivez le biseau de l’appareil et les guides de zone de sécurité.

Propriétés de l’écran et des éléments (panneau de droite)

Paramètres et mise en page de l’écran

Lorsqu’aucun élément n’est sélectionné, le panneau de droite vous permet d’ajuster les propriétés de l’écran de flow actif, notamment :

• Les interactions avec l’interface système (par exemple, la visibilité de la barre d’état)
• Les règles de mise en page automatique
• L’arrière-plan (couleur, image ou vidéo)
• La taille des marges internes
• Le comportement de défilement vertical

Si l’écran contient certains éléments, comme des quiz interactifs, cette liste s’étoffera des propriétés correspondantes.

Propriétés des éléments

Lorsque vous sélectionnez un élément, le panneau de droite vous permet de modifier ses propriétés de style et d’interaction.

Propriétés de design

L’onglet Design vous permet de configurer l’apparence visuelle et la mise en page de l’élément sélectionné :

• Visibility : Afficher ou masquer l’élément. Activez la visibilité Conditional pour définir des règles déterminant quand l’élément doit être visible.
• Position : Choisir entre le positionnement Relative, Absolute ou Fixed.
• Content (éléments texte uniquement) : Modifier le contenu textuel de l’élément, insérer des variables et gérer les localisations.
• Typography (éléments texte uniquement) : Configurer la police, la graisse, la taille, la couleur, l’alignement, la décoration et la troncature.
• Spacing : Définir les marges et le rembourrage de l’élément.
• Effects : Ajouter des ombres portées, des ombres intérieures, un flou d’arrière-plan ou un flou de calque.
• Animation : Ajouter des effets animés (par exemple, Pulse) et configurer leur durée et leur intensité.
• Appearance : Ajuster l’opacité et la rotation.
• Layout : Choisir une direction de mise en page (verticale ou horizontale) et déterminer comment les éléments enfants sont répartis.

Propriétés d’interactions

L’onglet Interactions vous permet de définir ce qui se passe lorsque l’utilisateur interagit avec l’élément sélectionné. Chaque interaction se compose d’un déclencheur et d’une ou plusieurs actions :

• Les déclencheurs définissent quand quelque chose se produit — par exemple, On Tap (l’utilisateur appuie sur l’élément).
• Les actions définissent ce qui se passe — par exemple, naviguer vers un autre écran ou modifier la valeur d’une variable. Ajoutez plusieurs actions à un seul déclencheur pour les enchaîner en séquence.

Vous pouvez ajouter plusieurs déclencheurs au même élément pour exécuter plusieurs actions dans l’ordre.

Panneau gauche

Le panneau gauche change de fonctionnalité selon le bouton actif. Vous pouvez choisir entre :

• Écrans et calques
• Ajouter un élément
• Produits
• Styles
• Variables
• Localisation
• Éditeur IA

Écrans et Couches

Le bouton Couches ouvre le panneau Écrans et Couches (affiché par défaut à l’ouverture du flow builder).

Il affiche chaque écran sous forme d’arborescence de couches. Chaque élément d’un écran est une couche, et les conteneurs ont leurs éléments enfants imbriqués à l’intérieur. Vous pouvez glisser-déposer les couches pour les réorganiser.

Sélection d’éléments

Si vous cliquez sur le bouton plus , le panneau gauche affiche la liste des éléments d’interface disponibles et leurs variations. Cliquez sur une entrée pour l’ajouter à l’écran actuel en tant que nouveau calque.

Produits

Le bouton produits ouvre la liste des produits. Il indique quels produits sont assignés à chaque écran de votre flow.

Cette liste est en lecture seule. Pour assigner des produits à un écran, ajoutez un élément Produit et configurez-le dans le panneau de droite. Pour créer ou modifier des produits, utilisez la page Products dans l’Adapty Dashboard.

Styles enregistrés

Le bouton Styles ouvre les styles enregistrés.

Ici, vous pouvez modifier et gérer les styles globaux. Si plusieurs éléments de votre flow utilisent la même typographie ou la même couleur, enregistrez ces données comme style global. Vous pourrez ensuite les réutiliser en un seul clic.

Actuellement, Flow Builder prend en charge deux types de styles globaux — les styles de police et les styles de couleur. Chaque style de couleur peut optionnellement avoir une valeur distincte pour le mode sombre.

Variables

Le bouton entre crochets ouvre Variables.

Ici, vous pouvez créer et gérer des variables pour votre flow. À l’exécution, le SDK remplace les espaces réservés aux variables par des valeurs réelles — attributs utilisateur, prix des produits, chaînes localisées, etc.

Les variables sont regroupées en deux onglets :

• Custom : Variables que vous créez et contrôlez via des actions.
• Elements : Valeurs déterminées par l’interaction de l’utilisateur — comme les réponses à un quiz, les états d’un toggle ou la sélection d’un onglet.

Les variables de produit — prix, nom et autres données produit — n’apparaissent pas dans ce panneau. Référencez-les directement lors de la modification d’un élément texte.

Utilisez les variables pour :

• Lier du texte : Afficher du contenu dynamique à la place de chaînes statiques.
• Contrôler la visibilité : Afficher ou masquer des éléments selon des conditions (par exemple, masquer un bouton de mise à niveau pour les utilisateurs premium).
• Interagir avec l’utilisateur : Accéder aux données saisies dans des champs de formulaire, comme des formulaires ou des quiz.

Localisation

La vue Localisation vous permet de gérer le contenu traduisible de votre flow. Elle affiche un tableau de toutes les chaînes de texte et éléments multimédias, organisés par écran, avec une colonne par locale. Depuis cette vue, vous pouvez :

• Ajoutez de nouvelles langues et modifiez les chaînes localisées directement.
• Sélectionnez la langue par défaut de votre flow.
• Suivez l’état des traductions — chaque ligne est marquée Done ou Missing.
• Filtrez par écran ou affichez uniquement les traductions manquantes.
• Import ou Export le contenu pour le traduire en masse en dehors d’Adapty.

Éditeur IA

Le bouton sparkle ouvre le chat de l’Éditeur IA.

Décrivez une modification en langage naturel, et Adapty réécrit, remet en forme ou réorganise l’écran que vous regardez. Adapty vous indique ensuite ce qui a changé, et un clic suffit pour annuler.