Kapan Harus Menggunakan Variable pada Desain Kita di Figma?

Pengalaman betapa mengasyikannya mendesain UI/UX menggunakan Variable

3 min readNov 16, 2023

Kapan Harus Menggunakan Variable pada Desain Kita di Figma?

Hallo semuanya, kali ini Aku bakal membagi sebuah alasan kenapa kita harus menggunakan variable pada desain kita di figma.

Bagi Kalian yang menggunakan Figma untuk membuat UI/UX Design pasti sudah mengenal fitur variable. Variabel dalam Figma berfungsi untuk menyimpan nilai yang dapat digunakan ulang dan diterapkan pada berbagai jenis properti desain dan tindakan prototyping. Variable akan membantu menghemat waktu dan usaha saat membangun desain, mengelola sistem desain, dan membuat alur prototyping yang kompleks.

Pada tulisan ini Saya akan membahas mengenai betapa serunya menggunakan variable saat membuat ui/ux design di figma. Banyak hal yang dapat memudahkan kamu nantinya dalam melakukan proses pembuatan design. Namun, jika Kalian belum pernah menggunakan fitur variable alangkah lebih baiknya mempelajari mengenai fitur-fitur yang ada pada variable atau Kamu dapat membaca pada Artikel Saya sebelumnya di Cara Membuat Responsive Design dengan Varibale.

1. Gunakan Variable saat kalian akan membuat sebuah Design System

Dengan variable kalian dapat menentukan nilai yang dapat digunakan ulang dan diterapkan. Selain itu kalian dapat melaukan maintenace dan update Design system kalian dengan sangat mudah. Untuk versi sekarang variable hanya dapat menentukan nilai seperti warna, angka, huruf, dan boolean.

2. Gunakan variable saat kalian akan membuat design yang terdapat tema dark mode

Jika kalian membuat sebuah design yang terdapat tema dark mode, maka variable sangat lah cocok untuk kalian gunakan, dikarenakan dengan menggunakan variable kalian akan menghemat waktu untuk mengerjakan dan mengganti warna menjadi lebih dark/gelap, menggunakan mode variable yang dapat kalian tambahkan.

3. Gunakan variable saat kalian ingin membuat responsive design dengan efisien dan mudah

Dengan hadirnya variable di Figma, membuat responsive design sekarang menjadi lebih efisien dan mudah. Variable dapat membantu kalian membuat 3 jenis mode untuk diaplikasi pada layar dekstop, tablet, dan mobile sesuai dengan ukuran yang akan kalian gunakan pada design nantinya.

4. Gunakan variable saat kalian akan membuat design multilanguage

Jika design yang kalian buat terdapat beberapa bahasa yang berbeda, variable dapat menampung dan membantu kalian dalam menyimpan bahasa yang akan kalian gunakan pada design nantinya.

5. Gunakan variable saat kalian ingin menggunakan advanced prototype

Selain kehadiran fitur variable, figma juga memiliki fitur advance prototype yang, membantu kalian dalam membuat prototype menjadi lebih efisien dan mudah. Advance prototype dapat dikombinasikan dengan sempurna dengan variable, seperti pembuatan keyboard, kalkulator, prototype aktif dan tidak aktif.

Feedback

Setelah mencoba dan melakukan eksperiment dengan fitur variable ini, sejauh ini fiturnya sangat mudah digunakan dan sangat berguna sekali untuk membantu kita dalam membuat sebuah design system dan design tokens, karena sangat dinamis dan bisa kita edit sesuai dengan style design yang akan kita buat. Apalagi dengan penggunaan varibale pembuatan responsive design menjadi lebih mudah hehe.

Kekurangannya adalah untuk dapat menambahkan mode pada varibale kita diharuskan mengupgrade figma kita menjadi pro, karena hanya pro yang dapat mengakses fitur mode dengan limitasi pembuatan sebnayak 4 mode. Namun jika kalian masih mahasiswa, gunakan lah email student kalian untuk mendapatkan fitur pro.

Kekurangan lainnya yaitu, variable masih terbatas, hanya 4 fitur saja yang bisa kita bikin mejadi varibale, hal yang paling ditunggu adalah variable untuk image dan typeface yang nantinya akan sangat berguna untuk pembuatan responsive design menjadi lebih baik lagi.

Kesimpulan

Menurut Saya mulailah kalian mempelajari dan menggunakan variable dalam kerja dan project freelance kalian, karena dengan penggunaan variable ini nantinya kalian akan termudahkan dan menghemat waktu dalam pembuatan desain, yang bertujuan untuk fokus mencari tahu apa kebutuhan user dari pada berlama-lama dalam melakukan pembuatan UI Design.

Itu saja tutorial pada kali ini, pada pembahasan selanjutnya Aku sedang menulis mengenai belajar memahami flexbox dengan mudah melalui figma.