Menangani varian desain

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

Kartu berita dengan varian hierarki

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.

  1. Download HelloNews.fig ke komputer.

  2. 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.

  3. 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.

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

  2. Pilih komponen, lalu klik Create UI Package.

    Tombol Create UI Package pada plugin

  3. Setelah memilih Paket UI, tambahkan deskripsi ke kotak ringkasan. Sebagai contoh: “Komponen kartu berita yang dimaksudkan untuk menampilkan item berita dalam suatu daftar”.

    Kotak ringkasan pada plugin

Menyimpan versi yang diberi nama

Sekarang setelah Anda membuat paket UI, siapkan komponen Anda untuk dibagikan 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 deskripsi dan nama versi baru di bagian Simpan histori versi.

  4. 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.

  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 > Buka, arahkan ke rumah Anda 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 impor komponen Figma ke dalam proyek.

  1. 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.

    Opsi Salin Link di tab file

  2. Beralih ke project HelloNews di Android Studio. Buka File > Baru > Impor UI Packages... dari panel menu Android Studio.

    Opsi Impor Paket UI … di bawah menu File

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

    Dialog Impor Paket UI
    Dialog sistem keychain
    1. Setelah file selesai diambil (yang mungkin memerlukan waktu beberapa saat), klik Selesai.
    Pratinjau komponen

  4. Klik Tombol Buat Project untuk membangun proyek Anda. Mungkin perlu waktu beberapa saat.

    Tombol build di toolbar

Lihat 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 cerita audio.

    Pratinjau Aplikasi

  2. 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.

    Pratinjau komponen NewsCard

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

    Varian di Figma dan enum View yang sesuai

  4. 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.

Parameter Konten

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