Workflow Android Studio

Importer un package UI

Une fois que vous avez créé un package UI dans Figma, vous pouvez l'importer dans votre projet Android Studio. Une fois le projet créé, Relay génère le code Jetpack Compose.

Pour importer un package UI dans un projet Android Studio :

1. Sélectionnez Fichier > Nouveau > Importer des packages UI.

   

2. Saisissez l'URL d'un fichier Figma contenant un package UI.

   

3. Appuyez sur Suivant.

4. Sélectionnez les packages UI à importer. Les composants affichés varient selon que vous avez collé un composant, une page ou un lien de fichier. Si un package UI est déjà importé, il est libellé "MIS À JOUR". Sinon, il est libellé "NOUVEAU".

   

   Remarque :Les packages UI imbriqués sous un autre package UI sont importés automatiquement si le parent est sélectionné.

5. Cliquez sur Terminer pour importer les packages sélectionnés ainsi que leurs dépendances dans le dossier ui-packages.

Écran d'importation du package UI

L'écran d'importation contient les informations suivantes :

• Un aperçu du composant et de ses variantes
• Un titre et une description
• Une liste des variantes, avec leurs propriétés
• Une liste des paramètres de contenu, avec leurs types
• Une liste des gestionnaires d'interactions, avec leurs types

Fenêtre de l'outil Package UI

Le plug-in Android Studio ajoute une fenêtre d'outil appelée Package UI. Elle s'ouvre chaque fois que vous sélectionnez un fichier dans un dossier de package UI (par exemple, app/src/main/ui-packages/mycomponent/). Cette fenêtre contient un résumé du package UI et de son contenu.

Compiler le projet Android

Lorsque vous compilez un projet Android Studio contenant un package UI, le plug-in Relay Gradle génère du code à partir du package UI et le compile. Les éléments de police sont également téléchargés et copiés dans votre projet.

Si vous souhaitez compiler uniquement les packages UI importés, et non l'intégralité de votre projet, vous pouvez exécuter ces tâches Gradle spécifiques :

• generateDebugRelayCode ou generateReleaseRelayCode génère des versions de débogage ou de code dérivées du package UI.
• generateRelayRuntimeCode crée la bibliothèque d'exécution utilisée par le code généré.

Au cours du processus de compilation :

1. Le code est généré à partir du package UI et stocké dans des dossiers distincts.
2. Les images et les polices sont copiées dans un dossier de ressources commun.

L'emplacement des dossiers est documenté dans Comprendre le package UI et le code généré.

Avertissement :Généralement, le code est regénéré lors de la compilation si le package UI a été mis à jour depuis la dernière compilation. Toutefois, la mise à jour d'une dépendance située en dehors du répertoire ui-packages ne force pas la régénération du code lorsque vous compilez le projet. Cela peut se produire lorsque le fichier est un fichier de mappage de thème ou un fichier de composant de référence.

Solution:Pour forcer la mise à jour du code généré, nettoyez le projet (accédez à Build > Clean Project ou Compilation > Nettoyer le projet) ou supprimez le dossier du code généré associé au package UI qui doit être mis à jour. Ensuite, compilez à nouveau le code.

Mettre à jour un package UI

Lorsqu'une nouvelle version d'une conception est prête, le concepteur doit créer une nouvelle version nommée du fichier Figma.

Dans Android Studio, assurez-vous que la fenêtre d'outil Projet se trouve dans la vue Android.

1. Dans le dossier ui-packages de votre module, effectuez un clic droit sur le dossier des packages UI à mettre à jour, puis sélectionnez Mettre à jour les packages UI. Dans l'exemple suivant, nous avons sélectionné cinq packages UI à mettre à jour.

   

2. Vous pouvez également effectuer un clic droit sur le dossier ui-packages pour mettre à jour tous les packages UI.

   

Remarque :Si vous ne voyez pas le dossier ui-packages dans la vue Android, accédez à la vue Projet, puis à src/main/ui-packages dans votre module. Il peut également être utile d'effectuer un clic droit sur le dossier de premier niveau et de sélectionner "Actualiser à partir du disque".