Parameter konten

Saat diimplementasikan, konten sebagian besar komponen tidak bersifat statis — akan berubah, bergantung pada data yang disediakan ke komponen. Untuk mencerminkan hal ini dalam desain, Anda dapat menggunakan parameter konten. Parameter konten memungkinkan Anda menentukan bagian desain mana yang berisi data, tanpa melakukan hardcode pada data sebenarnya.

Parameter judul di plugin

Menambahkan parameter konten

  1. Di file Figma, pilih komponen dan buka plugin Relay for Figma (Plugin > Relay for Figma).

    Plugin Figma dengan kartu hello dipilih
  2. Di jendela utama Figma, pilih lapisan Judul dengan + klik di Mac, atau Ctrl + klik di Windows dan Linux. Kemudian, di plugin, klik + di samping “Parameter”, lalu pilih konten teks untuk menambahkan parameter ke lapisan.

    Menu pilihan parameter di plugin Figma
  3. Untuk mengubah nama parameter konten teks Judul, masukkan ke Nama. Untuk tutorial ini, masukkan Judul.

    Detail parameter dalam plugin Figma

    Selain mengedit nama, Anda dapat memilih jenis properti yang berbeda, atau menambahkan deskripsi untuk membuat komentar dalam kode. Bekerja samalah dengan developer Anda untuk menemukan skema penamaan yang paling sesuai. Nama parameter konten diterjemahkan menjadi nama parameter dalam composable yang dihasilkan.

Menyimpan versi yang diberi nama

Sekarang, mari kita tandai versi ini sebagai siap diimpor ke dalam kode.

  1. Buka plugin Figma Relay, jika belum terbuka.
  2. Klik Bagikan kepada developer.
  3. Di layar Bagikan kepada developer, masukkan nama dan deskripsi untuk versi.

    Contoh Judul: Kartu Hello World V3

    Contoh Deskripsi: Parameter yang ditambahkan

Mengupdate komponen di Android Studio

Mari kita update komponen di Android Studio.

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

    Opsi Update UI Package di menu konteks
  2. Klik Tombol Buat Project untuk mem-build project Anda lagi.

    Tombol build di toolbar

    Jika membuka app/java/com/example/hellofigma/hellocard/HelloCard.kt, Anda akan melihat bahwa parameter telah ditambahkan: title. Nama parameter adalah nama parameter konten yang kami tentukan dalam Figma:

    Parameter judul di Figma dan di kode yang dihasilkan
  3. Buka app/java/com/example/hellofigma/MainActivity.kt.

  4. Ubah satu baris di class MainActivity untuk menambahkan nilai ke parameter title:

    class MainActivity : ComponentActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContent {
                HelloFigmaTheme {
                    // A surface container using the 'background' color from the theme
                    Surface(color = MaterialTheme.colors.background) {
                        HelloCard(title="Balloon World!") // Change this line
                    }
                }
            }
        }
    }
    
  5. Di bagian bawah file yang sama, dalam pratinjau composable, ubah satu baris:

    @Preview(showBackground = true)
    @Composable
    fun DefaultPreview() {
        HelloFigmaTheme {
            HelloCard(title="Balloon World!") // Change this line
        }
    }
    
  6. Build project Anda lagi, dan lihat komponen yang diupdate di pratinjau. Perhatikan bahwa parameter value yang baru kini dapat dilihat.

    Pratinjau kartu Hello dengan gaya teks yang diperbarui
  7. Jalankan aplikasi untuk melihat update yang sama di emulator.

    Hore! Anda telah mempelajari dasar-dasar alur kerja Relay.

Langkah berikutnya

Itulah akhir dari tutorial dasar. Meskipun Anda telah melihat banyak fitur alur kerja Relay, ada beberapa fitur lainnya yang tersedia. Jika Anda tertarik mempelajari cara menggunakan fitur seperti pengendali interaksi, bekerja dengan komponen yang memiliki beberapa varian Figma, dan lainnya, lihat tutorial lanjutan.