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 menggabungkan Paket UI, salin URL berbagi yang yang kita buat di bagian sebelumnya ke dalam wizard impor Android Studio.

  1. Download file ZIP project Android Studio yang telah dikonfigurasi sebelumnya (yang merupakan project yang sama dengan 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….

    Opsi Impor Paket UI… di bawah menu File
  6. Pada dialog Impor Paket UI, tempel URL file Figma Anda dan klik Berikutnya.

    Dialog Impor Paket UI
    Dialog sistem keychain
  7. Tunggu file didownload. Jika berhasil didownload, pratinjau komponen akan ditampilkan. Klik Create.

    Pratinjau komponen

    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:

    Folder paket UI dalam tampilan Android
    • 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 Tombol Buat Project untuk mem-build project Anda.

    Tombol Buat Project di toolbar
  2. Untuk melihat hasil build, klik tab Build.

    Tab Build di bagian bawah Android Studio
  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:

    Kode yang dihasilkan dalam tampilan Android
    • 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.

    Pratinjau komponen

    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.

    Tombol Run di toolbar

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

    Pratinjau aplikasi di emulator

    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.