Vue d'ensemble

Composant de fiche, avec image et titre

Ce tutoriel de base, qui présente les workflows de concepteur et de développeur pour Relay, offre une expérience complète aux novices. Une fois le plug-in Relay configuré, vous accéderez rapidement à l'étape où vous pourrez voir l'interface utilisateur s'afficher dans Android Studio. Ne vous découragez surtout pas !

Le tutoriel crée un composant de fiche de base dans Figma et l'importe dans Android Studio, où vous pouvez consulter le code généré. Vous découvrirez comment effectuer les opérations suivantes :

Dans Figma :

  1. Concevoir un composant d'interface utilisateur dans Figma
  2. Créer un package UI à l'aide du plug-in Figma
  3. Enregistrer une version nommée de la conception
  4. Partager l'URL Figma avec les développeurs

Dans Android Studio :

  1. Importer le package UI dans un projet à l'aide de l'URL Figma
  2. Générer le code Jetpack Compose en compilant le projet
  3. Ajouter une référence au composable généré dans le code d'UI du projet
  4. Exécuter le projet

Étape suivante

Tout d'abord, voyons comment élaborer notre conception et créer un package d'interface utilisateur dans Figma.