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
Mettons à jour le composant Figma. Retournez dans votre fichier Figma :
Sélectionnez la couche de texte Titre et, dans la section Text (Texte), définissez le style sur Bold (Gras).
Enregistrer la version nommée
À présent, intégrons votre composant mis à jour dans votre codebase. Pour vous assurer que les développeurs utilisent la nouvelle version de votre composant, créez une version nommée :
Accédez à File > Save to Version History (Fichier > Enregistrer dans l'historique des versions), puis saisissez un titre et une description pour votre nouvelle version.
Exemple de titre : Fiche Hello World V2
Exemple de description : Style de texte ajouté
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.