Dans cette section, vous allez apprendre à modifier un composant dans Figma (ici, la mise en forme du texte) et à voir les modifications se propager au codebase dans Android Studio, en s'appuyant sur votre projet précédent.
Modifications apportées à Figma
Faisons une mise à jour dans le composant Figma. Retournez dans votre fichier Figma :
Sélectionnez la couche de texte Title (Titre). Dans la section Texte, définissez le style sur Gras.
Enregistrer la version nommée
Intégrez maintenant le composant mis à jour dans votre codebase. Pour vous assurer que les développeurs utilisent la nouvelle version de votre composant, répétez la procédure d'enregistrement d'une version.
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 pour la version dans la section Enregistrer l'historique des versions.
Appuyez sur les touches CMD-L sur un Mac ou CTRL+L sous Windows pour copier le nouveau lien dans le presse-papiers.
Mettre à jour le code du composant
Réimportons le composant :
Dans Android Studio, assurez-vous que la fenêtre d'outil Projet se trouve dans la vue Android. Ensuite, effectuez un clic droit sur
app/ui-packages/hello_card/, puis sélectionnez Mettre à jour le package UI.
Attendez la fin du chargement dans la barre en bas à droite :
Cliquez sur
pour créer votre projet. Le composant mis à jour s'affiche dans l'aperçu de app/java/com/example/hellofigma/MainActivity.kt. Notez que le texte est désormais en gras.
Exécutez l'application pour afficher les mêmes mises à jour dans l'émulateur.
Étape suivante
Maintenant que nous avons mis à jour une conception et vu la mise à jour du code ainsi obtenue, nous pouvons nous concentrer sur l'annotation de notre conception avec des paramètres de contenu permettant des données variables dans nos composants.
Recommandations personnalisées
- Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
- Paramètres de contenu
- Convertir des conceptions en code dans Android Studio