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 update komponen Figma. Kembali ke file Figma Anda:

  1. Pilih lapisan teks Judul dan di bagian Text, ubah gaya menjadi Bold.

    Teks judul dipilih dan dicetak tebal di Figma

Menyimpan versi yang diberi nama

Sekarang, mari integrasikan komponen yang diupdate ke codebase Anda. Untuk memastikan bahwa developer menggunakan versi baru komponen Anda, buat versi baru yang diberi nama:

  1. Buka File > Save to Version History, lalu masukkan judul dan deskripsi untuk versi baru Anda.

    Contoh Judul: Kartu Halo Dunia V2

    Contoh Deskripsi: Menambahkan gaya teks

    Opsi simpan ke histori versi di menu

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.