Membuat aplikasi lengkap dengan Relay dan Jetpack Compose

1. Sebelum memulai

Relay adalah toolkit yang memungkinkan tim mendesain komponen UI di Figma dan menggunakannya langsung di project Jetpack Compose. Dengan Relay, Anda tidak memerlukan spesifikasi desain dan siklus UM (Uji Mutu) yang merepotkan, sehingga tim dapat menghasilkan UI Android yang berkualitas dengan cepat.

Dalam codelab ini, Anda akan mempelajari cara mengintegrasikan Paket UI Relay ke proses pengembangan Compose. Codelab ini berfokus pada teknik integrasi, bukan alur kerja end-to-end. Untuk mempelajari alur kerja Relay secara umum, lihat Tutorial dasar Relay.

Prasyarat

Pengalaman dasar dengan Compose. Jika belum memilikinya, selesaikan codelab Dasar-Dasar Jetpack Compose.
Berpengalaman dengan sintaksis Kotlin.

Yang akan Anda pelajari

Cara mengimpor Paket UI.
Cara mengintegrasikan Paket UI dengan arsitektur data dan navigasi.
Cara menggabungkan Paket UI dengan logika pengontrol.
Cara memetakan gaya Figma ke tema Compose Anda.
Cara mengganti Paket UI dengan composable yang ada di kode yang dihasilkan.

Yang akan Anda buat

Desain aplikasi realistis berdasarkan paket Relay yang diberikan oleh desainer. Aplikasi ini disebut Reflect, aplikasi pelacak harian yang mendukung mindfulness dan kebiasaan baik. Aplikasi ini berisi kumpulan berbagai jenis pelacak dan UI untuk menambahkan dan mengelola pelacak tersebut. Aplikasi ini akan terlihat seperti gambar berikut:

Aplikasi yang sudah selesai

Yang akan Anda butuhkan

Versi terbaru Android Studio
Akun Figma gratis dan token akses pribadi

2. Memulai persiapan

Mendapatkan kode

Guna mendapatkan kode untuk codelab ini, lakukan salah satu langkah berikut:

Clone relay-codelabs repository dari GitHub:

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

Buka relay-codelabs repository di GitHub, pilih cabang yang diinginkan, klik Code > Download zip, lalu ekstrak file ZIP yang didownload.

Pada kedua langkah tersebut, cabang main berisi kode awal dan cabang end berisi kode solusi.

Menginstal plugin Relay for Android Studio

Jika Anda belum memiliki plugin Relay for Android Studio, ikuti langkah-langkah berikut:

Di Android Studio, klik Settings > Plugins.
Di kotak teks, masukkan Relay for Android Studio.
Pada ekstensi yang muncul di hasil penelusuran, klik Install.

Setelan plugin Android Studio

Jika Anda melihat dialog Catatan privasi plugin pihak ketiga, klik Accept.
Klik OK > Restart.
Jika Anda melihat dialog Confirm exit, klik Exit.

Menghubungkan Android Studio ke Figma

Relay mengambil Paket UI dengan Figma API. Untuk menggunakannya, Anda memerlukan akun Figma gratis dan token akses pribadi. Oleh karena itu, keduanya dicantumkan di bagian Yang akan Anda butuhkan.

Jika Anda belum menghubungkan Android Studio ke Figma, ikuti langkah-langkah berikut:

Di akun Figma Anda, klik ikon profil di bagian atas halaman, lalu pilih Settings.
Di bagian Personal access tokens, masukkan deskripsi untuk token akses di kotak teks, lalu tekan Enter (atau return di macOS). Token akan dibuat.
Klik Copy this token.

Token akses yang dibuat di Figma

Di Android Studio, pilih Tools > Relay Settings. Dialog Relay settings akan muncul.
Di kotak teks Figma Access Token, tempel token akses, lalu klik OK. Lingkungan Anda sudah siap.

3. Meninjau desain aplikasi

Untuk aplikasi Reflect, kami bekerja sama dengan desainer untuk membantu kami menentukan warna, tipografi, tata letak, dan perilaku aplikasi. Kami membuat desain ini sesuai dengan konvensi Desain Material 3 agar aplikasi dapat menyatu dengan komponen dan tema Material.

Meninjau layar utama

Layar utama menampilkan daftar pelacak yang ditentukan pengguna. Layar ini juga memberikan affordance untuk mengubah hari aktif dan membuat pelacak lainnya.

Layar utama

Di Figma, desainer kami membagi layar ini menjadi beberapa komponen, menentukan API-nya, dan memaketkannya dengan plugin Relay for Figma. Setelah komponen ini dipaketkan, Anda dapat mengimpornya ke project Android Studio.

Komponen layar utama

Meninjau layar tambahkan/edit

Layar tambahkan/edit memungkinkan pengguna menambahkan atau mengedit pelacak. Format yang ditampilkan sedikit berbeda bergantung pada jenis pelacak.

Layar tambahkan/edit

Seperti layar utama, layar ini juga dibagi menjadi beberapa komponen yang dipaketkan.

Komponen layar tambahkan/edit

Meninjau tema

Warna dan tipografi untuk desain ini diimplementasikan sebagai gaya Figma berdasarkan nama token Desain Material 3. Hal ini memberikan interoperabilitas yang lebih baik dengan tema Compose dan komponen Material.

Gaya Figma

4. Mengimpor Paket UI

Mendapatkan link ke sumber Figma

Sebelum dapat mengimpor Paket UI ke project, Anda harus mengupload sumber desain ke Figma.

Untuk mendapatkan link ke sumber Figma, ikuti langkah-langkah berikut:

Di Figma, klik Import file, lalu pilih file ReflectDesign.fig yang ditemukan di folder project codelab.
Klik kanan file, lalu pilih Copy link. Anda akan memerlukannya di bagian berikutnya.

Mengimpor Paket UI ke project

Di Android Studio, buka project ./CompleteAppCodelab.
Klik File > New > Import UI Packages. Dialog Import UI Packages akan muncul.
Di kotak teks Figma source URL, tempel URL yang Anda salin di bagian sebelumnya.

Dialog Import UI Packages

Di kotak teks App theme, masukkan com.google.relay.example.reflect.ui.theme.ReflectTheme. Tindakan ini memastikan bahwa pratinjau yang dihasilkan menggunakan tema kustom.
Klik Next. Anda akan melihat pratinjau Paket UI file.
Klik Create. Paket akan diimpor ke project Anda.
Buka tab Project, lalu klik panah peluas di samping folder ui-packages.

Folder ui-packages

Klik panah peluas di samping salah satu folder paket, lalu perhatikan bahwa folder tersebut akan berisi file sumber JSON dan dependensi aset.
Buka file sumber JSON. Modul Relay akan menampilkan pratinjau paket beserta API-nya.

Modul pratinjau paket Relay

Membuat dan menghasilkan kode

Di bagian atas Android Studio, klik Make project. Kode yang dihasilkan untuk setiap paket akan ditambahkan ke file java/com.google.relay.example.reflect. Composable yang dihasilkan berisi semua informasi tata letak dan gaya tampilan dari desain Figma.
Jika perlu, klik Split agar Anda dapat melihat panel kode dan pratinjau secara berdampingan.
Buka file range/Range.kt, lalu perhatikan bahwa pratinjau Compose akan dibuat untuk setiap variasi komponen.

5. Mengintegrasikan komponen

Di bagian ini, Anda akan mempelajari lebih dalam kode yang dihasilkan untuk pelacak Switch.

Desain untuk pelacak Switch

Di Android Studio, buka file com/google/relay/example/reflect/switch/Switch.kt.

Switch.kt (yang dihasilkan)

/**
 * 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))
                }
            }
        }
    }
}

Perhatikan catatan berikut:

Semua tata letak dan gaya tampilan dari desain Figma telah dibuat.
Subkomponen dibagi menjadi composable terpisah.
Pratinjau Composable dibuat untuk semua variasi desain.
Warna dan gaya tipografi di-hardcode. Anda akan memperbaiki ini nanti.

Menyisipkan pelacak

Di Android Studio, buka file java/com/google/relay/example/reflect/ui/components/TrackerControl.kt. File ini memberikan logika interaksi dan data ke pelacak kebiasaan. Untuk sekarang, komponen ini menghasilkan output berupa data mentah dari model pelacak.

Impor paket com.google.relay.example.reflect.switch.Switch ke file.
Buat blok when yang melakukan perubahan pada kolom trackerData.tracker.type.
Dalam isi blok when, panggil fungsi Switch() Composable jika jenisnya TrackerType.BOOLEAN.

Kode akan terlihat seperti berikut:

TrackerControl.kt

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

Buat ulang project. Halaman beranda kini akan merender pelacak Switch dengan benar sesuai desain dan disertai data live.

6. Menambahkan status dan interaksi

Paket UI bersifat stateless. Yang dirender adalah hasil sederhana dari parameter yang diteruskan. Namun, aplikasi sungguhan memerlukan interaksi dan status. Pengendali interaksi dapat diteruskan ke composable yang dihasilkan seperti parameter lainnya, tetapi di mana Anda dapat menyimpan status yang dimanipulasi pengendali tersebut? Bagaimana cara menghindari penerusan pengendali yang sama ke setiap instance? Bagaimana cara memisahkan komposisi paket ke composable yang dapat digunakan kembali? Untuk kasus ini, sebaiknya gabungkan paket yang dihasilkan dalam fungsi Composable kustom.

Menggabungkan paket UI dalam fungsi `Composable` pengontrol

Dengan menggabungkan Paket UI dalam fungsi Composable pengontrol, Anda dapat menyesuaikan presentasi atau logika bisnis dan mengelola status lokal, jika diperlukan. Meskipun Anda tidak memperbarui kode wrapper, desainer masih dapat memperbarui Paket UI asli di Figma.

Guna membuat pengontrol untuk pelacak Switch, ikuti langkah-langkah berikut:

Di Android Studio, buka file java/com/google/relay/example/reflect/ui/components/SwitchControl.kt.
Dalam fungsi SwitchControl() Composable, teruskan parameter berikut:

trackerData: objek TrackerData
modifier: objek dekorator
onLongClick: callback interaksi guna mengaktifkan fitur tekan lama pada pelacak untuk fungsi edit dan hapus

modifier

Teruskan pengubah combinedClickable ke fungsi Switch() untuk menangani klik dan tekan lama.
Teruskan nilai dari objek TrackerData ke fungsi Switch(), termasuk metode isToggled().

Fungsi SwitchControl() yang sudah selesai akan terlihat seperti cuplikan kode ini:

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

Dalam file TrackerControl.kt, hapus hasil impor Switch, lalu ganti fungsi Switch() dengan panggilan ke fungsi SwitchControl().
Tambahkan kasus untuk konstan enumerator TrackerType.RANGE dan TrackerType.COUNT.

Blok when yang sudah selesai akan terlihat seperti cuplikan kode ini:

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

Buat ulang project. Sekarang Anda dapat menampilkan dan berinteraksi dengan pelacak. Layar utama sudah selesai.

7. Memetakan komponen yang ada

Relay memungkinkan developer menyesuaikan kode yang dihasilkan melalui penggantian Paket UI dengan composable yang ada. Ini adalah cara yang bagus untuk menghasilkan output berupa komponen unik atau bahkan sistem desain kustom dalam kode Anda.

Memetakan kolom teks

Gambar berikut adalah desain untuk Switch Tracker Editor dalam dialog Add/edit tracker:

Desain untuk komponen setelan Switch

Desainer kami menggunakan ReflectTextField dalam desain ini, dan untuk hal tersebut, kami sudah memiliki implementasi dalam kode yang dibuat berdasarkan kolom teks Desain Material 3. Secara native, Figma tidak mendukung kolom teks, sehingga kode default yang dihasilkan oleh Relay hanya terlihat seperti desain ini, bukan merupakan kontrol yang fungsional.

Guna mengganti implementasi sebenarnya untuk elemen ini, Anda memerlukan dua hal: paket UI kolom teks dan file pemetaan. Untungnya, desainer kami sudah memaketkan komponen sistem desain di Figma dan menggunakan komponen tombol di desainnya untuk Tracker Editor. Secara default, paket bertingkat ini dihasilkan sebagai dependensi paket menu setelan, tetapi Anda harus menggunakan pemetaan komponen untuk menukarnya.

Komponen Figma untuk kolom teks dengan plugin Relay yang ditampilkan di atasnya

Membuat file pemetaan

Plugin Relay for Android Studio memberikan pintasan untuk membuat file pemetaan komponen.

Untuk membuat file pemetaan, ikuti langkah-langkah berikut:

Di Android Studio, klik kanan paket UI text_field, lalu pilihGenerate mapping file.

Item menu konteks Generate mapping file

Dalam file tersebut, masukkan kode berikut:

text_field.json

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

File pemetaan komponen mengidentifikasi paket dan target class Compose, serta kumpulan objek fieldMapping opsional. Pemetaan kolom ini memungkinkan Anda mengubah parameter paket menjadi parameter Compose yang diharapkan. Dalam kasus ini, API-nya identik, sehingga Anda hanya perlu menentukan class target.

Buat ulang project.
Dalam file trackersettings/ TrackerSettings.kt, temukan fungsi Composable TitleFieldStyleFilledStateEnabledTextConfigurationsInputText() yang dihasilkan dan perhatikan bahwa fungsi tersebut menyertakan komponen ReflectTextField yang dihasilkan.

TrackerSettings.kt (yang dihasilkan)

@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. Memetakan ke tema Compose

Secara default, Relay menghasilkan nilai literal untuk warna dan tipografi. Dengan begitu, komponen tersebut akan dikonversikan secara akurat, tetapi tidak akan dapat menggunakan sistem penerapan tema Compose. Hal ini akan terlihat jelas ketika Anda melihat aplikasi dalam mode gelap:

Pratinjau layar utama yang menggunakan mode gelap dan menampilkan warna yang tidak sesuai

Komponen navigasi hari hampir tidak terlihat dan warnanya tidak sesuai. Untuk memperbaiki masalah ini, gunakan fitur pemetaan gaya di Relay untuk menautkan gaya Figma ke token tema Compose dalam kode yang dihasilkan. Hal ini akan meningkatkan konsistensi visual antara komponen Desain Material 3 dan Relay, serta mengaktifkan dukungan mode gelap.

Membuat file pemetaan gaya

Di Android Studio, buka folder src/main/ui-package-resources/style-mappings, lalu buat file figma_styles.json yang berisi kode berikut:

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

File pemetaan tema disusun dengan dua objek tingkat teratas: figma dan compose. Dalam objek ini, definisi warna dan jenis akan tertaut antara kedua lingkungan melalui token perantara. Dengan begitu, beberapa gaya Figma dapat dipetakan ke satu entri tema Compose, yang akan berguna saat Anda mendukung tema terang dan gelap.

Tinjau file pemetaan, khususnya bagaimana file tersebut memetakan ulang properti tipografi dari Figma ke tema yang sesuai di Compose.

Mengimpor ulang Paket UI

Setelah membuat file pemetaan, Anda harus mengimpor ulang semua Paket UI ke project Anda karena semua nilai gaya Figma dihapus saat impor awal akibat tidak disediakannya file pemetaan.

Untuk mengimpor ulang Paket UI, ikuti langkah-langkah berikut:

Di Android Studio, klik File > New > Import UI Packages. Dialog Import UI Packages akan muncul.
Di kotak teks Figma source URL, masukkan URL file sumber Figma.
Pilih kotak centang Translate Figma styles to Compose theme.
Klik Next. Anda akan melihat pratinjau Paket UI file.
Klik Create. Paket akan diimpor ke project Anda.

Dialog Import UI Packages

Buat ulang project Anda, lalu buka file switch/Switch.kt untuk melihat kode yang dihasilkan.

Switch.kt (yang dihasilkan)

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

Perhatikan bagaimana parameter backgroundColor ditetapkan ke kolom MaterialTheme.colorScheme.surfaceVariant dalam objek tema Compose.
Di panel pratinjau, alihkan aplikasi ke mode gelap. Tema akan diterapkan dengan sesuai dan bug visual akan diperbaiki.

9. Selamat

Selamat! Anda telah mempelajari cara mengintegrasikan Relay ke aplikasi Compose!

Membuat aplikasi lengkap dengan Relay dan Jetpack Compose

1. Sebelum memulai

Prasyarat

Yang akan Anda pelajari

Yang akan Anda buat

Yang akan Anda butuhkan

2. Memulai persiapan

Mendapatkan kode

Menginstal plugin Relay for Android Studio

Menghubungkan Android Studio ke Figma

3. Meninjau desain aplikasi

Meninjau layar utama

Meninjau layar tambahkan/edit

Meninjau tema

4. Mengimpor Paket UI

Mendapatkan link ke sumber Figma

Mengimpor Paket UI ke project

Membuat dan menghasilkan kode

5. Mengintegrasikan komponen

Switch.kt (yang dihasilkan)

Menyisipkan pelacak

TrackerControl.kt

6. Menambahkan status dan interaksi

Menggabungkan paket UI dalam fungsi Composable pengontrol

SwitchControl.kt

SwitchControl.kt

7. Memetakan komponen yang ada

Memetakan kolom teks

Membuat file pemetaan

text_field.json

TrackerSettings.kt (yang dihasilkan)

8. Memetakan ke tema Compose

Membuat file pemetaan gaya

figma_styles.json

Mengimpor ulang Paket UI

Switch.kt (yang dihasilkan)

9. Selamat

Pelajari lebih lanjut

Menggabungkan paket UI dalam fungsi `Composable` pengontrol