Creare un'app completa con Relay e Jetpack Compose

1. Prima di iniziare

Relay è un toolkit che consente ai team di progettare componenti dell'interfaccia utente in Figma e di utilizzarli direttamente nei progetti Jetpack Compose. Rimuove la necessità di estenuanti cicli di QA e specifiche di progettazione, aiutando i team a realizzare rapidamente ottime UI Android.

In questo codelab, imparerai a integrare i pacchetti UI di Relay nel processo di sviluppo di Compose. Si concentra sulle tecniche di integrazione, non sul flusso di lavoro end-to-end. Per informazioni sul flusso di lavoro generale di Relay, consulta il tutorial di base su Relay.

Prerequisiti

• Esperienza di base con Scrivi. Se non l'hai ancora fatto, completa il codelab Nozioni di base su Jetpack Compose.
• Esperienza con la sintassi di Kotlin.

Cosa imparerai a fare

• Come importare i pacchetti UI.
• Come integrare i pacchetti UI con l'architettura di navigazione e dati.
• Come eseguire il wrapping dei pacchetti UI con la logica del controller.
• Come mappare gli stili di Figma al tema di Compose.
• Come sostituire i pacchetti UI con composabili esistenti nel codice generato.

Cosa creerai

• Un design dell'app realistico basato sui pacchetti Relay forniti da un designer. L'app si chiama Reflect, un'app di monitoraggio giornaliero che promuove la mindfulness e le buone abitudini. Contiene una raccolta di tracker di vari tipi e un'interfaccia utente per aggiungerli e gestirli. L'app ha il seguente aspetto:

Che cosa ti serve

• Android Studio Electric Eel o versioni successive
• Un account Figma e un token di accesso personale senza costi

2. Configurazione

Ottieni il codice

Per ottenere il codice di questo codelab, esegui una delle seguenti operazioni:

• Clona il repository relay-codelabs da GitHub:

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

• Vai al repository relay-codelabs su GitHub, seleziona il ramo che ti interessa, poi fai clic su Codice > Scarica ZIP e decomprime il file ZIP scaricato.

In entrambi i casi, il ramo main contiene il codice di avvio e il ramo end contiene il codice della soluzione.

Installare il plug-in Relay per Android Studio

Se non hai già il plug-in Relay per Android Studio, segui questi passaggi:

1. In Android Studio, fai clic su Impostazioni > Plugin.
2. Inserisci Relay for Android Studio nella casella di testo.
3. Fai clic su Installa sull'estensione visualizzata nei risultati di ricerca.

4. Se viene visualizzata la finestra di dialogo Nota sulla privacy dei plug-in di terze parti, fai clic su Accetta.
5. Fai clic su Ok > Riavvia.
6. Se viene visualizzata la finestra di dialogo Conferma esci, fai clic su Esci.

Collegare Android Studio a Figma

Relay recupera i pacchetti UI con l'API Figma. Per utilizzarlo, devi disporre di un account Figma senza costi e di un token di accesso personale, motivo per cui sono elencati nella sezione Requisiti.

Se non hai ancora collegato Android Studio a Figma, segui questi passaggi:

1. Nel tuo account Figma, fai clic sull'icona del tuo profilo nella parte superiore della pagina e seleziona Impostazioni.
2. Nella sezione Token di accesso personale, inserisci una descrizione del token nella casella di testo e poi premi Enter (o return su macOS). Viene generato un token.
3. Fai clic su Copia questo token.

4. In Android Studio, seleziona Strumenti > Impostazioni di inoltro. Viene visualizzata la finestra di dialogo Impostazioni di inoltro.
5. Nella casella di testo Token di accesso Figma, incolla il token di accesso e fai clic su OK. Il tuo ambiente è configurato.

Nota: per ulteriori informazioni sulla configurazione dell'ambiente di sviluppo di Relay, consulta Installare Relay.

3. Esamina il design dell'app

Per l'app Riflessione, abbiamo collaborato con un designer per definire il colore, la tipografia, il layout e il comportamento dell'app. Abbiamo creato questi design in conformità con le convenzioni di Material Design 3 in modo che l'app funzioni perfettamente con i temi e i componenti Material.

Esaminare la schermata Home

Nella schermata Home viene visualizzato un elenco di tracker definiti dall'utente. Fornisce inoltre funzionalità per cambiare il giorno attivo e creare altri tracker.

In Figma, il nostro designer ha diviso questa schermata in più componenti, ne ha definito le API e le ha pacchettizzato con il plug-in Relay per Figma. Dopo aver pacchettizzato questi componenti, puoi importarli nel tuo progetto Android Studio.

Nota: la definizione dei parametri dei componenti è più efficace se è il risultato di una collaborazione tra designer e sviluppatori. In questo modo, entrambi i ruoli avranno una visione unificata del componente e delle relative opzioni disponibili.

Esamina la schermata di aggiunta/modifica

La schermata di aggiunta/modifica consente agli utenti di aggiungere o modificare i tracker. Il modulo visualizzato è leggermente diverso a seconda del tipo di tracker.

Analogamente, questa schermata è suddivisa in più componenti pacchettizzati.

Rivedere il tema

I colori e la tipografia di questo design sono implementati come stili di Figma in base ai nomi dei token di Material Design 3. Ciò offre una migliore interoperabilità con i temi di Compose e i componenti Material.

4. Importa pacchetti UI

Ottenere il link all'origine Figma

Prima di poter importare i pacchetti UI nel progetto, devi caricare il codice sorgente del design in Figma.

Per ottenere il link all'origine Figma:

1. In Figma, fai clic su Importa file e seleziona il file ReflectDesign.fig nella cartella del progetto CompleteAppCodelab.
2. Fai clic con il tasto destro del mouse sul file e seleziona Copia link. Ti servirà nella sezione successiva.

Nota: non è necessario importare i file di origine di Figma al di fuori di questo codelab. I designer forniscono un URL.

Importare i pacchetti UI nel progetto

1. In Android Studio, apri il progetto ./CompleteAppCodelab.
2. Fai clic su File > Nuovo > Importa pacchetti UI. Viene visualizzata la finestra di dialogo Importa pacchetti UI.
3. Nella casella di testo URL di origine Figma, incolla l'URL che hai copiato nella sezione precedente.

4. Nella casella di testo Theme (Tema), inserisci com.google.relay.example.reflect.ui.theme.ReflectTheme. In questo modo, le anteprime generate utilizzeranno il tema personalizzato.
5. Fai clic su Avanti. Viene visualizzata un'anteprima dei pacchetti UI del file.
6. Fai clic su Crea. I pacchetti vengono importati nel progetto.
7. Vai alla scheda Progetto e fai clic sulla freccia di espansione accanto alla cartella ui-packages.

Nota: se non vedi la cartella ui-packages, fai clic con il tasto destro del mouse sulla cartella app e seleziona Ricarica dal disco.

8. Fai clic sulla freccia di espansione accanto a una delle cartelle del pacchetto e noterai che contiene un file di origine JSON e dipendenze degli asset.
9. Apri il file di origine JSON. Il modulo Relay mostra un'anteprima del pacchetto e della relativa API.

Compila e genera codice

1. Nella parte superiore di Android Studio, fai clic su Crea progetto. Il codice generato per ogni pacchetto viene aggiunto alla cartella java/com.google.relay.example.reflect. I composabili generati contengono tutte le informazioni di layout e stile del design di Figma.
2. Apri il file com/google/relay/example/reflect/range/Range.kt.
3. Tieni presente che le anteprime di Compose vengono create per ogni variante del componente. Se necessario, fai clic su Dividi in modo da visualizzare i riquadri di codice e di anteprima uno accanto all'altro.

5. Integrare i componenti

In questa sezione esaminerai più da vicino il codice generato per il tracker Switch.

1. In Android Studio, apri il file com/google/relay/example/reflect/switch/Switch.kt.

Switch.kt (generato)

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

2. Tieni presente quanto segue:

• Vengono generati tutti il layout e lo styling del design di Figma.
• I sottoelementi sono suddivisi in composabili distinti.
• Le anteprime componibili vengono generate per tutte le varianti di design.
• Gli stili di colore e tipografia sono hardcoded. Lo risolvi in un secondo momento.

Inserire il tracker

1. In Android Studio, apri il file java/com/google/relay/example/reflect/ui/components/TrackerControl.kt. Questo file fornisce dati e logica di interazione ai tracker degli abitudini.
2. Crea ed esegui l'app nell'emulatore. Al momento, questo componente genera dati non elaborati dal modello del tracker.

3. Importa il pacchetto com.google.relay.example.reflect.switch.Switch nel file.
4. Sostituisci Text(text = trackerData.tracker.toString()) con un blocco when che ruota attorno al campo trackerData.tracker.type.
5. Nel corpo del blocco when, chiama la funzione Switch() Composable quando il tipo è TrackerType.BOOLEAN.

Il tuo codice sarà simile al seguente:

TrackerControl.kt

// TODO: replace with Relay tracker components
when (trackerData.tracker.type) {
    TrackerType.BOOLEAN ->
        Switch(
          title = trackerData.tracker.name,
          emoji = trackerData.tracker.emoji
        )
    else ->
        Text(trackerData.tracker.toString())
}

6. Ricostruisci il progetto. Ora la home page mostra correttamente il tracker di Switch come progettato con i dati in tempo reale.

6. Aggiungere stato e interazione

I pacchetti UI sono stateless. Viene visualizzato un semplice risultato dei parametri passati. Ma le app reali richiedono interazione e stato. I gestori delle interazioni possono essere passati ai composabili generati come qualsiasi altro parametro, ma dove mantieni lo stato manipolato da questi gestori? Come si evita di passare lo stesso gestore a ogni istanza? Come puoi astrarre le composizioni di pacchetti in componenti riutilizzabili? In questi casi, ti consigliamo di racchiudere i pacchetti generati in una funzione Composable personalizzata.

Inserisci i pacchetti UI in una funzione Composable del controller

Il wrapping dei pacchetti UI in una funzione Composable del controller ti consente di personalizzare la presentazione o la logica di business e, se necessario, di gestire lo stato locale. I designer sono comunque liberi di aggiornare il pacchetto UI originale in Figma senza che tu debba aggiornare il codice del wrapper.

Per creare un controller per il tracker Switch:

1. In Android Studio, apri il file java/com/google/relay/example/reflect/ui/components/SwitchControl.kt.
2. Nella funzione SwitchControl() Composable, passa i seguenti parametri:

• trackerData: un oggetto TrackerData
• modifier: un oggetto decorazione
• onLongClick: un callback di interazione per attivare la pressione prolungata sui tracker per la modifica e l'eliminazione

Nota: la ricezione dei dati del modello come oggetto disaccoppia l'API del controller dallo schema dei dati di Range.

3. Inserisci una funzione Switch() e passa un modificatore combinedClickable per gestire i clic e le pressioni prolungate.
4. Passa i valori dall'oggetto TrackerData alla funzione Switch(), incluso il metodo isToggled().

La funzione SwitchControl() completata ha il seguente snippet di codice:

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
            .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)
}

5. Nel file TrackerControl.kt, rimuovi l'importazione di Switch e sostituisci la funzione Switch() con una chiamata alla funzione SwitchControl().
6. Aggiungi casi per le costanti dell'enumeratore TrackerType.RANGE e TrackerType.COUNT.

Nota: le funzioni RangeControl() e ValueControl() Composable sono già implementate nel codice di avvio.

Il blocco when completato ha il seguente aspetto:

TrackerControl.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 },
        )
}

7. Ricostruisci il progetto. Ora puoi visualizzare e interagire con i tracker. La schermata Home è completa.

7. Mappare i componenti esistenti

Relay consente agli sviluppatori di personalizzare il codice generato sostituendo i pacchetti UI con composabili esistenti. Questo è un ottimo modo per produrre componenti pronti all'uso o persino sistemi di design personalizzati nel codice.

Mappare un campo di testo

La seguente immagine mostra il design del componente Tracker Settings nella finestra di dialogo Aggiungi/modifica tracker:

Il nostro designer ha utilizzato un ReflectTextField nel design, per il quale abbiamo già un'implementazione in codice basata sui campi di testo di Material Design 3. Figma non supporta i campi di testo in modo nativo, pertanto il codice predefinito generato da Relay ha solo l'aspetto del design; non è un controllo funzionale.

Per testare l'implementazione corrente per TrackerSettings:

1. In Android Studio, crea ed esegui l'app nell'emulatore.
2. Premi a lungo una riga del tracker e seleziona Modifica.
3. Tocca il campo di testo Title e tieni presente che non risponde all'interazione.

Per sostituire l'implementazione reale di questo elemento, hai bisogno di due elementi: un pacchetto dell'interfaccia utente del campo di testo e un file di mappatura. Fortunatamente, il nostro designer ha già pacchettizzato i componenti del nostro sistema di design in Figma e ha utilizzato un componente di campo di testo nel design per Tracker Settings. Per impostazione predefinita, questo pacchetto nidificato viene generato come dipendenza, ma puoi utilizzare la mappatura dei componenti per sostituirlo.

Creare un file di mappatura

Il plug-in Relay per Android Studio fornisce una scorciatoia per creare file di mappatura dei componenti.

Per creare un file di mappatura:

1. In Android Studio, fai clic con il tasto destro del mouse sul pacchetto UI text_field e seleziona Genera file di mappatura.

2. Viene visualizzata una finestra di dialogo del file di mappatura. Inserisci le seguenti opzioni:

• In Composable target (Composable target), seleziona Utilizza composable esistente (Utilizza composable esistente) e inserisci com.google.relay.example.reflect.ui.components.ReflectTextField
• In File generato, seleziona Genera implementazione e deseleziona Genera anteprima di composizione

3. Fai clic su Genera file di mappatura. Verrà generato il seguente file di mappatura:

text_field.json

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

I file di mappatura dei componenti identificano un pacchetto e un target della classe Compose, nonché una raccolta facoltativa di oggetti fieldMapping. Queste mappature dei campi ti consentono di trasformare i parametri del pacchetto nei parametri Compose previsti. In questo caso, le API sono identiche, quindi devi solo specificare la classe di destinazione.

4. Ricostruisci il progetto.
5. Nel file trackersettings/ TrackerSettings.kt, individua la funzione componibile TitleFieldStyleFilledStateEnabledTextConfigurationsInputText() generata e tieni presente che include un componente ReflectTextField generato.

TrackerSettings.kt (generato)

@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.fillMaxWidth(1.0f).requiredHeight(56.0.dp)
    )
}

6. Ricostruisci il progetto. Ora puoi interagire con i campi delle impostazioni del tracker. La schermata di modifica è completa.

Nota: per ulteriori informazioni sulla mappatura dei componenti di Relay, consulta Mappare i componenti al codice esistente.

8. Mappa ai temi di Compose

Per impostazione predefinita, Relay genera valori letterali per colori e tipografia. Ciò garantisce l'accuratezza della traduzione, ma impedisce ai componenti di utilizzare il sistema di temi di Compose. Questo è evidente quando visualizzi l'app in modalità Buio:

Il componente di navigazione giornaliera è quasi invisibile e i colori sono errati. Per risolvere il problema, utilizza la funzionalità di mappatura degli stili in Relay per collegare gli stili di Figma ai token del tema Compose nel codice generato. Ciò aumenta la coerenza visiva tra i componenti di Relay e Material Design 3 e abilita il supporto della modalità oscura.

Creare un file di mappatura degli stili

1. In Android Studio, vai alla directory src/main/ui-package-resources e crea una nuova directory denominata style-mappings. In quella directory, crea un file figma_styles.json contenente il seguente codice:

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"
      }
    }
  }
}

I file di mappatura dei temi sono strutturati con due oggetti di primo livello: figma e compose. All'interno di questi oggetti, le definizioni di colore e tipo sono collegate tra i due ambienti tramite token intermedi. In questo modo, più stili Figma possono essere mappati a una singola voce del tema di Compose, il che è utile quando supporti i temi chiaro e scuro.

2. Esamina il file di mappatura, in particolare come rimappa le proprietà di tipografia da Figma a quelle previste da Compose.

Nota: per ulteriori informazioni sulla mappatura degli stili di inoltro, consulta Mappare gli stili al tema Scrivi.

Reimportare i pacchetti UI

Dopo aver creato un file di mappatura, devi importare di nuovo tutti i pacchetti UI nel progetto perché tutti i valori dello stile di Figma sono stati ignorati durante l'importazione iniziale poiché non è stato fornito un file di mappatura.

Per reimportare i pacchetti UI:

1. In Android Studio, fai clic su File > Nuovo > Importa pacchetti UI. Viene visualizzata la finestra di dialogo Importa pacchetti UI.
2. Nella casella di testo URL del file di origine Figma, inserisci l'URL del file di origine Figma.
3. Seleziona la casella di controllo Trasferisci gli stili di Figma al tema di Compose.
4. Seleziona Importa configurazione personalizzata. Fai clic sull'icona della cartella e seleziona il file che hai appena creato: src/main/ui-package-resources/style-mappings/figma_styles.json.
5. Fai clic su Avanti. Viene visualizzata un'anteprima dei pacchetti UI del file.
6. Fai clic su Crea. I pacchetti vengono importati nel progetto.

7. Ricostruisci il progetto e apri il file switch/Switch.kt per visualizzare il codice generato.

Switch.kt (generato)

@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)
    )
}

8. Tieni presente che il parametro backgroundColor è impostato sul campo MaterialTheme.colorScheme.surfaceVariant nell'oggetto del tema di composizione.
9. Esegui il progetto e attiva la modalità Buio nell'emulatore. Il tema viene applicato correttamente e i bug visivi sono stati corretti.

9. Complimenti

Complimenti! Hai imparato a integrare Relay nelle tue app Compose.

Scopri di più

• Panoramica, configurazione e documentazione del relè
• Tutorial di base su Relay
• Tutorial avanzato su Relay
• Iscriviti alla newsletter di Relay