Membuat Paket UI

Paket UI di Figma

Paket UI menentukan model bersama untuk komponen UI Android. Paket UI dibuat di dalam Figma dan digunakan untuk menghasilkan kode Compose produksi di Android Studio. Paket UI berisi informasi berikut:

• Informasi tata letak
• Ringkasan Paket UI
• Parameter interaksi dan konten
• Informasi gaya
• Aset gambar dan font

Membuat Paket UI

Untuk membuat Paket UI menggunakan plugin Relay for Figma:

1. Buka plugin, lalu klik Mulai.
2. Pilih komponen Figma yang ingin Anda kemas.
3. Klik Buat Paket UI.

Untuk membuat beberapa paket UI secara bersamaan:

1. Pilih satu atau beberapa komponen Figma.
2. Klik Create UI Packages. Tindakan ini akan membuat paket UI untuk setiap komponen yang dipilih.

Anda juga dapat memfaktorkan ulang elemen Paket UI yang ada ke dalam paket baru:

1. Pilih frame atau lapisan komponen dalam Paket UI yang ada.
2. Klik ikon menu.
3. Pilih “Buat paket UI dari pilihan”.

Setelah Paket UI diimpor ke Android Studio, Relay membuat kode saat project Android Anda mem-build.

Catatan: Berikan nama yang bermakna untuk lapisan. Jika dua lapisan memiliki nama yang sama dan terikat ke parameter, nilai parameter akan berlaku untuk kedua lapisan. Setiap lapisan diterjemahkan ke dalam fungsi render terpisah di Jetpack Compose.

Catatan: Paket UI tidak boleh berisi elemen atau properti Figma yang tidak didukung. Lihat Pembatasan Figma untuk informasi selengkapnya.

Menambahkan ringkasan

Setelah dibuat, kolom teks akan muncul sehingga Anda dapat menambahkan ringkasan ke Paket UI. Ringkasan muncul sebagai blok komentar di atas fungsi composable yang sesuai dalam kode yang dihasilkan.

Anda juga dapat mengedit ringkasan nanti:

1. Pilih Ringkasan.
2. Edit ringkasan di kolom teks.

Menghapus Paket UI

Pilih ikon menu, lalu Hapus paket. Tindakan ini akan menghapus semua metadata Relay, tetapi tidak menghapus komponen di Figma.