Gérer les variantes de conception

Dans Figma, les variantes permettent de regrouper différentes variantes d'un le même composant ensemble, par exemple des états ou des tailles différents. Réserves liées aux relais les variantes d'un composant lorsqu'il est traduit en code. Dans cette section, nous allons aborder comment Relay gère les variantes dans les conceptions.

Point de départ

Nous allons commencer par créer un fichier Figma contenant un composant News Card avec trois variantes:

• hero-item désigne l'article d'actualité le plus important
• article-item correspond à un article type
• audio-item correspond à un article que vous écoutez plutôt que 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, passez la souris sur Brouillons. Une 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. Cela 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, ce qui nous permet 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: Plug-ins > Relay pour Figma). Cliquez sur Commencer.

2. Sélectionnez le composant, puis cliquez sur Créer un package UI.

   

3. Une fois le package UI sélectionné, ajoutez une description dans la zone de résumé. Pour Exemple : "Composant Fiche d'actualités destiné à afficher les articles d'une liste".

   <ph type="x-smartling-placeholder">

   </ph>

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. Ouvrez le plug-in Figma Relay, s'il n'est pas déjà ouvert.
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 dans la section Enregistrer l'historique des versions.

4. Cliquez sur Enregistrer.

   Exemple de titre: Nouvelle fiche initiale

   Exemple de description: première itération des éléments de l'article de presse

Télécharger le projet Android Studio

Pour la partie de ce tutoriel consacrée à Android Studio, nous utiliserons un modèle préconfiguré Projet Android Studio. 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, ce qui créera un dossier appelé HelloNews Déplacez-le dans votre dossier d'accueil.
3. Retournez dans Android Studio. Accédez à Fichier > Ouvrir, accédez à votre maison sélectionnez HelloNews, puis cliquez sur Ouvrir.
4. Lorsque vous ouvrez le projet, Android Studio peut vous demander de confirmer que vous lui faites confiance. Cliquez sur Projet de confiance.

Importer dans Android Studio

Importons notre composant Figma dans le projet.

1. De retour dans Figma, copiez l'URL du fichier Figma du tutoriel Fiche d'actualités du tutoriel. Nous utilisez 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 Copier le lien :

   

2. Basculez vers le projet HelloNews dans Android Studio. Accédez à Fichier > Nouveau > Importer UI Packages... dans la barre de menu d'Android Studio.

   

3. Collez l'URL de votre fichier Figma et cliquez sur Suivant.

   <ph type="x-smartling-placeholder">

   </ph>

   <ph type="x-smartling-placeholder">

   </ph>

   .
   1. Une fois l'extraction du fichier terminée (cela peut prendre un certain temps), cliquez sur Terminer :

   

4. Cliquez sur pour créer votre projet. Cette opération peut prendre environ une minute.

   <ph type="x-smartling-placeholder">

   </ph>

Prévisualiser l'appli et composant

1. Dans la vue Android, ouvrez app/java/com/example/hellonews/ui/home/HomeScreen.kt, vous voyez un aperçu de l'application, qui affiche plusieurs articles d'actualité dans une format texte brut, avec des articles imprimés au-dessus des stories audio.

   

2. Ouvrez app/java (generated)/com/example/hellonews/newscard/NewsCard.kt. Ce est le code Jetpack Compose généré pour notre composant Figma. Depuis l' dans l'aperçu, nous constatons que trois variantes du composant NewsCard ont de Figma en code. Examinons de plus près le code.

   

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 Figma. Il est utilisé dans le paramètre view de notre NewsCard. composable.

   

4. Le composable NewsCard a été généré à partir du package UI. Il comprend une paramètre de type View, qui définit la variante de la fiche d'actualités sur 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 pour afficher différents articles, seul le même codé en dur dans Figma. 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 les parties de NewsCard à remplir. avec des données dynamiques.

Paramètres de contenu

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