Gérer les variantes de conception

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

Fiche d'actualités avec des variantes d'arborescence

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.

  1. Téléchargez HelloNews.fig sur votre ordinateur.
  2. 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.

  3. 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.

  1. Ouvrez le plug-in Relay for Figma dans votre fichier (dans la barre de menu: Plugins > Relay for Figma) Cliquez sur Commencer.
  2. Sélectionnez le composant, puis cliquez sur Create UI Package (Créer un package UI).

    Bouton "Create UI Package" (Créer un package UI) dans le plug-in
  3. 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".

    Zone récapitulative sur le plug-in

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.

  1. Si ce n'est pas déjà fait, ouvrez le plug-in Figma Relay.
  2. Cliquez sur Partager avec le développeur.
  3. 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.
  4. 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.

  1. Téléchargez l'exemple de fichier HelloNews.zip.
  2. Double-cliquez sur le fichier pour le décompresser. Un dossier nommé HelloNews est alors créé. Déplacez-le dans votre dossier de base.
  3. Retournez dans Android Studio. Cliquez sur File > Open (Fichier > Ouvrir), accédez à votre dossier d'accueil, sélectionnez HelloNews, puis cliquez sur Open (Ouvrir).
  4. 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.

  1. 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).

    Option "Copier le lien" dans l'onglet "Fichier"
  2. 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.

    Option "Importer des packages UI" dans le menu "Fichier"
  3. Collez l'URL de votre fichier Figma et cliquez sur Suivant.

    Boîte de dialogue "Importer des packages UI"
    Boîte de dialogue du système de trousseau
    1. Une fois la récupération du fichier terminée (cela peut prendre un certain temps), cliquez sur Terminer.
    Aperçu du composant
  4. Cliquez sur Bouton "Créer un projet" pour créer votre projet. Cela peut prendre environ une minute.

    Bouton "Créer" dans la barre d'outils

Prévisualiser l'application et le composant

  1. 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.

    Aperçu de l'application
  2. 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.

    Aperçu du composant NewsCard
  3. 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ètre view de notre composable NewsCard.

    Variantes dans Figma et énumération de vues correspondante
  4. 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.

Paramètres du contenu

Dans cette section, nous allons ajouter des paramètres de contenu au composant NewsCard.