Menangani varian desain

Di Figma, varian digunakan untuk mengelompokkan berbagai variasi komponen yang sama, seperti status atau ukuran yang berbeda. Relay mempertahankan varian komponen saat diterjemahkan ke kode. Di bagian ini, kita akan melihat cara Relay menangani varian dalam desain.

Titik awal

Kita akan mulai dengan file Figma yang berisi komponen News Card dengan tiga varian:

• hero-item adalah untuk artikel berita terpenting
• article-item ditujukan untuk artikel standar
• audio-item ditujukan untuk artikel yang dapat Anda dengarkan, bukan yang dibaca

Menyalin contoh Figma

Kita akan menggunakan file Figma yang ada sebagai contoh untuk tutorial ini. Pastikan Anda login ke akun Figma.

1. Download HelloNews.fig ke komputer Anda.

2. Di Figma, buka file browser. Di sepanjang sisi kiri, arahkan kursor ke Draf. Ikon + akan muncul — klik ikon +, lalu Import. Pilih file HelloNews.fig yang baru saja Anda download. Proses ini dapat berlangsung antara 10 detik hingga satu menit.

   

3. Buka file yang diimpor di Figma.

Membuat paket UI

Plugin Relay for Figma menambahkan informasi tambahan ke komponen, sehingga kami dapat bekerja sama dengan developer yang akan menggunakan komponen kami di kode mereka.

1. Buka plugin Relay for Figma di file Anda (di panel menu: Plugins > Relay for Figma). Klik Mulai.

2. Pilih komponen, lalu klik Create UI Package.

   

3. Setelah memilih Paket UI, tambahkan deskripsi ke kotak ringkasan. Misalnya: "Komponen kartu berita yang ditujukan untuk menampilkan item berita untuk suatu daftar".

   

   Catatan: Deskripsi ini akan diterapkan ke kode yang dihasilkan sebagai komentar di atas fungsi composable yang dihasilkan.

Menyimpan versi yang diberi nama

Sekarang setelah Anda membuat paket UI, siapkan komponen Anda untuk membagikannya dengan tim pengembangan.

1. Buka plugin Figma Relay, jika belum terbuka.
2. Klik Bagikan kepada developer.
3. Dari layar Bagikan kepada developer, Anda dapat memasukkan nama dan deskripsi versi baru di bagian Simpan histori versi.

4. Klik Simpan.

   Contoh Judul: Kartu Baru Awal

   Contoh Deskripsi: Iterasi pertama dari item artikel berita

Mendownload project Android Studio

Untuk bagian Android Studio dalam tutorial ini, kita akan menggunakan project Android Studio yang telah dikonfigurasi sebelumnya. Project ini berisi aplikasi yang menampilkan artikel berita dalam format teks biasa.

1. Download contoh file HelloNews.zip.
2. Klik dua kali pada file untuk mengekstraknya, yang akan membuat folder bernama HelloNews. Pindahkan ke folder utama.
3. Kembali ke Android Studio. Buka File > Open, buka folder utama, pilih HelloNews, lalu klik Open.
4. Saat membuka project, Android Studio akan bertanya apakah Anda memercayai project tersebut. Klik Percayai Project.

Mengimpor ke Android Studio

Mari kita impor komponen Figma ke dalam proyek.

1. Kembali ke Figma, salin URL file Figma Tutorial News Card. Kita akan menggunakan URL ini untuk mengimpor komponen. Di sudut kanan atas Figma, klik tombol Share. Di kotak dialog yang terbuka, klik Copy Link.

   

2. Beralih ke project HelloNews di Android Studio. Dari panel menu Android Studio, buka File > New > Import UI Packages....

   

3. Tempel URL file Figma Anda, lalu klik Next.

   

   Catatan: Jika Anda belum memiliki URL Figma, ulangi langkah pertama dan kembali ke dialog ini.
   Catatan: Jika Anda melihat perintah keychain, masukkan sandi Anda dan klik Allow.

   

   Catatan: Jika Anda melihat dialog tentang Token Akses Figma, ulangi petunjuk untuk menyiapkan Token Akses Figma dalam Penginstalan
   1. Setelah file selesai mengambil (yang mungkin memerlukan waktu), klik Finish.

   

4. Klik untuk membuat project Anda. Mungkin perlu waktu sekitar satu menit.

   

   Catatan: Klik tab Build di bagian bawah aplikasi untuk melihat hasil build.

Pratinjau aplikasi & komponen

1. Dalam tampilan Android, buka app/java/com/example/hellonews/ui/home/HomeScreen.kt, Anda akan melihat pratinjau aplikasi, yang menampilkan beberapa artikel berita dalam format teks biasa, dengan cerita cetak di atas artikel audio.

   

2. Buka app/java (generated)/com/example/hellonews/newscard/NewsCard.kt. Ini adalah kode Jetpack Compose yang dihasilkan untuk komponen Figma. Dari pratinjau, kita dapat melihat bahwa tiga varian komponen NewsCard telah diterjemahkan dari Figma ke kode. Mari kita pelajari kode tersebut lebih lanjut.

   

3. Enum View memungkinkan kita memilih varian mana yang akan digunakan untuk komponen ini. Nama enum dan nilainya berasal dari varian komponen Figma. Ini digunakan dalam parameter view di composable NewsCard.

   

4. Composable NewsCard dibuat dari paket UI. Ini mencakup parameter jenis View, yang menetapkan varian kartu berita untuk membuat instance.

   package com.example.myapplication.newscard
   
   import ...
   
   // Design to select for NewsCard
   enum class View {
       HeroItem,
       ArticleItem,
       AudioItem
   }
   
   /**
   * News card component intended to display news items for a list.
   *
   * This composable was generated from the UI Package 'news_card'.
   * Generated code; do not edit directly
   */
   @Composable
   fun NewsCard(
       modifier: Modifier = Modifier,
       view: View = View.HeroItem
   ) {...}
   
   

Berikutnya

Kami belum siap untuk menggunakan NewsCard. Komponen tersebut tidak tahu cara menampilkan berita yang berbeda, hanya artikel hardcode yang sama di Figma. Jadi, jika kita menambahkan komponen sekarang, kita hanya mendapatkan berita yang sama diulangi. Kita memerlukan cara untuk menentukan bagian NewsCard yang harus diisi dengan data dinamis.

Parameter Konten

Di bagian ini, kita akan menambahkan parameter konten ke komponen NewsCard.