Relay terdiri dari tiga bagian yang masing-masing harus diinstal secara terpisah:
- Plugin Relay for Figma
- Plugin Relay for Android Studio
- Plugin Relay Gradle
Prasyarat
- Anda harus login ke Akun Figma.
- Anda telah menginstal Android Studio 2022.2.1 Flamingo atau yang lebih baru.
- Anda telah menginstal Java Runtime.
- Anda menggunakan Jetpack Compose versi 1.2 atau yang lebih baru.
- Anda menggunakan Plugin Gradle versi 8.0 atau yang lebih baru.
Menginstal plugin Relay for Figma
Plugin Relay for Figma memungkinkan siapa saja yang bekerja di Figma menganotasi desainnya dan membagikannya kepada developer yang menggunakan Android Studio dan Jetpack Compose.
Plugin Relay for Figma dipublikasikan ke marketplace plugin komunitas Figma. Untuk menginstal plugin:
- Buka halaman plugin Relay for Figma di situs Figma.
Di kanan atas halaman, klik Coba.
Anda mungkin menemukan dialog yang menanyakan apakah Anda ingin menggunakan plugin. Dalam dialog, pilih organisasi Anda. Dalam kasus yang jarang terjadi, organisasi Anda dapat menonaktifkan plugin publik. Jika demikian, pilih opsi Tim eksternal.
Tindakan ini akan membuka file Figma dengan menampilkan halaman informasi plugin. Klik ..., lalu pilih Save untuk memastikan Anda dapat menggunakan kembali plugin dengan mudah.
Sekarang, klik Jalankan:
Anda dapat melihat plugin yang berjalan di kanvas Figma:
Menginstal plugin Relay for Android Studio
Plugin Relay for Android Studio memungkinkan developer yang bekerja di Android Studio mengimpor desain yang telah dianotasi dengan informasi intent desain menggunakan plugin Relay for Figma. Plugin ini dipublikasikan ke Marketplace Plugin Android Studio. Untuk menginstal:
- Buka Android Studio.
- Dari menu utama:
- Untuk macOS, pilih Android Studio > Preferensi.
- Untuk Windows dan Linux, pilih File > Setelan.
- Pilih Plugin.
Pilih tab Marketplace, telusuri: “Relay for Android Studio”, lalu pilih plugin yang dipublikasikan oleh Google:
Klik Instal.
Setelah penginstalan selesai, klik Restart IDE.
Untuk mengonfirmasi bahwa penginstalan berhasil, buka Preferensi atau Setelan, lalu buka Plugin. Anda akan melihat Relay for Android Studio tercantum di bagian Diinstal.
Menginstal plugin Relay Gradle
Plugin Relay Gradle memastikan bahwa desain di Figma yang dianotasi dengan informasi intent desain menggunakan plugin Relay for Figma dikonversi dengan benar ke kode selama proses build.
Plugin Relay Gradle dipublikasikan ke Google Maven, server yang berisi banyak plugin Gradle. Android Studio memanggil operasi Gradle secara default, dan operasi tersebut meliputi mendownload dan menginstal dependensi apa pun yang dirujuk oleh project Anda.
Untuk memastikan bahwa Android Studio, dan dengan ekstensi Gradle itu sendiri, mendownload dan
menginstal plugin Relay Gradle, Anda harus menentukan plugin sebagai dependensi
dalam project Anda, khususnya dalam file build.gradle
di direktori
modul Anda. Ini biasanya dalam app/build.gradle
.
Di bagian atas file app/build.gradle
terdapat bagian yang mencantumkan semua
plugin yang digunakan. Tambahkan plugin Relay Gradle dalam daftar ini, dan Gradle akan menangani
download dan penginstalannya. Contoh:
plugins {
id 'com.android.application'
id 'kotlin-android'
id 'com.google.relay' version '0.3.12'
}
Selain itu, pastikan file settings.gradle
Anda memiliki bagian berikut:
pluginManagement {
repositories {
gradlePluginPortal()
google()
mavenCentral()
}
}
Anda juga dapat menggunakan Project Pra-Konfigurasi, yang menyertakan konfigurasi yang disebutkan di atas.
Menyiapkan akses Figma
Relay memerlukan token akses pribadi Figma agar dapat mendownload desain Figma dan mengubahnya menjadi kode. Jika Anda belum memilikinya:
- Buka Figma dan login ke Figma.
- Buka file browser.
Klik ikon akun Anda, lalu pilih Setelan.
Scroll ke bawah ke bagian Token akses pribadi.
Masukkan deskripsi token, misalnya, “Relay” dan ketik Kembali. Token akan dibuat. Klik Salin token ini.
Di Android Studio, dari menu utama, pilih Alat > Setelan Relay.
Jika sebelumnya Anda telah menyiapkan token akses Figma di macOS, Anda mungkin akan melihat dialog berikut. Dialog ini memberi tahu Anda bahwa Android Studio menggunakan token akses Figma Anda yang sudah ada. Masukkan sandi, lalu klik Selalu Izinkan.
Tempel token akses Figma Anda ke input Token Akses Figma. (Jika ini bukan pertama kalinya Anda menyiapkan token akses Figma, Anda mungkin akan melihat input Token Akses Figma yang Ada.)
Klik OK.
Mendownload dan menyiapkan project yang telah dikonfigurasi sebelumnya
Untuk mendownload dan menyiapkan project yang telah dikonfigurasi sebelumnya:
- Download file ZIP project.
- Klik dua kali pada file untuk mengekstraknya, yang akan membuat folder bernama HelloFigma. Pindahkan ke folder beranda Anda..
- Kembali ke Android Studio. Buka File > Buka, buka folder utama, pilih HelloFigma, lalu klik Buka.
- Saat membuka project, Android Studio mungkin akan bertanya apakah Anda memercayai project tersebut. Klik Percayai Project.
Menjalankan project yang telah dikonfigurasi sebelumnya
Menjalankan aplikasi di emulator atau perangkat. Anda akan melihat "Halo, Android!" di layar kosong.
![Status awal di emulator](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/install-relay/emulator.png?authuser=19&hl=id)
Langkah berikutnya
Sekarang kita siap untuk membuat desain pertama kita menggunakan Relay.
Direkomendasikan untuk Anda
- Catatan: teks link ditampilkan saat JavaScript nonaktif
- Menyiapkan project Android Anda
- Menguji tata letak Compose
- Ke mana status sebaiknya diangkat