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](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/design-updates/before-and-after.png?authuser=19&hl=id)
Perubahan di Figma
Mari kita lakukan pembaruan di komponen Figma. Kembali ke file Figma Anda:
Pilih lapisan teks Title. Di bagian Teks, ubah gaya menjadi Tebal.
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.
Buka plugin Figma Relay jika belum terbuka.
Klik Bagikan kepada developer.
Dari layar Bagikan kepada developer, Anda dapat memasukkan nama dan deskripsi versi baru di bagian Simpan histori versi.
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:
Di Android Studio, pastikan jendela alat Project berada dalam tampilan Android. Kemudian, klik kanan
app/ui-packages/hello_card/
, lalu pilih Update UI Package.Tunggu hingga status pemuatan di pojok kanan bawah selesai:
Klik
untuk membuat project Anda, dan lihat komponen yang diupdate dalam pratinjau
app/java/com/example/hellofigma/MainActivity.kt
. Perhatikan bahwa teks kini dicetak tebal.Jalankan aplikasi untuk melihat update yang sama 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.
Direkomendasikan untuk Anda
- Catatan: teks link ditampilkan saat JavaScript nonaktif
- Parameter konten
- Mengonversi desain menjadi kode di Android Studio