Créer des packages UI

Packages UI dans Figma

Les packages UI définissent un modèle partagé pour les composants d'UI Android. Les packages UI sont créés dans Figma et utilisés pour générer du code Compose de production dans Android Studio. Un package UI contient les informations suivantes :

  • Informations sur la mise en page
  • Résumé du package UI
  • Paramètres de contenu et d'interaction
  • Informations sur les styles
  • Éléments de police et d'image

Créer un package UI

Ajouter un résumé au package UI

Pour créer un package UI à l'aide du plug-in Relay for Figma :

  1. Ouvrez le plug-in, puis cliquez sur Commencer.
  2. Sélectionnez un composant Figma à empaqueter.
  3. Cliquez sur Create UI Package (Créer un package UI).

Pour créer plusieurs packages UI en même temps:

  1. Sélectionnez un ou plusieurs composants Figma.
  2. Cliquez sur Create UI Packages (Créer des packages UI). Un package UI est alors créé pour chaque composant sélectionné.

Vous pouvez également refactoriser des éléments de packages UI existants dans de nouveaux packages :

  1. Sélectionnez une couche d'images ou de composants dans un package UI existant.
  2. Cliquez sur l'icône du menu.
  3. Sélectionnez Create UI package from selection (Créer un package UI à partir de la sélection).

Une fois qu'un package UI est importé dans Android Studio, Relay génère du code lors de la compilation de votre projet Android.

Ajouter un résumé

Relay for Figma avec un composant sélectionné

Une fois le package UI créé, un champ de texte s'affiche pour vous permettre d'ajouter un résumé. Celui-ci apparaît sous forme de bloc de commentaire au-dessus de la fonction modulable correspondante dans le code généré.

Vous pouvez également modifier le résumé ultérieurement :

  1. Sélectionnez Summary (Résumé).
  2. Modifiez le résumé dans le champ de texte.

Supprimer un package UI

Sélectionnez l'icône de menu, puis Remove packaging (Supprimer le package). Cette opération supprime toutes les métadonnées de Relay, mais ne supprime pas le composant dans Figma.

Option "Remove packaging" (Supprimer le package) dans le plug-in