Dans Figma, les variantes sont utilisées pour regrouper différentes variantes d'un même composant, telles que différents états ou tailles. Relay conserve les variantes d'un composant lorsqu'il est traduit en code. Dans cette section, nous verrons comment Relay gère les variantes dans les conceptions.
Point de départ
Nous allons commencer avec un fichier Figma contenant un composant News Card avec trois variantes:
- hero-item correspond à l'article d'actualité le plus important
- article-item correspond à un article standard.
- audio-item correspond à un article que vous écoutez, et non sur un article lu.
Copier l'exemple Figma
Nous allons utiliser un fichier Figma existant comme exemple dans ce tutoriel. Assurez-vous d'être connecté à votre compte Figma.
- Téléchargez HelloNews.fig sur votre ordinateur.
Dans Figma, accédez à l'explorateur de fichiers. Sur le côté gauche, pointez sur Brouillons. L'icône + s'affiche : cliquez sur l'icône +, puis sur Importer. Sélectionnez le fichier HelloNews.fig que vous venez de télécharger. Cette opération peut prendre de 10 secondes à une minute.
Ouvrez le fichier importé dans Figma.
Créer un package UI
Le plug-in Relay for Figma ajoute des informations supplémentaires à notre composant, afin que nous puissions travailler avec nos développeurs qui utiliseront notre composant dans leur code.
- Ouvrez le plug-in Relay for Figma dans votre fichier (dans la barre de menu: 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 dans la zone récapitulative. Exemple : "Composant de fiche d'actualités qui permet d'afficher les actualités sous forme de liste".
Enregistrer la version nommée
Maintenant que vous avez créé un package UI, préparez votre composant pour le partager avec l'équipe de développement.
- Si ce n'est pas déjà fait, ouvrez le plug-in Figma Relay.
- Cliquez sur Partager avec le développeur.
- Sur l'écran Partager avec le développeur, vous pouvez saisir un nouveau nom et une nouvelle description pour la version dans la section Enregistrer l'historique des versions.
Cliquez sur Enregistrer.
Exemple de titre: Première nouvelle carte
Exemple de description: Première itération des articles d'actualité
Télécharger le projet Android Studio
Pour la partie Android Studio de ce tutoriel, nous utiliserons un projet Android Studio préconfiguré. Ce projet contient une application qui affiche des articles d'actualité au format texte brut.
- Téléchargez l'exemple de fichier HelloNews.zip.
- Double-cliquez sur le fichier pour le décompresser. Un dossier nommé HelloNews est alors créé. Déplacez-le dans votre dossier de base.
- Retournez dans Android Studio. Cliquez sur File > Open (Fichier > Ouvrir), accédez à votre dossier d'accueil, sélectionnez HelloNews, puis cliquez sur Open (Ouvrir).
- Lorsque vous ouvrez le projet, Android Studio peut vous demander de confirmer que vous lui faites confiance. Cliquez sur Trust Project (Projet de confiance).
Importer dans Android Studio
Importons notre composant Figma dans le projet.
Revenez dans Figma et copiez l'URL du fichier Figma du tutoriel Fiche d'actualités. Nous utiliserons cette URL pour importer nos composants. Dans le coin supérieur droit de Figma, cliquez sur le bouton Share (Partager). Dans la boîte de dialogue qui s'affiche, cliquez sur Copy Link (Copier le lien).
Basculez vers le projet HelloNews dans Android Studio. Accédez à File > New > Import UI Packages (Fichier > Nouveau > Importer des packages UI...) dans la barre de menu d'Android Studio.
Collez l'URL de votre fichier Figma et cliquez sur Suivant.
- Une fois la récupération du fichier terminée (cela peut prendre un certain temps), cliquez sur Terminer.
Cliquez sur pour créer votre projet. Cela peut prendre environ une minute.
Prévisualiser l'application et le composant
Dans la vue Android, ouvrez
app/java/com/example/hellonews/ui/home/HomeScreen.kt
. Vous voyez alors un aperçu de l'application, qui affiche plusieurs articles d'actualité au format texte brut, avec des articles papier au-dessus des articles audio.Ouvrez
app/java (generated)/com/example/hellonews/newscard/NewsCard.kt
. Il s'agit du code Jetpack Compose généré pour notre composant Figma. Dans l'aperçu, nous pouvons voir que trois variantes du composant NewsCard ont été traduites depuis Figma en code. Examinons de plus près le code.L'énumération
View
nous permet de choisir la variante à utiliser pour ce composant. Le nom de l'énumération et ses valeurs sont dérivés des variantes de notre composant Figma. Cette valeur est utilisée dans le paramètreview
de notre composable NewsCard.Le composable NewsCard a été généré à partir du package UI. Elle inclut un paramètre de type
View
, qui définit la variante de la carte de presse à instancier.package com.example.myapplication.newscard import ... // Design to select for NewsCard enum class View { HeroItem, ArticleItem, AudioItem } /** * News card component intended to display news items for a list. * * This composable was generated from the UI Package 'news_card'. * Generated code; do not edit directly */ @Composable fun NewsCard( modifier: Modifier = Modifier, view: View = View.HeroItem ) {...}
Étape suivante
Nous ne sommes pas encore tout à fait prêts à utiliser NewsCard. Le composant ne sait pas comment afficher différents articles, mais uniquement le même codé en dur dans Figma. Ainsi, si nous ajoutons le composant maintenant, nous n'obtiendrions que le même sujet d'actualité répété. Nous devons trouver un moyen de spécifier quelles parties de NewsCard doivent contenir des données dynamiques.
Dans cette section, nous allons ajouter des paramètres de contenu au composant NewsCard.
Recommandations personnalisées
- Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
- Paramètres de contenu
- Défilement
- Utiliser Compose dans les vues