Menginstal Relay

Relay terdiri dari tiga bagian yang masing-masing harus diinstal secara terpisah:

  1. Plugin Relay for Figma
  2. Plugin Relay for Android Studio
  3. 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:

  1. Buka halaman plugin Relay for Figma di situs Figma.

  2. Di kanan atas halaman, klik Coba.

    Tombol Coba di halaman plugin Figma

  3. Anda mungkin menemukan dialog yang menanyakan apakah Anda ingin menggunakan plugin. Dalam dialog, pilih organisasi Anda. Dalam kasus yang jarang terjadi, organisasi Anda mungkin menonaktifkan plugin publik. Jika demikian, pilih opsi Tim eksternal.

    Opsi tim eksternal dalam dialog

    Tindakan ini akan membuka file Figma dengan menampilkan halaman informasi plugin. Klik ... dan pilih Simpan untuk memastikan Anda dapat menggunakan kembali plugin ini dengan mudah.

    Opsi simpan di halaman informasi plugin

  4. Sekarang, klik Jalankan:

    Anda dapat melihat plugin yang berjalan di kanvas Figma:

    Relay for 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:

  1. Buka Android Studio.
  2. Dari menu utama:
    • Untuk macOS, pilih Android Studio > Preferensi.
    • Untuk Windows dan Linux, pilih File > Setelan.
  3. Pilih Plugin.

  4. Pilih tab Marketplace, telusuri: “Relay for Android Studio”, lalu pilih plugin yang dipublikasikan oleh Google:

    Relay for Android Studio di marketplace

  5. Klik Instal.

  6. Setelah penginstalan selesai, klik Restart IDE.

  7. 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 Pre-Configured Project, 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:

  1. Buka Figma dan login ke Figma.
  2. Buka file browser.

  3. Klik ikon akun Anda, lalu pilih Setelan.

    Setelan di bagian ikon akun

  4. Scroll ke bawah ke bagian Token akses pribadi.

  5. Masukkan deskripsi token, misalnya, “Relay” dan ketik Kembali. Token akan dibuat. Klik Salin token ini.

    Token akses pribadi di setelan

  6. Di Android Studio, dari menu utama, pilih Alat > Setelan Relay.

    Opsi menu setelan relay di bagian Alat untuk menyiapkan token akses Figma

  7. 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 ada. Masukkan sandi, lalu klik Selalu Izinkan.

    Dialog sistem keychain

  8. 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.)

    Input Token Akses Figma

  9. Klik OK.

Mendownload dan menyiapkan project yang telah dikonfigurasi sebelumnya

Untuk mendownload dan menyiapkan project yang telah dikonfigurasi sebelumnya:

  1. Download file ZIP project.
  2. Klik dua kali pada file untuk mengekstraknya, yang akan membuat folder bernama HelloFigma. Pindahkan ke folder beranda Anda..
  3. Kembali ke Android Studio. Buka File > Buka, buka folder utama, pilih HelloFigma, lalu klik Buka.
  4. 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

Langkah berikutnya

Sekarang kita siap untuk membuat desain pertama kita menggunakan Relay.

Tutorial Dasar