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.
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.
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.
Ouvrez le plug-in Relay for Figma dans votre fichier (dans la barre de menu: Plug-ins > Relay
pour Figma). Cliquez sur Commencer.
Sélectionnez le composant, puis cliquez sur Créer un package UI.
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.
Ouvrez le plug-in Figma Relay, s'il n'est pas déjà ouvert.
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 dans la section Enregistrer l'historique des versions.
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.
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.
Retournez dans Android Studio. Accédez à Fichier > Ouvrir, accédez à votre maison
sélectionnez HelloNews, puis cliquez sur Ouvrir.
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.
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 :
Basculez vers le projet HelloNews dans Android Studio. Accédez à Fichier > Nouveau > Importer
UI Packages... dans la barre de menu d'Android Studio.
Collez l'URL de votre fichier Figma et cliquez sur Suivant.
Une fois l'extraction du fichier terminée (cela peut prendre un certain temps), cliquez sur
Terminer :
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
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.
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.
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.
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.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2024/08/25 (UTC).
[null,null,["Dernière mise à jour le 2024/08/25 (UTC)."],[],[]]
pour créer votre projet. Cette opération peut prendre environ une minute.
