Di Figma, varian digunakan untuk mengelompokkan berbagai variasi komponen yang sama bersama-sama, seperti keadaan atau ukuran yang berbeda. Relai mempertahankan varian komponen ketika diterjemahkan ke dalam kode. Di bagian ini, kita akan melihat bagaimana Relay menangani varian dalam desain.
Titik awal
Kita akan mulai dengan file Figma yang berisi komponen Kartu Berita dengan tiga varian:
- hero-item adalah untuk artikel berita terpenting
- article-item adalah untuk artikel standar
- audio-item adalah untuk artikel yang Anda dengarkan, bukan 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.
Di Figma, buka file browser. Di sisi kiri, arahkan kursor ke Draf. Ikon + akan muncul — klik ikon +, lalu Import. Pilih file HelloNews.fig yang baru saja Anda download. Ini dapat memerlukan mulai dari 10 detik hingga satu menit.
Buka file yang diimpor di Figma.
Membuat paket UI
Plugin Relay for Figma menambahkan informasi ekstra ke komponen kita, sehingga kita dapat bekerja dengan pengembang yang akan menggunakan komponen kita dalam kode mereka.
- Buka plugin Relay for Figma di file Anda (di panel menu: Plugins > Relay untuk Figma). Klik Get Started.
Pilih komponen, lalu klik Create UI Package.
Setelah memilih Paket UI, tambahkan deskripsi ke kotak ringkasan. Sebagai contoh: “Komponen kartu berita yang dimaksudkan untuk menampilkan item berita dalam suatu daftar”.
Menyimpan versi yang diberi nama
Sekarang setelah Anda membuat paket UI, siapkan komponen Anda untuk dibagikan dengan tim pengembangan.
- Buka plugin Figma Relay, jika belum terbuka.
- Klik Bagikan kepada developer.
- Dari layar Bagikan kepada developer, Anda dapat memasukkan deskripsi dan nama versi baru di bagian Simpan histori versi.
Klik Simpan.
Contoh Judul: Kartu Baru Awal
Contoh Deskripsi: Iterasi pertama item artikel berita
Download project Android Studio
Untuk bagian Android Studio dari tutorial ini, kita akan menggunakan Project Android Studio. 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 > Buka, arahkan ke rumah Anda 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 impor komponen Figma ke dalam proyek.
Kembali ke Figma, salin URL file Figma Tutorial Kartu Berita. Kami akan gunakan URL ini untuk mengimpor komponen kita. Di sudut kanan atas Figma, klik tombol Share. Di kotak dialog yang terbuka, klik Salin Link.
Beralih ke project HelloNews di Android Studio. Buka File > Baru > Impor UI Packages... dari panel menu Android Studio.
Tempel URL file Figma Anda, lalu klik Next.
- Setelah file selesai diambil (yang mungkin memerlukan waktu beberapa saat), klik Selesai.
Klik untuk membangun proyek Anda. Mungkin perlu waktu beberapa saat.
Lihat 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 cerita audio.Buka
app/java (generated)/com/example/hellonews/newscard/NewsCard.kt
. Ini adalah kode Jetpack Compose yang dihasilkan untuk komponen Figma. Dari kita dapat melihat bahwa tiga varian komponen NewsCard memiliki diterjemahkan dari Figma ke kode. Mari kita pelajari kodenya lebih lanjut.Enum
View
memungkinkan kita memilih varian yang akan digunakan untuk komponen ini. Nama enum dan nilainya berasal dari varian komponen Figma. Ini digunakan dalam parameterview
di NewsCard kami composable.Composable NewsCard dibuat dari paket UI. Alat ini mencakup parameter jenis
View
, yang menetapkan varian kartu berita ke buat 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 menggunakan NewsCard. Komponennya tidak tahu bagaimana untuk menampilkan berita yang berbeda, hanya saja yang sama di-hardcode di Figma. Jadi, jika kami menambahkan komponen tersebut sekarang, yang akan kami dapatkan hanyalah berita yang sama berulang. Kami memerlukan cara untuk menentukan bagian NewsCard mana 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