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.
- Download HelloNews.fig ke komputer Anda.
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.
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.
- Buka plugin Relay for Figma di file Anda (di panel menu: Plugins > Relay for Figma). Klik Mulai.
Pilih komponen, lalu klik Create UI Package.
Setelah memilih Paket UI, tambahkan deskripsi ke kotak ringkasan. Misalnya: "Komponen kartu berita yang ditujukan untuk menampilkan item berita untuk suatu daftar".
Menyimpan versi yang diberi nama
Sekarang setelah Anda membuat paket UI, siapkan komponen Anda untuk membagikannya dengan tim pengembangan.
- 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.
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.
- Download contoh file HelloNews.zip.
- Klik dua kali pada file untuk mengekstraknya, yang akan membuat folder bernama HelloNews. Pindahkan ke folder utama.
- Kembali ke Android Studio. Buka File > Open, buka folder utama, pilih HelloNews, lalu klik Open.
- 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.
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.
Beralih ke project HelloNews di Android Studio. Dari panel menu Android Studio, buka File > New > Import UI Packages....
Tempel URL file Figma Anda, lalu klik Next.
- Setelah file selesai mengambil (yang mungkin memerlukan waktu), klik Finish.
Klik untuk membuat project Anda. Mungkin perlu waktu sekitar satu menit.
Pratinjau aplikasi & komponen
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.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.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 parameterview
di composable NewsCard.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.
Di bagian ini, kita akan menambahkan parameter konten ke komponen NewsCard.
Direkomendasikan untuk Anda
- Catatan: teks link ditampilkan saat JavaScript nonaktif
- Parameter konten
- Scroll
- Menggunakan Compose di View