Mengonversi desain menjadi kode di Android Studio

Mengimpor desain dari Figma

Sekarang, kita akan menggabungkan Paket UI yang dibuat di Figma ke dalam project Android Studio. Untuk menerapkan Paket UI, salin URL berbagi yang telah kita buat di bagian sebelumnya ke wizard impor Android Studio.

1. Download file ZIP project Android Studio yang telah dikonfigurasi sebelumnya (yang merupakan project yang sama seperti di halaman Install Relay).

2. Klik dua kali pada file untuk mengekstraknya, yang akan membuat folder bernama HelloFigma. Pindahkan ke folder beranda Anda..

3. Kembali ke Android Studio. Buka File > Buka, buka folder utama, pilih HelloFigma, lalu klik Buka.

4. Saat membuka project, Android Studio mungkin akan bertanya apakah Anda memercayai project tersebut. Klik Percayai Project.

5. Di Android Studio, pilih File > Baru > Impor Paket UI….

   

6. Pada dialog Impor Paket UI, tempel URL file Figma Anda dan klik Berikutnya.

   

   

7. Tunggu file didownload. Jika berhasil didownload, pratinjau komponen akan ditampilkan. Klik Buat.

   

   Perhatikan bahwa file baru telah ditambahkan ke project Anda — file ini harus di-commit ke kontrol sumber sebagai bagian dari project Anda. Dalam tampilan Android project Anda, Anda akan melihat:

   

   • app/ui-packages/hello_card/*
     Semua aset sumber yang diperlukan untuk mendeskripsikan komponen dalam kode. File ini digunakan untuk pembuatan kode pada langkah build.

   • app/ui-packages/hello_card/hello_card.json
     File JSON yang berisi definisi komponen (termasuk tata letak dan properti lainnya).

   • app/ui-packages/hello_card/fonts/*
     File font apa pun yang diperlukan untuk mendukung komponen dalam Jetpack Compose.

   • app/ui-packages/hello_card/*.png atau *.jpeg
     Aset gambar apa pun yang diperlukan untuk mendukung komponen.

   • app/ui-packages/hello_card/VERSION.txt
     Versi plugin Relay for Android Studio yang digunakan untuk mengimpor Paket UI.

   • app/ui-packages/hello_card/config.json
     Tema yang digunakan untuk pratinjau.

Mem-build & membuat kode

1. Klik untuk mem-build project Anda.

   

2. Untuk melihat hasil build, klik tab Build.

   

3. Kode yang dihasilkan sekarang ditambahkan ke project Anda. Karena kode ini dihasilkan, kode tidak boleh di-commit ke kontrol sumber sebagai bagian dari project Anda. Dalam tampilan project Android, Anda dapat melihat:

   

   • app/java (generated)/com/example/hellofigma/hellocard
     Kode dan font Jetpack Compose yang dihasilkan.

   • app/java (generated)/com/google/relay/compose
     Kode runtime bersama yang digunakan di semua Paket UI.

4. Buka app/java (generated)/com/example/hellofigma/hellocard/HelloCard.kt. Ini adalah fungsi Jetpack Compose yang dihasilkan untuk komponen Figma. Anda juga dapat melihat pratinjau komponen.

   Informasi tata letak, aset, dan gaya kini ditransfer dari Figma ke kode.

   

   Dalam kode, ringkasan yang ditambahkan di Figma kini diterjemahkan ke komentar di atas composable yang dihasilkan.

    /**
    * Hello Card component used to display the image and the title content
    *
    * This composable was generated from the UI package ‘ hello_card’
    * Generated code; do not edit directly
    */
   @Composable
   fun HelloCard(modifier: Modifier = Modifier) {...
   

Mengintegrasikan komponen & menjalankan aplikasi

Sekarang, mari kita integrasikan komponen ke aktivitas utama.

1. Di app/java/com/example/hellofigma/MainActivity.kt, tambahkan ke bagian impor di bagian atas:

   import com.example.hellofigma.hellocard.HelloCard
   

2. Selanjutnya, di file yang sama, ubah kode berikut di class MainActivity:

   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) {
                       // Greeting("Android") // Delete this line
                       HelloCard()  // Add this line
                   }
               }
           }
       }
   }
   

3. Di bagian bawah file yang sama, dalam pratinjau composable, ubah satu baris:

   @Preview(showBackground = true)
   @Composable
   fun DefaultPreview() {
       HelloFigmaTheme {
           HelloCard() // Change this line
       }
   }
   

4. Pastikan perangkat dipilih di toolbar.

5. Jalankan project dengan mengklik ▶ di toolbar.

   

   Emulator akan melakukan booting, project akan di-build, dan aplikasi Anda akan dimulai.

   

   Selamat! Anda telah berhasil menggabungkan komponen Figma pertama ke dalam aplikasi Jetpack Compose.

Langkah berikutnya

Membuat dan menyebarkan update desain

Setelah Anda memiliki contoh kerja menyeluruh, mari kita lihat cara mengupdate desain asli dan membuat ulang kode.