Qu'est-ce que le relais ?

Relay est un outil qui rationalise le processus de création et de mise en œuvre des composants de l'interface utilisateur Android. Les concepteurs peuvent utiliser le plug-in Relay for Figma pour annoter et regrouper les éléments de l'interface utilisateur, y compris les informations sur la mise en page, le style, le contenu dynamique et le comportement d'interaction. Ces packages peuvent ensuite être importés dans Android Studio par les développeurs, qui utilisent le plug-in Relay for Android Studio pour générer un code Jetpack Compose au pixel près. Ce code est automatiquement stylisé et mis en page selon les spécifications du concepteur, ce qui accélère le processus de liaison des données. Avec Relay, il n'y a pas besoin de spécifications de conception détaillées ou de communication aller-retour entre les concepteurs et les développeurs. De plus, à mesure que le produit évolue, les packages d'interface utilisateur peuvent être mis à jour et étendus progressivement dans toute la base de code.

Relay prend en charge certaines fonctionnalités de Figma, telles que les nœuds Text, Image. Cependant, il peut ne pas prendre en charge toutes les fonctionnalités de Figma, alors soyez conscient de cela et pour tout contenu non pris en charge, vous pouvez y accéder via le site Web.https://developer.android.com/jetpack/compose/tooling/relay/limitations-and-troubleshooting

Faisons un exemple.

Télécharger un fichier Figma

Veuillez télécharger HelloFigma.fig et l'ouvrir.

Ajouter le plugin de relais à Figma

Lorsque vous ouvrez Figma, vous verrez un projet comme celui-ci.

Créer un package d'interface utilisateur

Sélectionnez le projet que vous avez créé et marquez-le comme composant, puis ouvrez le plugin Relay que nous avons ajouté. Il vous montrera automatiquement le bouton "Créer un package d'interface utilisateur".

Après avoir appuyé sur le bouton "Créer un package d'interface utilisateur", une page comme celle-ci s'ouvrira. Aussi actuellement, nous ne discuterons pas des paramètres, mais j'ai une autre série d'articles où je voudrais les expliquer.

Pour l'instant, après avoir entré uniquement la description, cliquons sur le bouton "Fichier" -> "Enregistrer dans l'historique des versions".

Installer Relay sur Android Studio

Nous avons créé notre projet, ouvrons maintenant le studio Android et ajoutons le plugin de relais. De plus, si notre projet est sélectionné dans le système de conception de matériaux, il n'y aura pas de problèmes de construction. Téléchargez le plug-in Relay et redémarrez l'IDE.

Après avoir rouvert l'IDE, nous devons ajouter une fonctionnalité à notre fichier build.gradle. Avec cette fonctionnalité, nous pourrons obtenir les sorties relais via la fonction composable.

Importer le dossier Figma dans AS

En allant dans Fichier-Nouveau-> Importer des packages d'interface utilisateur, nous pouvons importer les conceptions que nous avons créées dans Figma dans Android Studio.

La fenêtre apparaîtra ainsi.

Après avoir cliqué sur le bouton correspondant, un écran comme celui ci-dessous apparaîtra. À cette étape, Figma peut demander un jeton d'accès personnel, si c'est le cas, veuillez créer un PAT. Ensuite, au lieu de l'URL du projet que nous voyons à l'écran, nous collons le lien qui apparaît lorsque nous partageons le projet dans Figma.

Si tout est sur la bonne voie, nous serons accueillis par une page comme celle-ci. Appuyez sur le bouton Créer dans la fenêtre correspondante.

Après cela, les fichiers générés apparaîtront dans vos fichiers de projet. Si elle ne s'ouvre pas, cliquez avec le bouton droit sur l'application dans la vue du projet, puis cliquez sur le bouton recharger à partir du disque. Notre conception apparaîtra sous la forme d'un package d'interface utilisateur, comme indiqué dans l'image. À partir de maintenant, nous avons besoin de la sortie en tant que composition, nous allons donc appuyer sur le bouton créer un projet. De cette façon, les fichiers de conception dans le fichier généré seront convertis en une seule fonction composable.

Résultats

Si tout se passe bien, la fonction composable devrait être ajoutée à vos fichiers. Parfois, les étapes de projet propre et de projet de reconstruction peuvent être nécessaires dans ces étapes.

Voici à quoi ressemble le fichier kotlin.

Conclusion

Certaines valeurs peuvent être saisies spécifiquement, ou la structure peut sembler simple en général, mais je pense que ce plugin peut faire gagner beaucoup de temps aux développeurs.

À plus tard..