Skip to content

Instantly share code, notes, and snippets.

@jimlyas
Last active June 14, 2022 09:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jimlyas/685473f7f4125a6f8b65dc3bed9d303b to your computer and use it in GitHub Desktop.
Save jimlyas/685473f7f4125a6f8b65dc3bed9d303b to your computer and use it in GitHub Desktop.
Figma Automation Tools

Goal

Otomatisasi proses pengerjaan desain berdasarkan referensi dari Figma menjadi layout dalam aplikasi yang bisa dijalankan dan digunakan

Reason

Mempercepat proses pengembangan aplikasi dengan menyediakan alat untuk menterjemahkan design dari figma menjadi halaman yang dapat digunakan dalam aplikasi end-user

Visualization

image

Problem

Figma merupakan tools yang platform-agnostic, dimana artinya dia digunakan tidak untuk mengenal masing-masing komponen yang akan digunakan sebagai referensi di platform dimana dia digunakan.

Tidak kenal komponen

Sehingga UI/UX Designer tidak perlu mengetahui bahwa komponen yang digambarkan di Figma akan menjadi komponen apa di platform dia akan dijalankan nanti. Karena Desain dari Figma hanya dijadikan referensi yang nantinya akan dibuat menjadi layout aplikasi oleh developer dari bidang terkait.

Contoh:

toolbar

Bagi Android Developer, melihat desain itu dia akan langsung mengetahui bahwa itu adalah Toolbar yang memiliki function dan atribut tertentu. Namun bagi Figma, itu hanya lah komponen yang harus ada nanti di aplikasinya. Jika dipaksa, Figma hanya akan mengetahui sejauh ini:

image

Dimana dia justru menggunakan komponen lain yaitu RelativeLayout yang merupakan komponen yang berbeda dan digunakan untuk kasus yang lainnya.

Disini lah pentingnya peran developer untuk mengetahui bahwa komponen apa yang bisa dan harus digunakan berdasarkan use case dan desain yang digambarkan di Figma, yang sampai saat ini tidak ada proses otomasinya

Implementasi komponen juga tentunya terlimitasi pengalaman dan pengetahuan Developer terhadap komponen apa saja yang bisa digunakan, karena itu sampai saat ini tools seperti ini belum pernah dikembangkan.

Tidak kenal implementasi komponen

Ketika kita ingin menampilkan list data, maka kita akan membuat desain figma seperti ini:

image

Dari sisi Figma, ia tidak mengetahui cara menampilkan list data pada platform Android, iOS, atau pun web. Sehingga layout yang bisa disarankan hanya sebatas ini:

image

Sedangkan di Android contohnya, proses ini menggunakan RecyclerView dan memiliki langkah-langkah tersendiri untuk mengimplementasikannya.

Salah satu hal yang dilakukan adalah membuat file XML terpisah untuk menampung layout yang akan digunakan untuk tiap item dalam list data. Pertanyaan terakhir, bagaimana caranya Figma mengetahui file yang harus dipisah? Jawabannya, Figma tidak bisa.

Limitasi dari Figma (dan juga tools design lain) ini yang akan menjadi masalah utama untuk mengembangkan automation tools-nya.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment