Le plugin Adapty pour Figma transforme les frames de votre fichier de design en flow. Sélectionnez des frames dans Figma, envoyez-les vers Adapty, et l’importation crée un flow brouillon que vous modifiez dans le flow builder comme n’importe quel autre.

Comment fonctionne l’import

Le plugin lit les frames Figma sélectionnées et les envoie à Adapty, qui les convertit en écrans d’un nouveau flow en brouillon. Il ne modifie jamais votre fichier Figma, et rien ne quitte Figma tant que vous ne cliquez pas sur Export to Adapty. Le résultat ressemble à votre design et fonctionne comme un flow de base : les boutons mènent à l’écran suivant, les options de quiz sont sélectionnables, et un paywall est prêt à accueillir vos produits.

Consultez Limites de l’import pour en savoir plus sur les ajustements que vous devrez peut-être effectuer manuellement.

Avant de commencer

Pour importer un design, vous avez besoin de :

• Un fichier design Figma : le plugin fonctionne uniquement dans les fichiers de design. Les tableaux FigJam et les Figma Slides ne sont pas pris en charge.
• Un accès en modification au fichier : le plugin ne peut pas s’exécuter dans un fichier auquel vous n’avez qu’un accès en lecture. Vos propres brouillons fonctionnent très bien.
• Une application dans Adapty avec les droits de modification des flows : l’importation crée le flow dans l’une de vos applications. Assurez-vous de pouvoir modifier les flows dans l’application Adapty cible.

1. Installer le plugin

Pour installer le plugin :

1. Ouvrez la page du plugin Import to Adapty.
2. Cliquez sur Save. Le plugin est désormais disponible dans le menu Plugins de Figma.
   

Figma met à jour automatiquement les plugins publiés, vous utilisez donc toujours la dernière version.

2. Envoyer votre design à Adapty

Pour envoyer des écrans à Adapty :

1. Dans Figma, sélectionnez les frames à importer. Sélectionnez-en plusieurs à la fois pour envoyer toute une séquence d’écrans.
2. Allez dans Plugins > Import to Adapty.
3. Vérifiez la sélection listée par le plugin, puis cliquez sur Export to Adapty.
4. Cliquez sur Open in Adapty.

Le plugin affiche le nom de l’élément sélectionné et indique le nombre d’écrans qui en résulte. Confirmez avant de continuer.

Une fois le téléchargement terminé, le plugin affiche l’écran Done. Pour continuer :

1. Connectez-vous à Adapty. Si vous ouvrez le lien d’importation dans un navigateur non authentifié, l’importation ne fonctionnera pas.
2. Ouvrez le lien d’importation dans un navigateur :
   • Cliquez sur Open in Adapty pour ouvrir l’importation dans votre navigateur par défaut
   • Cliquez sur Copy link pour copier le lien dans votre presse-papiers, et démarrez l’importation dans un autre navigateur ou profil.

Comment les frames deviennent des écrans

Ce que vous sélectionnez détermine le nombre d’écrans obtenus :

• Plusieurs frames : chaque frame devient son propre écran.
• Une section : chaque frame à l’intérieur de la section devient un écran.
• Une seule frame : toute la frame devient un seul écran, même si elle contient d’autres frames. Pour importer ces frames internes comme écrans distincts, activez Split into separate screens.

Les écrans suivent l’ordre des frames dans le panneau Layers de Figma, de bas en haut — pas leur position sur le canvas ni l’ordre dans lequel vous les avez sélectionnés. La navigation suit ce même ordre, alors arrangez les frames dans le panneau Layers avant d’exporter, ou réordonnez les écrans dans le builder par la suite. Sélectionnez des frames individuelles ou une section plutôt que la page entière, sinon vous importerez toutes les autres frames de cette page.

Paramètres d’exportation

Pour modifier le contenu de l’exportation, cliquez sur Customize export :

• Export images : inclut les ressources images et photos. Activé par défaut.
• Image resolution : exporte les images en 1×, 2× ou 3×. Une résolution plus élevée améliore la netteté mais augmente la taille du fichier. 2× par défaut.
• Split into separate screens : importe chaque frame dans votre sélection comme un écran distinct. Désactivé par défaut.

3. Terminer l’importation dans Adapty

Open in Adapty ouvre un onglet dans votre Adapty Dashboard. La conversion s’effectue sur les serveurs d’Adapty — l’onglet affiche la progression et crée le flow à la fin.

1. Sélectionnez l’application à laquelle ce flow appartient. La conversion démarre dès que vous choisissez.
2. Gardez l’onglet ouvert jusqu’à la fin de l’importation (cela peut prendre plusieurs minutes). Si vous le fermez prématurément, rouvrez le même lien pour reprendre.

Adapty convertit ensuite le design et indique l’avancement de l’opération.

Le flow terminé s’ouvre dans le flow builder sous forme de brouillon, portant le nom du fichier Figma d’origine, avec un nom descriptif pour chaque écran. Adapty vous signale les parties du design qui nécessitent une vérification.

Limitations de l’import

Un import reproduit l’apparence de votre design et connecte les éléments essentiels : la navigation, les groupes sélectionnables, les champs de saisie et les actions d’achat. En revanche, ces éléments ne sont jamais transférés :

• Produits : l’import crée des cartes produit, ajoute des actions d’achat et insère des espaces réservés pour les variables produit. Vous devez lier vos produits réels et remplacer les espaces réservés vous-même. Voir Configurer les achats.
• Polices : l’import n’attribue aucune police à votre texte. Pour restaurer votre police, téléchargez le fichier de police et sélectionnez-la pour le texte concerné.
• Vidéos : une vidéo est exportée sous forme d’espace réservé. Ajoutez la vidéo dans le builder ensuite.
• Calques masqués : un calque masqué n’est pas exporté.

Une exportation comprend au maximum 50 écrans et 20 Mo de données de conception. La résolution des images est le principal facteur de taille, donc si une exportation est trop lourde, réglez Image resolution sur 1×.

Chaque exportation produit un seul flow. Pour importer le même design une seconde fois, exportez-le à nouveau depuis Figma.

Un lien d’importation reste valide une heure après l’exportation. Finalisez l’importation en une seule fois, ou recommencez depuis le début.

Dépannage

Erreurs d’export

Message	Que faire
Too many screens to export	Divisez votre sélection en lots de 50 écrans maximum.
Export data is too large	Réduisez la Image resolution, ou diminuez le nombre de calques dans vos écrans.
This frame is too large to export	Exportez une section plus petite du design.
Upload didn’t complete	Votre design a été modifié pendant l’envoi. Exportez-le à nouveau.
This import link has expired	Un lien d’importation est valide pendant une heure. Exportez à nouveau le design depuis Figma.
This design was already imported	Cet export a déjà produit un flow. Exportez à nouveau le design depuis Figma.

Après un import

Ce que vous voyez	Cause et solution
Un écran semble délavé, comme si une brume le recouvrait	Une image d’arrière-plan a été importée comme un élément ordinaire au-dessus de votre contenu. Déplacez-la derrière le reste de l’écran.
Le panneau Products est vide et les prix affichent des espaces réservés {{figma_import_…}}	L’import ne lie pas les produits. Ajoutez les vôtres dans le panneau Products, sélectionnez-les dans chaque carte produit et action d’achat, puis remplacez les espaces réservés.
Les écrans sont dans le mauvais ordre, ou les boutons ouvrent le mauvais écran	Les écrans et la navigation suivent l’ordre des calques dans le panneau Layers de Figma. Réordonnez les écrans dans le builder et vérifiez l’action Navigate to screen de chaque bouton.
Une image est manquante, seul son arrière-plan reste visible	Le calque était une vidéo, était masqué, ou a été créé avec une opération de forme. Remplacez l’image dans le builder.
Deux options d’un groupe à choix unique semblent sélectionnées en même temps	L’état non sélectionné de l’option par défaut n’a pas le style correct. Modifiez le style manuellement.
Un compte à rebours affiche une heure fixe et ne décompte jamais	Le compte à rebours a été importé comme du texte. Remplacez-le par un minuteur de compte à rebours.
Le contrôle de police affiche Select font	La police n’est pas disponible dans le builder. Importez le fichier de police et sélectionnez-la.

Étapes suivantes

Le flow importé est un brouillon, invisible pour les utilisateurs. Améliorez le flow dans le builder, puis suivez les étapes ci-dessous pour le publier :

1. Enregistrez et publiez le flow.
2. Prévisualisez le flow sur un vrai appareil.
3. Créez un placement de flow et ajoutez-y le flow.
4. Récupérez ce placement dans votre app avec le SDK Adapty v4.0 ou une version ultérieure. Les versions antérieures du SDK ne peuvent pas afficher les flows.