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 …

    Opsi Impor Paket UI … di bawah menu File
  2. Masukkan URL untuk file Figma yang berisi Paket UI.

    Dialog Impor 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".

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

Layar impor Paket UI

Layar impor mencakup informasi berikut:

Layar impor Paket UI
  • 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

Sidebar 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.

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.

    Opsi Update 5 Paket UI di menu konteks
  2. Anda juga dapat mengklik kanan folder ui-packages untuk mengupdate semua paket UI.

    Opsi Update Semua Paket UI di menu konteks