Membagikan Paket UI

Jika sudah siap untuk membagikan Paket UI dengan developer, Anda memiliki beberapa opsi:

  1. Membagikan seluruh file: Developer dapat mengimpor semua Paket UI dalam file Figma.
  2. Membagikan halaman tertentu: Developer dapat mengimpor semua Paket UI di halaman Figma.
  3. Membagikan paket tertentu: Developer hanya dapat mengimpor satu Paket UI.
  4. Membagikan versi Figma tertentu untuk setiap opsi di atas.

Prosedurnya sama untuk masing-masing opsi: Klik kanan target di Figma dan pilih Copy link.

Opsi salin link di histori versi

Setelah membagikan link ini kepada developer, mereka memiliki opsi untuk memilih Paket UI yang akan diimpor ke project Android Studio. Untuk mengetahui detail selengkapnya, lihat Alur kerja Android Studio.

Kolom Impor Paket UI dalam dialog impor

Praktik terbaik

Membuat versi yang diberi nama sebelum dibagikan

Membuat versi yang diberi nama akan membuat definisi Paket UI tetap stabil dan menghindari perubahan pada file Figma yang memengaruhi komponen produksi.

  1. Tambahkan versi baru file Figma Anda yang diberi nama. Di menu Figma, pilih File > Save to Version History.

  2. Masukkan judul dan deskripsi untuk versi baru Anda.

    Menyimpan ke histori versi di Figma

Tindakan ini akan menautkan project Android ke versi terbaru yang diberi nama, sehingga update dapat berjalan dengan lancar. Jika file tidak memiliki versi yang diberi nama, update di Android Studio akan selalu menarik versi terbaru yang disimpan otomatis. Namun, sebaiknya gunakan versi yang diberi nama.

Penggunaan lanjutan

Alur kerja Relay mendukung impor versi Paket UI yang berbeda dalam project yang sama, tetapi memerlukan pembuatan URL file Figma secara manual.

  1. Salin link langsung ke komponen yang ingin Anda impor. Pilih lapisan komponen, klik kanan, lalu pilih Copy/Paste as > Copy link. Contoh:

    www.figma.com/file/sample_file_id/FileName?node-id=123%3A45

  2. Pilih versi komponen yang ingin digunakan. Buka File > Show version history lalu pilih versi. Selanjutnya, salin URL versi dengan mengklik kanan dan memilih Copy link. Contoh:

    www.figma.com/file/sample_file_id/FileName?version-id=7654321&node-id=0%3A1&viewport=2425%2C1794%2C2.99

  3. Gabungkan kedua URL tersebut untuk membuat URL berversi untuk komponen. Anda dapat mengganti nilai node-id di link berversi dengan link dari link komponen, atau menyisipkan parameter version-id ke dalam link untuk komponen tersebut, selama Anda menggunakan kedua parameter di URL. Contoh:

    www.figma.com/file/sample_file_id/FileName?version-id=7654321&node-id=123%3A45