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 utilisateur. Cet article présente chaque zone de l’interface : son rôle et son emplacement.

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

• Close : Quitte l’éditeur de flow et retourne à la page des flows.
• App name : Identifie l’application à laquelle appartient le flow.
• All flows : Ouvre la liste de tous les flows de cette application.
• Flow status : L’icône à gauche du nom du flow indique le statut actuel du flow :
  • Draft
  • Publishing (indicateur de chargement)
  • Failed
  • ou Live .
• Rename the flow : Cliquez sur le nom du flow pour le renommer. Plusieurs flows peuvent porter le même nom — donnez à chaque nouveau flow un nom unique.
• View mode toggle : Bascule entre la vue de conception et la vue Remote Config.
• Undo/Redo : Cliquez sur les icônes fléchées pour annuler ou rétablir vos modifications. Vous pouvez aussi utiliser ⌘Z / Ctrl+Z pour annuler.
• Save draft / Publish : Cliquez sur Save draft pour sauvegarder 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 dans 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 de l’écran actif (au-dessus de l’aperçu de l’appareil)

• Screen name — une pastille affichant 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’affecte pas la visibilité des animations sur l’appareil en production.
• Add element — ouvre la bibliothèque d’éléments sur l’écran actuel. Équivalent au + en haut du panneau Screens and Layers — utile lorsque le panneau est réduit.

Contrôles de vue (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 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 : Basculez entre les modes clair et 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 contour de l’appareil et les guides de zone sécurisée.

Propriétés des écrans et des éléments (panneau droit)

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

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

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

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

Propriétés des éléments

Lorsque vous sélectionnez un élément, le panneau droit vous permet de modifier son style et ses propriétés interactives.

Propriétés de conception

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 : Choisissez entre le positionnement Relative, Absolute ou Fixed.
• Content (éléments texte uniquement) : Modifiez le contenu textuel de l’élément, insérez des variables et gérez les localisations.
• Typography (éléments texte uniquement) : Configurez la police, la graisse, la taille, la couleur, l’alignement, la décoration et la troncature.
• Spacing : Définissez les marges extérieures et intérieures de l’élément.
• Effects : Ajoutez des ombres portées, des ombres intérieures, un flou d’arrière-plan ou un flou de calque.
• Animation : Ajoutez des effets animés (par ex., Pulse) et configurez leur durée et leur intensité.
• Appearance : Ajustez l’opacité et la rotation.
• Layout : Choisissez une direction de mise en page (verticale ou horizontale) et définissez la répartition des éléments enfants.

Propriétés des 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 est composée 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 :

• Screens and Layers
• Add element
• Products
• Styles
• Variables
• Localization

Screens and Layers

Le bouton calques ouvre Screens and Layers (affiché par défaut à l’ouverture du Flow Builder).

Il affiche chaque écran sous forme d’arborescence de calques. Chaque élément d’un écran est un calque, et les conteneurs ont leurs éléments enfants imbriqués à l’intérieur. Vous pouvez glisser-déposer les calques 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 variantes. 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 Product et configurez-le dans le panneau droit. Pour créer ou modifier des produits, utilisez la page Products dans l’Adapty Dashboard.

Styles enregistrés

Le bouton styles ouvre Saved Styles.

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

Actuellement, le 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 accolades ouvre Variables.

Ici, vous pouvez créer et gérer les variables de votre flow. Au moment de l’exécution, le SDK remplace les espaces réservés des 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 : Les variables que vous créez et contrôlez via des actions.
• Elements : Les valeurs déterminées par l’interaction de l’utilisateur — comme les réponses à un quiz, les états des boutons à bascule ou la sélection d’onglets.

Les variables de produit — prix, nom et autres données de produit — ne sont pas listées 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 plutôt que des chaînes statiques.
• Contrôler la visibilité : Afficher ou masquer des éléments selon des conditions (par ex., 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 Localization vous permet de gérer tout le contenu traduisible de votre flow. Elle affiche un tableau de chaque chaîne de texte et image, organisé par écran, avec une colonne par locale. Depuis cette vue, vous pouvez :

• Ajouter de nouvelles locales et modifier les chaînes localisées directement dans le tableau.
• Suivre l’état de la traduction — chaque ligne est marquée Done ou Missing.
• Filtrer par écran ou n’afficher que les traductions manquantes.
• Utiliser AI Translate pour traduire automatiquement le contenu, ou Import/Export pour importer/exporter les traductions en masse.