Membuat dan menyebarkan update desain

Di bagian ini, Anda akan mempelajari cara mengubah komponen di Figma (dalam hal ini, mengubah format teks) dan melihat perubahan yang disebarkan ke codebase di Android Studio, dengan membuat project sebelumnya.

Sebelum dan setelah perbandingan

Perubahan di Figma

Mari kita lakukan pembaruan di komponen Figma. Kembali ke file Figma Anda:

  1. Pilih lapisan teks Title. Di bagian Teks, ubah gaya menjadi Tebal.

    Teks judul dipilih dan dicetak tebal di Figma

Menyimpan versi yang diberi nama

Sekarang, integrasikan komponen yang diupdate ke codebase Anda. Untuk memastikan bahwa developer menggunakan versi baru komponen Anda, ulangi langkah-langkah untuk menyimpan versi.

  1. Buka plugin Figma Relay jika belum terbuka.

  2. Klik Bagikan kepada developer.

    Opsi simpan ke histori versi di menu
  3. Dari layar Bagikan kepada developer, Anda dapat memasukkan nama dan deskripsi versi baru di bagian Simpan histori versi.

    Opsi simpan ke histori versi di menu
  4. Ketik CMD-L di Mac atau CTRL-L di Windows, pada keyboard, untuk menyalin link baru ke papan klip.

Mengupdate kode komponen

Sekarang, mari kita impor ulang komponen:

  1. Di Android Studio, pastikan jendela alat Project berada dalam tampilan Android. Kemudian, klik kanan app/ui-packages/hello_card/, lalu pilih Update UI Package.

    Opsi Update UI Package di menu konteks

    Tunggu hingga status pemuatan di pojok kanan bawah selesai:

    Status pemuatan Android Studio
  2. Klik Tombol Buat Project untuk membuat project Anda, dan lihat komponen yang diupdate dalam pratinjau app/java/com/example/hellofigma/MainActivity.kt. Perhatikan bahwa teks kini dicetak tebal.

    Tombol build di toolbar
    Pratinjau komponen
  3. Jalankan aplikasi untuk melihat update yang sama di emulator.

    Tombol Run di toolbar
    Pratinjau aplikasi di emulator

Langkah berikutnya

Setelah mengupdate desain dan melihat cara kode yang dihasilkan juga diupdate, kita dapat mengalihkan fokus untuk menganotasi desain dengan parameter konten yang memungkinkan data variabel dalam komponen.