Télécharger le fichier Figma préconfiguré
Commençons par créer un composant dans Figma. Pour ce tutoriel, nous utiliserons un fichier Figma existant comme exemple. Ce fichier contient un cadre de mise en page automatique avec une image et un titre. Assurez-vous d'être connecté à votre compte Figma.
- Téléchargez ce fichier Figma sur votre ordinateur : HelloFigma.fig.
Dans l'explorateur de fichiers de Figma, pointez sur Brouillons. Une icône + s'affiche. Cliquez sur +, puis sur Import... (Importer), puis sélectionnez le fichier HelloFigma.fig que vous venez de télécharger.
Ouvrez le fichier importé dans Figma.
Créer un composant
Pour utiliser la conception importée avec le plug-in Relay for Figma, nous devons d'abord la convertir en composant. Sélectionnez le cadre Hello Card, puis cliquez sur Create Component (Créer un composant) dans la barre d'outils.
Créer un package UI
Le plug-in Relay for Figma ajoute des informations supplémentaires au composant afin que vous puissiez travailler avec vos développeurs qui pourront l'utiliser dans leur code.
Ouvrez le plug-in Relay for Figma dans votre fichier (dans le menu Figma: Plugins > Relay for Figma). Cliquez sur Commencer.
Sélectionnez le composant, puis cliquez sur Create UI Package (Créer un package UI).
Après avoir sélectionné le package UI, ajoutez une description à Summary (Résumé). Par exemple : "Composant Hello Card utilisé pour afficher le contenu de l'image et du titre".
Cliquez sur Partager avec le développeur en bas à droite de la boîte de dialogue pour passer à l'écran suivant.
Partager avec le flux du développeur
Maintenant que vous avez créé un package UI, préparez votre composant pour le partager avec l'équipe de développement.
Créez une nouvelle version nommée du fichier du fichier de composant. L'utilisation de versions nommées du composant empêche que des modifications indésirables n'affectent les composants de production.
Saisissez un nom et une description pour cette première version du composant, puis cliquez sur Enregistrer.
Créez ensuite un lien de composant partageable et copiez-le dans le presse-papiers en saisissant CMD-L sur un Mac ou CTRL+L sous Windows.
Étape suivante
Vous êtes maintenant prêt à transmettre votre composant d'interface utilisateur à Android Studio.
Ouvrez Android Studio pour terminer la partie suivante de ce tutoriel.
Convertir des conceptions en code dans Android Studio