Batasan dan pemecahan masalah

Batasan terjemahan dan Figma

Jenis lapisan Figma yang didukung

Relay hanya mendukung jenis lapisan berikut:

  • Node teks
  • Node gambar (PNG, JPEG, dll.)
  • Node frame (autolayout dan non-autolayout)
  • Komponen dan varian, instance komponen
  • Node vektor

Lapisan dan fitur Figma yang tidak didukung

  • Fitur pembuatan prototipe
  • Grup mask
  • Lapisan slice

Properti Figma yang tidak didukung

Ada beberapa properti yang tidak didukung, termasuk:

  • Bayangan dalam, pemburaman lapisan, dan pemburaman latar belakang
  • Rotasi lapisan (rotasi vektor didukung)
  • Mode campuran garis atau lapisan (mode campuran isian didukung)
  • Properti teks:
    • Jarak antarparagraf
    • Inden paragraf
    • Gaya angka
    • Letterform
    • Set gaya
    • Coret dan garis bawah
    • Tinggi baris (masih berfungsi saat diterapkan ke seluruh elemen teks)
  • Properti vektor:
    • Fitur yang tidak didukung oleh format VectorDrawable Android:
      • Gambar bitmap tersemat
        • Kecuali untuk persegi panjang, yang didukung sebagai gambar, bukan vektor
      • Garis putus-putus
      • Buram
      • Bayangan
      • Pola
      • Mask
      • Opasitas grup
      • Titik fokus gradien radial
    • Fitur yang tidak didukung oleh format SVG:
      • Gradien angular
      • Gradien diamond
    • Operasi Boolean di antara objek vektor (penyatuan/pengurangan/simpangan /pemotongan)
      • Solusinya adalah menggabungkan dan meratakan menjadi satu vektor

Properti dan lapisan Figma yang didukung sebagian

  • Pemotongan teks (elipsis) berfungsi paling andal jika item teks hanya satu baris
  • Warna pengisi:
    • Gambar hanya dapat memiliki satu isian gambar, tetapi dapat memiliki isian tambahan dari jenis lain (misalnya, gradien)
    • Untuk gradien, hanya linear yang didukung. Rilis mendatang akan menyediakan dukungan tambahan untuk jenis gradien yang tersisa (radial, diamond, dan angular).
    • Di plugin Figma, tidak ada cara untuk menentukan bahwa parameter dapat menerima beberapa isian. Jika Anda ingin membuat parameter warna pengisi, hanya warna solid yang saat ini didukung untuk parameter
  • Drop shadow:
    • Drop shadow saat ini tidak berfungsi pada lapisan berikut:
      • Vektor non-persegi panjang
      • Vektor persegi panjang yang dirotasi
    • Beberapa drop shadow per lapisan tidak didukung.
    • Mode campuran drop shadow selain “Normal” hanya tersedia di Android versi 10+ (diabaikan jika tidak).
    • Drop shadow di lapisan hanya tersedia di Android versi 9+, kecuali teks, yang tersedia di semua versi Android yang didukung oleh Compose.
    • Bayangan akan selalu ditampilkan di belakang lapisan transparan dalam Compose.
  • Pemosisian mutlak dalam Tata Letak Otomatis:
    • Objek yang diposisikan secara mutlak harus berada di belakang atau di depan semua elemen tata letak otomatis dalam frame. Setiap objek yang diposisikan dengan mutlak di antara elemen tata letak otomatis akan didorong ke depan objek-objek tersebut.
    • Frame tata letak otomatis dengan objek yang secara mutlak diposisikan di dalam frame tata letak otomatis lainnya dapat menyebabkan tata letak yang salah karena kotak pembatas frame bertingkat memengaruhi item yang diposisikan dalam frame tersebut.

Beberapa gaya akan dihapus jika diteruskan ke parameter teks dengan satu gaya

Jika komponen induk mencoba meneruskan teks dengan beberapa gaya ke parameter teks komponen bertingkat dengan hanya satu gaya, beberapa gaya akan hilang dalam kode Compose yang dihasilkan. Hanya gaya asli parameter teks yang dipertahankan.

Penurunan ini diperlukan untuk menghindari ketidakcocokan jenis yang mencegah kompilasi kode yang dihasilkan. Jika teks dalam komponen memiliki beberapa gaya, composable yang dihasilkan akan memiliki parameter AnnotatedText. Jika teks dalam komponen hanya memiliki satu gaya, composable yang dihasilkan akan memiliki parameter String biasa. Dalam skenario di atas, kita perlu mengonversi rich text komponen induk dari AnnotatedText menjadi String, menghapus beberapa gaya, sehingga dapat diteruskan ke instance komponen bertingkat.

Komponen bertingkat dengan properti varian yang sama seperti komponen induk gagal dikompilasi

Jika dua komponen memiliki [design-variant]{:.external} dengan nama properti yang sama, dan satu komponen memuat yang lainnya, maka dalam kode yang dihasilkan, enum yang dibuat untuk kedua varian tersebut akan memiliki nama yang sama, dan akan terjadi error kompilasi:

Conflicting import, imported name '(variant property)' is ambiguous

Untuk mengatasi hal ini, ubah nama properti varian dari salah satu komponen.

Dukungan font

Saat ini kami hanya mendukung font dari Google Fonts.

Pemecahan masalah Android Studio

Saya menerima error tentang mengonversi resource SVG di Windows

FAILURE: Build failed with an exception.
*   What went wrong:
Execution failed for task ':app:generateDebugRelayCode'.
> A failure occurred while executing com.google.relay.gradle.GenerateCode$GenerateCodeWorkAction
      > Converting SVG files: Exception Converting SVG resources for my_packaged_component
        The syntax of the command is incorrect

Nama project Android Studio Anda mungkin terlalu panjang. Di Windows, jalur lengkap dari project Android Studio tidak boleh lebih dari 70 karakter. Kami sedang berupaya untuk menambah durasinya dalam rilis mendatang.

Update tidak diimpor ke Android Studio

Plugin hanya akan mengambil versi file Figma terbaru yang diberi nama. Periksa kembali bahwa Anda telah membuat versi file Figma baru yang diberi nama dengan perubahan tersebut.

Saya menerima error tentang SVG dan Java Runtime saat mem-build

Converting SVG Files: Exception running shell command 'cd /path-to/relay/bin; path/to/relay/bin/vd-tool -c -in path/to/hello_card -out /var/folders/...'.
The operation couldn't be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.

Instal Java Runtime, lalu build kembali.

Saya menerima error tentang font saat mem-build

Anda mungkin melihat error yang serupa dengan:

FAILURE: Build failed with an exception.
*   What went wrong:
Execution failed for task ':app:generateDebugRelayCode'.
> Multiple task action failures occurred:
   > A failure occurred while executing com.google.relay.gradle.GenerateCode$GenerateCodeWorkAction
      > /Users/me/AndroidStudioProjects/MyProject/app/build/generated/res/relay/debug/font/relay_inter_bold.ttf
   > A failure occurred while executing com.google.relay.gradle.GenerateCode$GenerateCodeWorkAction
      > /Users/me/AndroidStudioProjects/MyProject/app/build/generated/res/relay/debug/font/relay_inter_bold.ttf

Hal ini disebabkan oleh kondisi race: beberapa komponen mencoba menyalin font yang sama ke direktori yang sama. Kami sedang berupaya memperbaiki masalah ini. Sementara itu, cobalah mem-build lagi.

Di Android Studio, mengurungkan folder Paket UI yang dihapus mungkin gagal

Jika Anda menghapus folder Paket UI dalam folder ui-packages di Android Studio, lalu mengurungkan penghapusan, file apa pun dalam folder tersebut yang belum dibuka sebelum penghapusan mungkin tidak dipulihkan dengan benar.

Solusi: Impor ulang versi file Figma yang Anda perlukan menggunakan File > Baru > Impor Paket UI… Anda juga dapat mengklik setiap file dalam folder Paket UI saat mengimpor, untuk memastikan file dipulihkan dengan benar.

Mengupdate resource di luar paket UI tidak akan memaksa dibuatnya build baru

Mengupdate dependensi yang berada di luar direktori ui-packages (seperti file pemetaan tema atau file komponen referensi) tidak akan memaksa kode dibuat saat Anda mem-build project.

Solusi: Untuk memaksa update ke kode yang dihasilkan, bersihkan project (buka Build > Bersihkan Project) atau hapus folder kode yang dihasilkan, yang terkait dengan Paket UI yang perlu diupdate. Kemudian, build lagi.

Kode atau folder ui-packages yang dihasilkan tidak ada di browser project Android

Di beberapa kasus, folder yang dihasilkan oleh plugin Relay for Android Studio tidak muncul di browser project Android.

Solusi: Untuk memuat ulang folder project, klik kanan folder tingkat atas dan pilih "Reload from Disk."

Tema aplikasi untuk komponen turunan tidak diupdate

Saat komponen induk diimpor ulang dengan tema aplikasi baru, komponen turunannya (tercantum di DEPS.txt) tidak akan mengambil tema baru.

Solusi: Salin tema pratinjau dari komponen induk config.json, dan mengganti komponen turunan pratinjau tema dengan masing-masing config.json masing-masing. Setelah Anda membangun ulang, tema di komponen turunan kode yang dihasilkan akan diperbaiki.

Nama Paket UI harus diawali dengan huruf

Jika nama Paket UI tidak diawali dengan huruf, Relay akan menghasilkan kode Compose yang tidak dikompilasi, dengan pesan error yang bertuliskan The resource name must start with a letter.

Solusi: Di Figma, ganti nama Paket UI sehingga dimulai dengan huruf.

Padding font di Compose tidak cocok dengan Figma

Figma dan Compose menata teks dalam kotak pembatasnya secara berbeda. Compose menambahkan lebih banyak padding di bagian atas kotak pembatas.

Solusi: Anda harus memindahkan lokasi teks di Figma ke atas beberapa piksel agar terlihat benar di Compose. Kami sedang berusaha melakukan perbaikan permanen.