Mit Relay und Jetpack Compose eine komplette App erstellen

1. Hinweis

Relay ist ein Toolkit, mit dem Teams UI-Komponenten in Figma entwerfen und direkt in Jetpack Compose-Projekten verwenden können. Dadurch entfällt die Notwendigkeit mühsamer Designspezifikationen und QA-Zyklen, wodurch Teams schnell hochwertige Android-Benutzeroberflächen bereitstellen können.

In diesem Codelab erfahren Sie, wie Sie Relay-UI-Pakete in den Entwicklungsprozess von Compose einbinden. Der Fokus liegt auf den Einbindungstechniken, nicht auf dem End-to-End-Workflow. Informationen zum allgemeinen Workflow für Relay finden Sie hier.

Voraussetzungen

• Grundlegende Funktionen von „Compose“. Schließen Sie das Codelab Jetpack Compose-Grundlagen ab, falls Sie das noch nicht getan haben.
• Erfahrung mit der Kotlin-Syntax

Aufgaben in diesem Lab

• So importieren Sie UI-Pakete.
• Anleitung zum Integrieren von UI-Paketen in die Navigation und Datenarchitektur.
• Anleitung zum Verpacken von UI-Paketen mit Controllerlogik.
• Wie Sie Figma-Stile Ihrem Design „Compose“ zuordnen
• So ersetzen Sie UI-Pakete durch vorhandene zusammensetzbare Funktionen im generierten Code.

Inhalt

• Ein realistisches App-Design, das auf den von einem Designer bereitgestellten Relay-Paketen basiert. Die App heißt Reflect, eine tägliche Tracking-App, die Achtsamkeit und gute Gewohnheiten fördert. Es enthält eine Sammlung von Trackern verschiedener Typen und einer Benutzeroberfläche zum Hinzufügen und Verwalten. Die Anwendung sieht wie in der folgenden Abbildung aus:

Voraussetzungen

• Android Studio Electric Eel oder höher
• Ein kostenloses Figma-Konto und ein persönliches Zugriffstoken

2. Einrichten

Code abrufen

Führen Sie einen der folgenden Schritte aus, um den Code für dieses Codelab abzurufen:

• Klonen Sie das relay-codelabs-Repository von GitHub:

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

• Rufen Sie das relay-codelabs-Repository auf GitHub auf, wählen Sie den gewünschten Branch aus und klicken Sie auf Code > ZIP-Datei herunterladen und entpacken Sie die heruntergeladene ZIP-Datei.

In beiden Fällen enthält der Zweig main den Startcode und der Zweig end den Lösungscode.

Relay for Android Studio-Plug-in installieren

Wenn Sie das Relay für Android Studio-Plug-in noch nicht haben, gehen Sie so vor:

1. Klicken Sie in Android Studio auf Settings > Plug-ins.
2. Geben Sie in das Textfeld Relay for Android Studio ein.
3. Klicken Sie bei der Erweiterung, die in den Suchergebnissen erscheint, auf Installieren.

4. Wenn das Dialogfeld Datenschutzhinweise für Drittanbieter-Plug-ins angezeigt wird, klicken Sie auf Akzeptieren.
5. Klicken Sie auf OK > Neu starten.
6. Wenn das Dialogfeld Beenden bestätigen angezeigt wird, klicken Sie auf Beenden.

Android Studio mit Figma verbinden

Relay ruft UI-Pakete mit der Figma API ab. Sie benötigen ein kostenloses Figma-Konto und ein persönliches Zugriffstoken, um den Dienst nutzen zu können. Daher sind diese im Abschnitt Voraussetzungen aufgeführt.

Wenn Sie Android Studio noch nicht mit Figma verbunden haben, gehen Sie so vor:

1. Klicken Sie in Ihrem Figma-Konto oben auf der Seite auf Ihr Profilsymbol und wählen Sie Settings (Einstellungen) aus.
2. Geben Sie im Abschnitt Persönliche Zugriffstokens eine Beschreibung für das Token in das Textfeld ein und drücken Sie dann Enter (oder return unter macOS). Ein Token wird generiert.
3. Klicken Sie auf Dieses Token kopieren.

4. Wählen Sie in Android Studio Tools > Relay-Einstellungen. Das Dialogfeld Relay-Einstellungen wird angezeigt.
5. Fügen Sie das Zugriffstoken in das Textfeld Figma Access Token (Figma Access Token) ein und klicken Sie auf OK. Ihre Umgebung ist eingerichtet.

Hinweis: Weitere Informationen zum Einrichten der Relay-Entwicklungsumgebung finden Sie unter Relay installieren.

3. Überprüfen Sie das Design der App.

Für die Reflect-App haben wir mit einer Designfachkraft zusammengearbeitet, um Farbe, Typografie, Layout und Verhalten der App zu definieren. Wir haben diese Designs in Übereinstimmung mit den Material Design 3-Konventionen erstellt, damit die App nahtlos mit Material Design 3-Konventionen funktioniert.

Startbildschirm aufrufen

Auf dem Startbildschirm wird eine Liste der benutzerdefinierten Tracker angezeigt. Es bietet auch Angebote, mit denen du den aktiven Tag ändern und andere Tracker entwickeln kannst.

In Figma haben unsere Designer diesen Bildschirm in mehrere Komponenten unterteilt, ihre APIs definiert und sie mit dem Relay for Figma-Plug-in verpackt. Nachdem diese Komponenten gepackt wurden, können Sie sie in Ihr Android Studio-Projekt importieren.

Hinweis: Das Definieren von Komponentenparametern funktioniert am besten im Rahmen einer Zusammenarbeit zwischen Designern und Entwicklern. Dadurch wird sichergestellt, dass beide Rollen eine einheitliche Ansicht der Komponente und ihrer verfügbaren Optionen haben.

Überprüfen Sie den Bildschirm zum Hinzufügen/Bearbeiten.

Auf dem Bildschirm zum Hinzufügen/Bearbeiten können Nutzer Tracker hinzufügen oder bearbeiten. Das angezeigte Formular unterscheidet sich je nach Tracker-Typ geringfügig.

In ähnlicher Weise ist dieser Bildschirm in mehrere gepackte Komponenten unterteilt.

Thema noch einmal ansehen

Farben und Typografie für dieses Design werden als Figma-Stile implementiert, die auf den Token-Namen von Material Design 3 basieren. Dies ermöglicht eine bessere Interoperabilität mit „Designs zum Verfassen“ und „Material-Komponenten“.

4. UI-Pakete importieren

Link zur Figma-Quelle abrufen

Bevor Sie UI-Pakete in Ihr Projekt importieren können, müssen Sie die Designquelle in Figma hochladen.

So erhalten Sie den Link zur Figma-Quelle:

1. Klicken Sie in Figma auf Import file (Datei importieren) und wählen Sie dann die Datei ReflectDesign.fig aus dem Projektordner CompleteAppCodelab aus.
2. Klicken Sie mit der rechten Maustaste auf die Datei und wählen Sie Link kopieren aus. Sie benötigen sie im nächsten Abschnitt.

Hinweis: Sie müssen Figma-Quelldateien außerhalb dieses Codelabs nicht importieren. Designschaffende stellen eine URL bereit.

UI-Pakete in das Projekt importieren

1. Öffnen Sie in Android Studio das Projekt ./CompleteAppCodelab.
2. Klicken Sie auf Datei > Neu > UI-Pakete importieren. Das Dialogfeld UI-Pakete importieren wird angezeigt.
3. Fügen Sie in das Textfeld Figma source URL (Figma-Quell-URL) die URL ein, die Sie im vorherigen Abschnitt kopiert haben.

4. Geben Sie im Textfeld App-Design den Wert com.google.relay.example.reflect.ui.theme.ReflectTheme ein. Dadurch wird sichergestellt, dass für die generierten Vorschauen das benutzerdefinierte Design verwendet wird.
5. Klicken Sie auf Weiter. Sie sehen eine Vorschau der UI-Pakete der Datei.
6. Klicken Sie auf Erstellen. Die Pakete werden in Ihr Projekt importiert.
7. Gehen Sie zum Tab Project und klicken Sie neben dem Ordner ui-packages auf den Erweiterungspfeil.

Hinweis: Wenn der Ordner ui-packages nicht angezeigt wird, klicken Sie mit der rechten Maustaste auf den Ordner app und wählen Sie Vom Datenträger neu laden aus.

8. Klicken Sie auf den Erweiterungspfeil neben einem der Paketordner. Sie sehen dann, dass er eine JSON-Quelldatei und Asset-Abhängigkeiten enthält.
9. Öffnen Sie die Quelldatei JSON. Das Relay-Modul zeigt eine Vorschau des Pakets und seiner API an.

Code erstellen und generieren

1. Klicken Sie oben in Android Studio auf Projekt erstellen. Der für jedes Paket generierte Code wird dem Ordner java/com.google.relay.example.reflect hinzugefügt. Generierte zusammensetzbare Funktionen enthalten alle Layout- und Stilinformationen aus dem Figma-Design.
2. Öffnen Sie die Datei com/google/relay/example/reflect/range/Range.kt.
3. Beachten Sie, dass für jede Komponentenvariation eine Vorschau zum Schreiben erstellt wird. Klicken Sie gegebenenfalls auf Aufteilen, damit die Bereiche für Code und Vorschau nebeneinander angezeigt werden.

5. Komponenten integrieren

In diesem Abschnitt werfen Sie einen genaueren Blick auf den generierten Code für den Switch-Tracker.

1. Öffnen Sie in Android Studio die Datei com/google/relay/example/reflect/switch/Switch.kt.

Switch.kt (generiert)

/**
 * 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. Beachten Sie Folgendes:

• Alle Layouts und Stile aus dem Figma-Design werden generiert.
• Unterelemente werden in separate zusammensetzbare Funktionen unterteilt.
• Zusammensetzbare Vorschauen werden für alle Designvarianten generiert.
• Farb- und Typografiestile sind hartcodiert. Dieses Problem beheben Sie später.

Tracker anbringen

1. Öffnen Sie in Android Studio die Datei java/com/google/relay/example/reflect/ui/components/TrackerControl.kt. Diese Datei bietet Gewohnheitstrackern Daten und Interaktionslogik.
2. Erstellen Sie die Anwendung im Emulator und führen Sie sie aus. Derzeit gibt diese Komponente Rohdaten aus dem Tracker-Modell aus.

3. Importieren Sie das Paket com.google.relay.example.reflect.switch.Switch in die Datei.
4. Ersetzen Sie Text(text = trackerData.tracker.toString()) durch einen when-Block, der auf das Feld trackerData.tracker.type ausgerichtet ist.
5. Rufen Sie im Hauptteil des Blocks when die Switch()-Funktion Composable auf, wenn der Typ TrackerType.BOOLEAN ist.

Ihr Code sollte in etwa so aussehen:

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. Erstellen Sie das Projekt neu. Jetzt wird der Switch-Tracker auf der Startseite korrekt so gerendert, wie er mit Live-Daten entworfen wurde.

6. Status und Interaktion hinzufügen

UI-Pakete sind zustandslos. Gerendert wird ein einfaches Ergebnis der übergebenen Parameter. Aber echte Apps erfordern Interaktion und Zustand. Interaktions-Handler können wie alle anderen Parameter an generierte zusammensetzbare Funktionen übergeben werden, aber wo behalten Sie den Status bei, den diese Handler ändern? Wie verhindern Sie, dass derselbe Handler an jede Instanz übergeben wird? Wie können Sie aus Paketen wiederverwendbare zusammensetzbare Funktionen abstrahieren? In diesen Fällen empfehlen wir, die generierten Pakete in einer benutzerdefinierten Composable-Funktion zu packen.

UI-Pakete in eine Controller-Funktion Composable zusammenfassen

Durch das Einbinden von UI-Paketen in eine Controller-Composable-Funktion können Sie die Präsentation oder Geschäftslogik anpassen und bei Bedarf den lokalen Status verwalten. Designschaffende können das ursprüngliche UI-Paket in Figma weiterhin aktualisieren, ohne dass Sie den Wrapper-Code aktualisieren müssen.

So erstellen Sie einen Controller für den Switch-Tracker:

1. Öffnen Sie in Android Studio die Datei java/com/google/relay/example/reflect/ui/components/SwitchControl.kt.
2. Übergeben Sie in der Funktion SwitchControl() Composable die folgenden Parameter:

• trackerData: ein TrackerData-Objekt
• modifier: ein Decorator-Objekt
• onLongClick: ein Interaktions-Callback, um das lange Drücken auf Tracker zum Bearbeiten und Löschen zu ermöglichen

Hinweis: Durch den Empfang von Modelldaten als Objekt wird Ihre Controller API vom Range-Datenschema entkoppelt.

3. Fügen Sie eine Switch()-Funktion ein und übergeben Sie einen combinedClickable-Modifikator für Klicks und langes Drücken.
4. Übergeben Sie Werte vom TrackerData-Objekt an die Funktion Switch(), einschließlich der Methode isToggled().

Die fertige SwitchControl()-Funktion sieht wie dieses Code-Snippet aus:

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. Entfernen Sie in der Datei TrackerControl.kt den Import Switch und ersetzen Sie dann die Funktion Switch() durch einen Aufruf der Funktion SwitchControl().
6. Fügen Sie für die Enumerationskonstanten TrackerType.RANGE und TrackerType.COUNT Fälle hinzu.

Hinweis: Die Funktionen RangeControl() und ValueControl() Composable sind bereits im Startcode implementiert.

Der ausgefüllte when-Block sieht wie dieses Code-Snippet aus:

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. Erstellen Sie das Projekt neu. Du kannst jetzt Tracker anzeigen lassen und mit ihnen interagieren. Der Startbildschirm ist fertig.

7. Vorhandene Komponenten zuordnen

Mit Relay können Entwickler generierten Code anpassen, indem UI-Pakete durch vorhandene zusammensetzbare Funktionen ersetzt werden. Auf diese Weise können Sie sofort einsatzbereite Komponenten oder sogar benutzerdefinierte Designsysteme in Ihren Code ausgeben.

Textfelder zuordnen

In der folgenden Abbildung sehen Sie das Design für die Komponente Tracker Settings im Dialogfeld Tracker hinzufügen/bearbeiten:

Unser Designer hat im Design ein ReflectTextField verwendet, für das wir bereits eine Code-Implementierung haben, die auf Material Design 3-Textfeldern basiert. Figma unterstützt Textfelder nicht nativ, sodass der von Relay generierte Standardcode nur wie das Design aussieht. es ist kein funktionales Steuerelement.

So testen Sie die aktuelle Implementierung für TrackerSettings:

1. Erstellen Sie die App in Android Studio und führen Sie sie im Emulator aus.
2. Drücken Sie lange auf eine Trackerzeile und wählen Sie Bearbeiten aus.
3. Tippen Sie auf das Textfeld Title. Beachten Sie, dass es nicht auf Interaktionen reagiert.

Als Ersatz für die tatsächliche Implementierung dieses Elements benötigen Sie zwei Dinge: ein Textfeld-UI-Paket und eine Zuordnungsdatei. Glücklicherweise hat unser Designer bereits unsere Designsystemkomponenten in Figma verpackt und in seinem Design für Tracker Settings eine Textfeldkomponente verwendet. Standardmäßig wird dieses verschachtelte Paket als Abhängigkeit generiert. Sie verwenden jedoch die Komponentenzuordnung, um ihn auszutauschen.

Zuordnungsdatei erstellen

Das Plug-in "Relay for Android Studio" bietet eine Verknüpfung zum Erstellen von Komponentenzuordnungsdateien.

So erstellen Sie eine Zuordnungsdatei:

1. Klicken Sie in Android Studio mit der rechten Maustaste auf das UI-Paket text_field und wählen Sie dann Zuordnungsdatei generieren aus.

2. Ein Dialogfeld für die Zuordnungsdatei wird angezeigt. Geben Sie die folgenden Optionen ein:

• Wählen Sie unter Zusammensetzbare Ausrichtungsziel die Option Vorhandene zusammensetzbare Funktion verwenden aus und geben Sie com.google.relay.example.reflect.ui.components.ReflectTextField ein.
• Klicken Sie unter Generierte Datei das Kästchen Implementierung generieren an und entfernen Sie das Häkchen bei Schreibvorschau generieren.

3. Klicken Sie auf Zuordnungsdatei erstellen. Dadurch wird die folgende Zuordnungsdatei generiert:

text_field.json

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

Komponentenzuordnungsdateien identifizieren ein Ziel und ein Paket der Compose-Klasse sowie eine optionale Sammlung von fieldMapping-Objekten. Mit diesen Feldzuordnungen können Sie Paketparameter in die erwarteten Compose-Parameter umwandeln. In diesem Fall sind die APIs identisch, sodass Sie nur die Zielklasse angeben müssen.

4. Erstellen Sie das Projekt neu.
5. Suchen Sie in der Datei trackersettings/ TrackerSettings.kt nach der generierten zusammensetzbaren Funktion TitleFieldStyleFilledStateEnabledTextConfigurationsInputText() und achten Sie darauf, dass sie eine generierte ReflectTextField-Komponente enthält.

TrackerSettings.kt (generiert)

@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. Erstellen Sie das Projekt neu. Jetzt kannst du mit den Tracker-Einstellungsfeldern interagieren. Der Bearbeitungsbildschirm ist abgeschlossen.

Hinweis: Weitere Informationen zur Zuordnung von Relay-Komponenten finden Sie unter Zuordnung von Komponenten zu vorhandenem Code.

8. Designs zuordnen, um Elemente zu verfassen

Standardmäßig generiert Relay Literalwerte für Farben und Typografie. Dies gewährleistet die Genauigkeit der Übersetzung, verhindert jedoch, dass Komponenten das Designsystem „Compose“ verwenden. Dies ist im dunklen Modus deutlich:

Die Navigationskomponente für den Tag ist fast unsichtbar und die Farben sind falsch. Um dies zu beheben, verwenden Sie die Stilzuordnungsfunktion in Relay, um Figma-Stile mit der Option „Compose-Design-Tokens“ in Ihrem generierten Code zu verknüpfen. Dies erhöht die visuelle Einheitlichkeit zwischen Relay- und Material Design 3-Komponenten und ermöglicht die Unterstützung des dunklen Modus.

Stilzuordnungsdatei erstellen

1. Gehen Sie in Android Studio zum Verzeichnis src/main/ui-package-resources und erstellen Sie ein neues Verzeichnis mit dem Namen style-mappings. Erstellen Sie in diesem Verzeichnis eine figma_styles.json-Datei, die den folgenden Code enthält:

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

Diese Dateien werden mit zwei Objekten auf oberster Ebene strukturiert: figma und compose. In diesen Objekten sind Farb- und Typdefinitionen zwischen beiden Umgebungen über Zwischentokens verknüpft. Auf diese Weise können mehrere Figma-Stile einem einzigen Compose-Designeintrag zugeordnet werden. Dies ist nützlich, wenn Sie helle und dunkle Designs unterstützen.

2. Überprüfen Sie die Zuordnungsdatei, insbesondere wie sie Typografieeigenschaften von Figma den Anforderungen von Compose neu zuordnet.

Hinweis: Weitere Informationen zur Relay-Stilzuordnung finden Sie unter Stile zum Schreiben-Design zuordnen.

UI-Pakete neu importieren

Nachdem Sie eine Zuordnungsdatei erstellt haben, müssen Sie alle UI-Pakete noch einmal in Ihr Projekt importieren, da alle Figma-Stilwerte beim ersten Import verworfen wurden, da keine Zuordnungsdatei bereitgestellt wurde.

So importieren Sie UI-Pakete noch einmal:

1. Klicken Sie in Android Studio auf File > Neu > UI-Pakete importieren. Das Dialogfeld UI-Pakete importieren wird angezeigt.
2. Geben Sie in das Textfeld der Figma-Quell-URL die URL der Figma-Quelldatei ein.
3. Klicken Sie das Kästchen Figma-Stile in Compose-Design übersetzen an.
4. Wählen Sie Benutzerdefinierte Konfiguration importieren aus. Klicken Sie auf das Ordnersymbol und wählen Sie die soeben erstellte Datei aus: src/main/ui-package-resources/style-mappings/figma_styles.json.
5. Klicken Sie auf Weiter. Sie sehen eine Vorschau der UI-Pakete der Datei.
6. Klicken Sie auf Erstellen. Die Pakete werden in Ihr Projekt importiert.

7. Erstellen Sie das Projekt neu und öffnen Sie dann die Datei switch/Switch.kt, um den generierten Code anzusehen.

Switch.kt (generiert)

@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. Beachten Sie, wie der Parameter backgroundColor im Objekt „Compose“ auf das Feld MaterialTheme.colorScheme.surfaceVariant gesetzt ist.
9. Führen Sie das Projekt aus und aktivieren Sie im Emulator den dunklen Modus. Das Design wird richtig angewendet und die visuellen Fehler wurden behoben.

9. Glückwunsch

Glückwunsch! Jetzt wissen Sie, wie Sie Relay in Ihre Apps zum Schreiben von Texten einbinden.

Weitere Informationen

• Relay – Übersicht, Einrichtung und Dokumentation
• Grundlegendes zu Relay
• Anleitung zu Relay für Fortgeschrittene
• Für den Relay-Newsletter anmelden