--- title: "Interface du Flow Builder" description: "Aperçu de l'interface et de l'espace de travail 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. :::link Vous souhaitez en savoir plus sur la création de flows ? Regardez les tutoriels vidéo étape par étape dans notre [playlist YouTube](https://www.youtube.com/playlist?list=PLMksWqaZiWtM). ::: ## Contrôles du projet et raccourcis (barre d'outils supérieure) \{#project-controls-and-useful-shortcuts-top-toolbar\} * **Close** Close : Quitte l'éditeur de flow et retourne à la page des flows. * **App name** App : Identifie l'application à laquelle appartient le flow. * **All flows** 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](builder-save-publish#flow-status) : - **Draft** Draft - **Publishing** (indicateur de chargement) - **Failed** Failed - ou **Live** 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](paywall-builder-templates#create-flow). * **View mode toggle** : Bascule entre la vue de conception Cursor et la [vue Remote Config](customize-flow-with-remote-config)Remote Config. * **Undo/Redo** : Cliquez sur les icônes fléchées pour annuler Undo ou rétablir Redo 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 Open dropdown pour accéder au bouton [**Publish**](builder-save-publish). Vous ne pouvez ajouter votre flow à un [placement](create-placement) qu'après l'avoir publié. ## Zone de prévisualisation (centre) \{#preview-area-center\} 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. :::warning L'éditeur de flow est conçu pour créer des mises en page adaptatives. Par conséquent, vous **ne pouvez pas modifier manuellement la position des éléments** — vous pouvez uniquement changer leur ordre. Les paramètres de mise en page de chaque conteneur déterminent la répartition des éléments qu'il contient. ::: ### Barre de l'écran actif (au-dessus de l'aperçu de l'appareil) \{#active-screen-bar-above-the-device-preview\} - **Screen name** — une pastille affichant le nom de l'écran actuel. - **Toggle animations** 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](builder-styling#animation). N'affecte pas la visibilité des animations sur l'appareil en production. - **Add element** Plus — ouvre la [bibliothèque d'éléments](builder-elements) 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) \{#view-controls-bottom-toolbar\} 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 Portrait et paysage Landscape pour prévisualiser votre flow dans différentes orientations. * **Color scheme** : Basculez entre les modes clair Light mode et sombre Dark mode 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) \{#screen-and-element-properties-right-panel\} ### Paramètres et mise en page de l'écran \{#screen-settings-and-layout\} :::link Article principal : [Screens and Layers](paywall-layout-and-products) ::: Lorsqu'aucun élément n'est sélectionné, le panneau droit vous permet d'ajuster les propriétés de l'[écran de flow](paywall-layout-and-products) 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](onboarding-quizzes), cette liste s'enrichira des propriétés correspondantes. ### Propriétés des éléments \{#element-properties\} 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 \{#design-properties\} :::link En savoir plus : [Mise en page et positionnement](manage-paywall-ui-elements), [Styles et apparence](builder-styling) ::: 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](#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 \{#interactions-properties\} :::link En savoir plus : [Actions](onboarding-actions), [Navigation et interaction](onboarding-navigation-branching) ::: 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 \{#left-panel\} Le panneau gauche change de fonctionnalité selon le bouton actif. Vous pouvez choisir entre : * [Screens and Layers](#screens-and-layers) * [Add element](#element-selection) * [Products](#products) * [Styles](#saved-styles) * [Variables](#variables) * [Localization](#localization) ### Screens and Layers \{#screens-and-layers\} :::link Article principal : [Screens and Layers](paywall-layout-and-products) ::: Le bouton calques Layers 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 \{#element-selection\} :::link Article principal : [Éléments](builder-elements) ::: Si vous cliquez sur le bouton plus 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 \{#products\} :::link Article principal : [Produits](paywall-product-block) ::: Le bouton produits Products 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 \{#saved-styles\} :::info En savoir plus : - [Styles et apparence](builder-styling) - [Contenu textuel](onboarding-text) - [Mode sombre](paywall-dark-mode) ::: Le bouton styles 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 \{#variables\} :::link Article principal : [Variables](onboarding-variables) ::: Le bouton accolades Variables 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 \{#localization\} :::link Article principal : [Localisation](add-flow-remote-config-locale) ::: 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.