Alur kerja Android Studio

Mengimpor Paket UI

Setelah membuat Paket UI di Figma, Anda dapat mengimpornya ke project Android Studio. Saat project di-build, Relay membuat kode Jetpack Compose.

Untuk mengimpor Paket UI ke project Android Studio:

1. Pilih File > Baru > Impor Paket UI …

   

2. Masukkan URL untuk file Figma yang berisi Paket UI.

   

3. Klik Berikutnya.

4. Pilih Paket UI yang ingin Anda impor. Komponen yang ditampilkan bergantung pada apakah Anda menempelkan komponen, halaman, atau link file. Jika sudah diimpor, Paket UI akan diberi label "DIUPDATE". Jika belum, akan ditampilkan sebagai "BARU".

   

   Catatan: Paket UI bertingkat dalam Paket UI lain akan otomatis diimpor jika induk dipilih.

5. Klik Selesai untuk mengimpor paket yang dipilih dan dependensinya ke dalam folder ui-packages.

Layar impor Paket UI

Layar impor mencakup informasi berikut:

• Gambar pratinjau komponen dan variannya.
• Judul dan deskripsi.
• Daftar varian dan propertinya.
• Daftar parameter konten dan jenisnya.
• Daftar pengendali interaksi dan jenisnya.

Jendela alat Paket UI

Plugin Android Studio menambahkan jendela alat bernama Paket UI. File ini akan terbuka setiap kali Anda memilih file dalam folder Paket UI (misalnya, app/src/main/ui-packages/mycomponent/). Jendela alat menampilkan ringkasan Paket UI dan kontennya.

Mem-build Project Android Anda

Saat Anda mem-build project Android Studio yang berisi Paket UI, plugin Relay Gradle menghasilkan kode dari Paket UI dan mengompilasinya. Aset font juga akan didownload dan disalin ke project Anda.

Jika ingin mem-build Paket UI yang diimpor saja dan bukan seluruh project, Anda dapat menjalankan tugas Gradle khusus ini:

• generateDebugRelayCode atau generateReleaseRelayCode menghasilkan versi rilis atau debug kode yang berasal dari Paket UI.
• generateRelayRuntimeCode membuat library runtime yang digunakan oleh kode yang dihasilkan.

Selama proses build:

1. Kode dihasilkan dari Paket UI dan disimpan dalam folder terpisah.
2. Gambar dan font disalin ke folder resource umum yang dibuat.

Lokasi folder didokumentasikan dalam Memahami Paket UI & Kode yang Dihasilkan.

Peringatan: Biasanya, kode akan dibuat ulang di build jika Paket UI diupdate sejak build terakhir. Namun, mengupdate dependensi yang terletak di luar direktori ui-packages tidak memaksa kode dibuat ulang saat Anda membuat project. Hal ini dapat terjadi jika file adalah file pemetaan tema atau file komponen referensi.

Solusi: Untuk memaksa update pada kode yang dihasilkan, bersihkan project (buka Build > Bersihkan Project) atau hapus folder kode yang dihasilkan yang terkait dengan Paket UI yang perlu diupdate. Kemudian, build kembali.

Mengupdate Paket UI

Saat versi desain baru sudah siap, desainer harus membuat versi file Figma baru yang diberi nama.

Di Android Studio, pastikan jendela alat Project berada dalam tampilan Android.

1. Di folder ui-packages dalam modul Anda, klik kanan folder Paket UI yang ingin Anda update, lalu pilih Update Paket UI. Dalam contoh berikut, kami memilih lima Paket UI yang akan diupdate.

   

2. Anda juga dapat mengklik kanan folder ui-packages untuk mengupdate semua paket UI.

   

Catatan: Jika Anda tidak melihat folder ui-packages di tampilan Android, buka Tampilan project, lalu buka src/main/ui-packages di dalam modul Anda. Anda juga dapat mengklik kanan folder teratas dan memilih "Reload from Disk".