Créer une application finalisée avec Relay et Jetpack Compose

1. Avant de commencer

Relay est un kit d'outils qui permet aux équipes de concevoir des composants d'interface utilisateur (UI) sous Figma et de les utiliser directement dans les projets Jetpack Compose. Il élimine les spécifications de conception compliquées et les cycles de contrôle qualité fastidieux. Les équipes peuvent ainsi fournir rapidement de remarquables UI Android.

Dans cet atelier de programmation, vous allez apprendre à intégrer les packages UI de Relay au processus de développement de Compose. Il se concentre sur les techniques d'intégration (et non sur le workflow de bout en bout). Pour en savoir plus sur le workflow général de Relay, consultez le tutoriel de base sur Relay.

Conditions préalables

Vous disposez d'une expérience de base avec Compose. Si vous ne l'avez pas déjà fait, suivez l'atelier de programmation Principes de base de Jetpack Compose.
Connaissance pratique de la syntaxe Kotlin

Points abordés

Importer des packages UI.
Intégrer les packages UI à l'architecture de navigation et de données.
Encapsuler les packages UI avec la logique du contrôleur.
Mapper les styles Figma dans votre thème Compose.
Remplacer les packages UI par les composables du code généré.

Objectifs de l'atelier

Une conception d'application réaliste sur la base de packages fournis par un concepteur. Il s'agit d'une application de suivi quotidien appelée Reflect qui valorise la pleine conscience et les bonnes habitudes. Elle comporte une collection de différents indicateurs, ainsi que l'UI permettant de les ajouter et de les gérer. L'application se présente comme suit :

Application finale

Ce dont vous aurez besoin

La dernière version d'Android Studio.
Un compte Figma sans frais et un jeton d'accès personnel.

2. Configuration

Obtenir le code

Pour obtenir le code de cet atelier de programmation, effectuez l'une des opérations suivantes :

Clonez le dépôt relay-codelabs depuis GitHub :

$ git clone https://github.com/googlecodelabs/relay-codelabs

Accédez au dépôt relay-codelabs sur GitHub, sélectionnez la branche de votre choix, cliquez sur Code > Download zip (Code > Télécharger le ZIP) et décompressez le fichier ZIP téléchargé.

Dans les deux cas, la branche main comporte le code de démarrage et la branche end comporte le code de solution.

Installer le plug-in Relay for Android Studio

Si vous ne disposez pas encore du plug-in Relay for Android Studio, procédez comme suit :

Dans Android Studio, cliquez sur Settings > Plugins (Paramètres > Plug-ins).
Dans la zone de texte, saisissez Relay for Android Studio.
Dans l'extension qui apparaît dans les résultats de recherche, cliquez sur Install (Installer).

Paramètres du plug-in Android Studio

Si la boîte de dialogue Third-party plugins privacy note (Avis de confidentialité sur les plug-ins tiers) s'affiche, cliquez sur Accept (Accepter).
Cliquez sur OK > Restart (OK > Redémarrer).
Si la boîte de dialogue Confirm exit (Confirmer la sortie) s'affiche, cliquez sur Exit (Quitter).

Connecter Android Studio à Figma

Relay récupère les packages UI avec l'API Figma. Pour l'utiliser, vous devez disposer d'un compte Figma sans frais et d'un jeton d'accès personnel. C'est pourquoi ils figurent dans la section Ce dont vous aurez besoin.

Si vous n'avez jamais connecté Android Studio à Figma, procédez comme suit :

Dans votre compte Figma, cliquez sur l'icône de votre profil en haut de la page et sélectionnez Settings (Paramètres).
Dans la section Personal access tokens (Jetons d'accès personnels), décrivez le jeton dans la zone de texte, puis appuyez sur Enter (ou return avec macOS). Le jeton est généré.
Cliquez sur Copy this token (Copier ce jeton).

Génération d'un jeton d'accès dans Figma

Dans Android Studio, sélectionnez Tools > Relay Settings (Outils > Paramètres Relay). La boîte de dialogue Relay settings (Paramètres Relay) s'affiche.
Dans la zone de texte Figma Access Token (Jeton d'accès Figma), coller le jeton accès, puis cliquez sur OK. Votre environnement est configuré.

3. Examiner la conception de l'application

Pour l'application Reflect, nous avons demandé un graphiste de nous aider à définir les couleurs, la typographie, la mise en page et le comportement de l'application. Nous avons créé ces conceptions en accord avec les conventions Material Design 3 de sorte que l'application fonctionne parfaitement avec les composants et les thèmes Material.

Examiner l'écran d'accueil

L'écran d'accueil affiche une liste d'indicateurs définis par l'utilisateur. Il fournit également les affordances pour modifier le jour actif et créer d'autres indicateurs.

Écran d'accueil

Dans Figma, le graphiste a décomposé l'écran en plusieurs composants, a défini les API correspondantes et les a mis en package avec le plug-in Relay for Figma. Une fois les packages de composants définis, vous pouvez les importer dans votre projet Android Studio.

Composant de l'écran d'accueil

Examiner l'écran "Add/Edit" (Ajouter/Modifier)

L'écran "Add/Edit" (Ajouter/Modifier) permet aux utilisateurs d'ajouter ou de modifier des indicateurs. L'affichage varie légèrement en fonction du type d'indicateur.

Écran "Add/Edit" (Ajouter/Modifier)

De même, cet écran se décompose en plusieurs composants (en package).

Composants de l'écran "Add/Edit" (Ajouter/Modifier)

Examiner le thème

Les couleurs et la typographie de cette conception sont implémentées sous la forme de styles Figma basés sur le nom des jetons Material Design 3. L'interopérabilité avec les thèmes Compose et les composants Material est ainsi améliorée.

Styles Figma

4. Importer des packages UI

Obtenir le lien vers la source Figma

Pour Importer des packages UI dans votre projet, vous devez importer la source de conception sur Figma.

Pour obtenir le lien vers la source Figma, procédez comme suit :

Dans Figma, cliquez sur Import file (Importer un fichier), puis sélectionnez le fichier ReflectDesign.fig qui se trouve dans le dossier du projet de l'atelier de programmation.
Effectuez un clic droit sur ce fichier, puis sélectionnez Copy link (Copier le lien). Vous en aurez besoin dans la section suivante.

Importer des packages UI dans le projet

Dans Android Studio, ouvrez le projet ./CompleteAppCodelab.
Cliquez sur File > New > Import UI Packages (Fichier > Nouveau > Importer des packages UI). La boîte de dialogue Import UI Packages (Importer des packages UI) s'affiche.
Dans la zone de texte Figma source URL (URL de la source Figma), collez l'URL que vous avez copié à la section précédente.

Boîte de dialogue "Import UI Packages" (Importer des packages UI)

Dans la zone de texte App theme (Thème d'application), saisissez com.google.relay.example.reflect.ui.theme.ReflectTheme. Cela garantit que les aperçus générés utilisent le thème personnalisé.
Cliquez sur Next (Suivant). Un aperçu des packages UI du fichier apparaît.
Cliquez sur Create (Créer). Les packages sont importés dans le projet.
Accédez à l'onglet Project (Projet) et cliquez sur la flèche de développement en regard du dossier ui-packages.

Dossier "ui-packages"

Cliquez sur la flèche de développement en regard de l'un des dossiers du package. Notez qu'il comporte un fichier source JSON et des dépendances d'asset.
Ouvrez le fichier source JSON. Le module Relay affiche un aperçu du package et de ses API.

Module d'aperçu du package Relay

Créer et générer le code

En haut d'Android Studio, cliquez sur Make project (Créer le projet). Le code généré pour chaque package est ajouté au fichier java/com.google.relay.example.reflect. Les composables générés comportent l'ensemble des informations sur la mise en page et les styles de la conception Figma.
Si nécessaire, cliquez sur Split (Partager) pour afficher les volets de code et d'aperçu l'un à côté de l'autre.
Ouvrez le fichier range/Range.kt. Notez que les aperçus Compose ont été créés pour chaque variante de composant.

5. Intégrer les composants

Dans cette section, examinez de plus près le code généré pour l'indicateur Switch (Bouton bascule).

Conception de l'indicateur Switch (Bouton bascule)

Dans Android Studio, ouvrez le fichier com/google/relay/example/reflect/switch/Switch.kt.

Switch.kt (généré)

/**
 * This composable was generated from the switch UI Package.
 * Generated code; don't edit directly.
 */
@Composable
fun Switch(
    modifier: Modifier = Modifier,
    isChecked: Boolean = false,
    isPressed: Boolean = false,
    emoji: String = "",
    title: String = ""
) {
    TopLevel(modifier = modifier) {
        if (isChecked) {
            ActiveOverlay(modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)) {}
        }
        if (isPressed) {
            State(modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)) {}
        }
        TopLevelSynth {
            Label(modifier = Modifier.rowWeight(1.0f)) {
                Emoji(emoji = emoji)
                Title(
                    title = title,
                    modifier = Modifier.rowWeight(1.0f)
                )
            }
            if (isChecked) {
                Checkmark {
                    Vector(modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f))
                }
            }
        }
    }
}

Notez ce qui suit :

L'ensemble des informations sur la mise en page et les styles de la conception Figma ont été générées.
Les sous-composants se divisent en composables distincts.
Les aperçus des composables sont générés pour chaque variante de conception.
Les couleurs et la typographie sont encodées en dur. Vous corrigerez cela plus tard.

Insérer un indicateur

Dans Android Studio, ouvrez le fichier java/com/google/relay/example/reflect/ui/components/TrackerControl.kt. Il comporte les données et la logique d'interaction des indicateurs d'habitude. Ce composant extrait actuellement des données brutes du modèle d'indicateur.

Importez le package com.google.relay.example.reflect.switch.Switch dans le fichier.
Créez un bloc when qui varie en fonction du champ trackerData.tracker.type.
Dans le corps du bloc when, appelez la fonction Switch() Composable lorsque le type est TrackerType.BOOLEAN.

Le code doit se présenter comme suit :

TrackerControl.kt

when (trackerData.tracker.type) {
    TrackerType.BOOLEAN ->
        Switch(
          title = trackerData.tracker.name,
          emoji = trackerData.tracker.emoji
        )
    else ->
        Text(trackerData.tracker.toString())
}

Recompilez le projet. La page d'accueil restitue maintenant l'indicateur Switch (Bouton bascule) tel qu'il est conçu avec LiveData.

6. Ajouter l'état et l'interaction

Les packages UI sont sans état. Le rendu correspond simplement aux paramètres transmis. Les applications réelles ont besoin d'états et d'interactions. Les composables générés peuvent transmettre les gestionnaires d'interactions (comme n'importe quel paramètre). Mais où conserver les états que gèrent ces gestionnaires ? Comment éviter de transmettre le même gestionnaire à chaque instance ? Comment extraire les compositions de packages sous la forme de composables réutilisables ? Dans ces cas, nous recommandons d'encapsuler les packages générés dans une fonction Composable personnalisée.

Encapsuler les packages UI dans une fonction `Composable` de contrôleur.

Encapsuler les packages UI dans une fonction Composable de contrôleur permet de personnaliser la présentation ou la logique métier, et de gérer l'état local, le cas échéant. Les graphistes peuvent modifier le package UI d'origine dans Figma sans que vous deviez mettre à jour le code du wrapper.

Pour créer un contrôleur dédié à l'indicateur Switch (Bouton bascule), procédez comme suit :

Dans Android Studio, ouvrez le fichier java/com/google/relay/example/reflect/ui/components/SwitchControl.kt.
Dans la fonction SwitchControl() Composable, transmettez les paramètres suivants :

trackerData : un objet TrackerData
modifier : un objet "decorator"
onLongClick : un rappel d'interaction qui permet d'appuyer de manière prolongée sur un indicateur pour le modifier ou le supprimer

modifier

Transmettez un modificateur combinedClickable à la fonction Switch() pour gérer les clics et les appuis de manière prolongée.
Transmettez les valeurs de l'objet TrackerData à la fonction Switch(), y compris la méthode isToggled().

La fonction SwitchControl() finalisée ressemble à l'extrait de code suivant :

SwitchControl.kt

package com.google.relay.example.reflect.ui.components

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.google.relay.example.reflect.model.Tracker
import com.google.relay.example.reflect.model.TrackerData
import com.google.relay.example.reflect.model.TrackerType
import com.google.relay.example.reflect.switch.Switch

/*
 * A component for controlling switch-type trackers.
 *
 * SwitchControl is responsible for providing interaction and state management to the stateless
 * composable [Switch] generated by Relay. [onLongClick] provides a way for callers to supplement
 * the control's intrinsic interactions with, for example, a context menu.
 */
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SwitchControl(
    trackerData: TrackerData,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
) {
    Switch(
        modifier
            .height(64.dp)
            .clip(shape = RoundedCornerShape(size = 32.dp))
            .combinedClickable(onLongClick = onLongClick) {
                trackerData.toggle()
            },
        emoji = trackerData.tracker.emoji,
        title = trackerData.tracker.name,
        isChecked = trackerData.isToggled(),
    )
}

@Preview
@Composable
fun SwitchControllerPreview() {
    val data = TrackerData(
        Tracker(
            emoji = "🍕",
            name = "Ate Pizza",
            type = TrackerType.BOOLEAN
        )
    )
    SwitchControl(data)
}

Dans le fichier TrackerControl.kt, supprimez l'importation Switch et remplacez la fonction Switch() par un appel de la fonction SwitchControl().
Ajoutez les cas pour les constantes d'énumérateur TrackerType.RANGE et TrackerType.COUNT.

Le bloc when finalisé ressemble à l'extrait de code suivant :

SwitchControl.kt

when (trackerData.tracker.type) {
    TrackerType.BOOLEAN ->
        SwitchControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
    TrackerType.RANGE ->
        RangeControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
    TrackerType.COUNT ->
        ValueControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
}

Recompilez le projet. Vous pouvez maintenant afficher les indicateurs et interagir avec. L'écran d'accueil est finalisé.

7. Mapper les composants existants

Relay permet aux développeurs de personnaliser un code généré en remplaçant les packages UI par des composables existants. C'est un excellent moyen d'extraire des composants clé en main ou même des systèmes de conception personnalisés dans votre code.

Mapper un champ de texte

L'image ci-dessous correspond à la conception du Switch Tracker Editor dans la boîte de dialogueAdd/edit tracker (Ajouter/Modifier l'indicateur) :

Conception du composant des paramètres "Switch" (Bouton bascule)

Le graphiste a utilisé un ReflectTextField dans la conception, pour lequel il existe déjà une implémentation dans le code basée sur les champs de texte Material Design 3. Figma n'accepte pas les champs de texte en mode natif. Ainsi, le code par défaut généré par Relay ressemble seulement à la conception (il ne s'agit pas d'une commande fonctionnelle).

Pour remplacer l'implémentation réelle de cet élément, vous avez besoin de deux choses : un package UI avec champs de texte et un fichier de mappage. Heureusement, le graphiste a déjà mis en package les composants du système de conception dans Figma et intégré à sa conception un composant "button" pour Tracker Editor. Par défaut, le package imbriqué est généré sous la forme d'une dépendance du package "settings bar" que vous transférez à l'aide du mappage de composants.

Composant Figma pour les champs de texte avec plug-in Relay superposé

Créer un fichier de mappage

Le plug-in Relay for Android Studio fournit un raccourci pour créer un fichier de mappage de composants.

Pour créer un fichier de mappage, Procédez comme suit :

Dans Android Studio, effectuez un clic droit sur le package UI text_field, puis sélectionnez Generate mapping file (Générer le fichier de mappage).

Élément de menu contextuel "Generate mapping file" (Générer le fichier de mappage)

Dans le fichier, saisissez le code suivant :

text_field.json

{
  "target": "ReflectTextField",
  "package": "com.google.relay.example.reflect.ui.components",
  "generatePreviews": false
}

Les fichiers de mappage de composants identifient une cible de classe Compose et un package, ainsi qu'une collection d'objets fieldMapping en option. Le mappage de champs permet de convertir les paramètres du package en paramètres Compose attendus. Dans ce cas, les API sont identiques. Il vous suffit donc de spécifier la classe de la cible.

Recompilez le projet.
Dans le fichier trackersettings/ TrackerSettings.kt, identifiez la fonction composable TitleFieldStyleFilledStateEnabledTextConfigurationsInputText() générée et notez qu'elle comprend un composant ReflectTextField généré.

TrackerSettings.kt (généré)

@Composable
fun TitleFieldStyleFilledStateEnabledTextConfigurationsInputText(
    onTitleChanged: (String) -> Unit,
    title: String,
    modifier: Modifier = Modifier
) {
    ReflectTextField(
        onChange = onTitleChanged,
        labelText = "Title",
        leadingIcon = "search",
        trailingIcon = "cancel",
        supportingText = "Supporting text",
        inputText = title,
        state = State.Enabled,
        textConfigurations = TextConfigurations.InputText,
        modifier = modifier.requiredHeight(56.0.dp)
    )
}

8. Mapper avec les thèmes Compose

Par défaut, Relay génère des valeurs littérales pour les couleurs et la typographie. Même si cela garantit la qualité des traductions, les composants ne peuvent pas utiliser le système de thématisation Compose. L'effet est manifeste lorsque vous affichez l'application en mode sombre :

Aperçu de l'écran d'accueil en mode sombre avec affichage de couleurs incorrectes

Le composant de navigation "day" est quasiment invisible et les couleurs sont inadaptées. Pour résoudre ce problème, utilisez la fonctionnalité de mappage des styles de Relay pour associer les styles Figma aux jetons de thème Compose du code généré. Cela permet d'assurer la cohérence visuelle entre les composants Relay et Material Design 3, et d'accepter le mode sombre.

Créer un fichier de mappage de styles

Dans Android Studio, accédez au dossier src/main/ui-package-resources/style-mappings et créez un fichier figma_styles.json comportant le code suivant :

figma_styles.json

{
  "figma": {
    "colors": {
      "Reflect Light/background": "md.sys.color.background",
      "Reflect Dark/background": "md.sys.color.background",
      "Reflect Light/on-background": "md.sys.color.on-background",
      "Reflect Dark/on-background": "md.sys.color.on-background",
      "Reflect Light/surface": "md.sys.color.surface",
      "Reflect Dark/surface": "md.sys.color.surface",
      "Reflect Light/on-surface": "md.sys.color.on-surface",
      "Reflect Dark/on-surface": "md.sys.color.on-surface",
      "Reflect Light/surface-variant": "md.sys.color.surface-variant",
      "Reflect Dark/surface-variant": "md.sys.color.surface-variant",
      "Reflect Light/on-surface-variant": "md.sys.color.on-surface-variant",
      "Reflect Dark/on-surface-variant": "md.sys.color.on-surface-variant",
      "Reflect Light/primary": "md.sys.color.primary",
      "Reflect Dark/primary": "md.sys.color.primary",
      "Reflect Light/on-primary": "md.sys.color.on-primary",
      "Reflect Dark/on-primary": "md.sys.color.on-primary",
      "Reflect Light/primary-container": "md.sys.color.primary-container",
      "Reflect Dark/primary-container": "md.sys.color.primary-container",
      "Reflect Light/on-primary-container": "md.sys.color.on-primary-container",
      "Reflect Dark/on-primary-container": "md.sys.color.on-primary-container",
      "Reflect Light/secondary-container": "md.sys.color.secondary-container",
      "Reflect Dark/secondary-container": "md.sys.color.secondary-container",
      "Reflect Light/on-secondary-container": "md.sys.color.on-secondary-container",
      "Reflect Dark/on-secondary-container": "md.sys.color.on-secondary-container",
      "Reflect Light/outline": "md.sys.color.outline",
      "Reflect Dark/outline": "md.sys.color.outline",
      "Reflect Light/error": "md.sys.color.error",
      "Reflect Dark/error": "md.sys.color.error"
    },
    "typography": {
      "symbols": {
        "Reflect/headline/large": "md.sys.typescale.headline-large",
        "Reflect/headline/medium": "md.sys.typescale.headline-medium",
        "Reflect/headline/small": "md.sys.typescale.headline-small",
        "Reflect/title/large": "md.sys.typescale.title-large",
        "Reflect/title/medium": "md.sys.typescale.title-medium",
        "Reflect/title/small": "md.sys.typescale.title-small",
        "Reflect/body/large": "md.sys.typescale.body-large",
        "Reflect/body/medium": "md.sys.typescale.body-medium",
        "Reflect/body/small": "md.sys.typescale.body-small",
        "Reflect/label/large": "md.sys.typescale.label-large",
        "Reflect/label/medium": "md.sys.typescale.label-medium",
        "Reflect/label/small": "md.sys.typescale.label-small"
      },
      "subproperties": {
        "fontFamily": "font",
        "fontWeight": "weight",
        "fontSize": "size",
        "letterSpacing": "tracking",
        "lineHeightPx": "line-height"
      }
    }
  },
  "compose": {
    "colors": {
      "md.sys.color.background": "MaterialTheme.colorScheme.background",
      "md.sys.color.error": "MaterialTheme.colorScheme.error",
      "md.sys.color.error-container": "MaterialTheme.colorScheme.errorContainer",
      "md.sys.color.inverse-on-surface": "MaterialTheme.colorScheme.inverseOnSurface",
      "md.sys.color.inverse-surface": "MaterialTheme.colorScheme.inverseSurface",
      "md.sys.color.on-background": "MaterialTheme.colorScheme.onBackground",
      "md.sys.color.on-error": "MaterialTheme.colorScheme.onError",
      "md.sys.color.on-error-container": "MaterialTheme.colorScheme.onErrorContainer",
      "md.sys.color.on-primary": "MaterialTheme.colorScheme.onPrimary",
      "md.sys.color.on-primary-container": "MaterialTheme.colorScheme.onPrimaryContainer",
      "md.sys.color.on-secondary": "MaterialTheme.colorScheme.onSecondary",
      "md.sys.color.on-secondary-container": "MaterialTheme.colorScheme.onSecondaryContainer",
      "md.sys.color.on-surface": "MaterialTheme.colorScheme.onSurface",
      "md.sys.color.on-surface-variant": "MaterialTheme.colorScheme.onSurfaceVariant",
      "md.sys.color.on-tertiary": "MaterialTheme.colorScheme.onTertiary",
      "md.sys.color.on-tertiary-container": "MaterialTheme.colorScheme.onTertiaryContainer",
      "md.sys.color.outline": "MaterialTheme.colorScheme.outline",
      "md.sys.color.primary": "MaterialTheme.colorScheme.primary",
      "md.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
      "md.sys.color.secondary": "MaterialTheme.colorScheme.secondary",
      "md.sys.color.secondary-container": "MaterialTheme.colorScheme.secondaryContainer",
      "md.sys.color.surface": "MaterialTheme.colorScheme.surface",
      "md.sys.color.surface-variant": "MaterialTheme.colorScheme.surfaceVariant",
      "md.sys.color.tertiary": "MaterialTheme.colorScheme.tertiary",
      "md.sys.color.tertiary-container": "MaterialTheme.colorScheme.tertiaryContainer"
    },
    "typography": {
      "symbols": {
        "md.sys.typescale.display-large": "MaterialTheme.typography.displayLarge",
        "md.sys.typescale.display-medium": "MaterialTheme.typography.displayMedium",
        "md.sys.typescale.display-small": "MaterialTheme.typography.displaySmall",
        "md.sys.typescale.headline-large": "MaterialTheme.typography.headlineLarge",
        "md.sys.typescale.headline-medium": "MaterialTheme.typography.headlineMedium",
        "md.sys.typescale.headline-small": "MaterialTheme.typography.headlineSmall",
        "md.sys.typescale.title-large": "MaterialTheme.typography.titleLarge",
        "md.sys.typescale.title-medium": "MaterialTheme.typography.titleMedium",
        "md.sys.typescale.title-small": "MaterialTheme.typography.titleSmall",
        "md.sys.typescale.body-large": "MaterialTheme.typography.bodyLarge",
        "md.sys.typescale.body-medium": "MaterialTheme.typography.bodyMedium",
        "md.sys.typescale.body-small": "MaterialTheme.typography.bodySmall",
        "md.sys.typescale.label-large": "MaterialTheme.typography.labelLarge",
        "md.sys.typescale.label-medium": "MaterialTheme.typography.labelMedium",
        "md.sys.typescale.label-small": "MaterialTheme.typography.labelSmall"
      },
      "subproperties": {
        "font": "fontFamily",
        "weight": "fontWeight",
        "size": "fontSize",
        "tracking": "letterSpacing",
        "line-height": "lineHeight"
      }
    },
    "options": {
      "packages": {
        "MaterialTheme": "androidx.compose.material3"
      }
    }
  }
}

Les fichiers de mappage de thèmes sont structurés avec deux objets de niveau supérieur : figma et compose. Dans ces objets, les couleurs et les définitions de type de chaque environnement sont associées par des jetons intermédiaires. Cela permet de mapper plusieurs styles Figma dans une même entrée de thème Compose. Cela est particulièrement utile lorsque vous acceptez les thèmes clairs et les thèmes sombres.

Examinez le fichier de mappage et la façon dont il remappe les propriétés de typographie de Figma en fonction des attentes de Compose.

Réimporter les packages UI

Une fois le fichier de mappage créé, vous devez réimporter l'ensemble des packages UI dans votre projet. En effet, les valeurs des styles Figma ont toutes été supprimées lors du premier import (aucun fichier de mappage n'avait été fourni).

Pour réimporter les packages UI, procédez comme suit :

Dans Android Studio, sélectionnez File > New > Import UI Packages (Fichier > Nouveau > Importer des packages UI). La boîte de dialogue Import UI Packages (Importer des packages UI) s'affiche.
Dans la zone de texte "Figma source URL" (URL de la source Figma), indiquez l'URL du fichier de la source Figma.
Cochez la case Translate Figma styles to Compose theme (Convertir les styles Figma en thème Compose).
Cliquez sur Next (Suivant). Un aperçu des packages UI du fichier apparaît.
Cliquez sur Create (Créer). Les packages sont importés dans le projet.

Boîte de dialogue "Import UI Packages" (Importer des packages UI)

Recompilez le projet, puis ouvrez le fichier switch/Switch.kt pour afficher le code généré.

Switch.kt (généré)

@Composable
fun ActiveOverlay(
    modifier: Modifier = Modifier,
    content: @Composable RelayContainerScope.() -> Unit
) {
    RelayContainer(
        backgroundColor = MaterialTheme.colorScheme.surfaceVariant,
        isStructured = false,
        radius = 32.0,
        content = content,
        modifier = modifier.fillMaxWidth(1.0f).fillMaxHeight(1.0f)
    )
}

Notez la définition du paramètre backgroundColor dans le champ MaterialTheme.colorScheme.surfaceVariant de l'objet de thèmes Compose.
Dans le volet d'aperçu, faites passer l'application en mode sombre. Le thème s'applique correctement et les bugs visuels ont été corrigés.

9. Félicitations

Félicitations ! Vous avez appris à intégrer Relay à vos applications Compose !

Créer une application finalisée avec Relay et Jetpack Compose

1. Avant de commencer

Conditions préalables

Points abordés

Objectifs de l'atelier

Ce dont vous aurez besoin

2. Configuration

Obtenir le code

Installer le plug-in Relay for Android Studio

Connecter Android Studio à Figma

3. Examiner la conception de l'application

Examiner l'écran d'accueil

Examiner l'écran "Add/Edit" (Ajouter/Modifier)

Examiner le thème

4. Importer des packages UI

Obtenir le lien vers la source Figma

Importer des packages UI dans le projet

Créer et générer le code

5. Intégrer les composants

Switch.kt (généré)

Insérer un indicateur

TrackerControl.kt

6. Ajouter l'état et l'interaction

Encapsuler les packages UI dans une fonction Composable de contrôleur.

SwitchControl.kt

SwitchControl.kt

7. Mapper les composants existants

Mapper un champ de texte

Créer un fichier de mappage

text_field.json

TrackerSettings.kt (généré)

8. Mapper avec les thèmes Compose

Créer un fichier de mappage de styles

figma_styles.json

Réimporter les packages UI

Switch.kt (généré)

9. Félicitations

En savoir plus

Encapsuler les packages UI dans une fonction `Composable` de contrôleur.