Mettre à jour une conception et propager les modifications

Stay organized with collections Save and categorize content based on your preferences.

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.

Comparaison avant/après

Modifications apportées à Figma

Mettons à jour le composant Figma. Retournez dans votre fichier Figma :

  1. Sélectionnez la couche de texte Titre et, dans la section Text (Texte), définissez le style sur Bold (Gras).

    Texte du titre sélectionné et mis en gras dans Figma

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 :

  1. 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é

    Option "Enregistrer dans l'historique des versions" du menu

Mettre à jour le code du composant

Réimportons le composant :

  1. 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.

    Option "Mettre à jour le package UI" dans le menu contextuel

    Attendez la fin du chargement dans la barre en bas à droite :

    Barre de chargement Android Studio
  2. Cliquez sur Bouton "Créer un projet" 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.

    Bouton "Créer" dans la barre d'outils
    Aperçu du composant
  3. Exécutez l'application pour afficher les mêmes mises à jour dans l'émulateur.

    Bouton "Exécuter" dans la barre d'outils
    Aperçu de l'application 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.