Membuat UI Design Menjadi Lebih Mudah dengan Variable di Figma

Feedback dan Review setelah menggunakan Variable Figma selama satu minggu

Minggu lalu Kita sudah menyaksikan update-update baru yang sudah diumumkan oleh Figma pada acara Config 2023. Banyak fitur-fitur baru yang sangat membantu dalam hal memudahkan pembuatan desain di Figma, namun pada tulisan kali ini Saya akan membahas mengenai salah satu fitur terbaru figma yaitu Variable.

Variable Figma — Membuat UI Design

Pengenalan Variable

Sebelum Saya ceritakan pengalaman Saya menggunakan Variable, mari kita kenal lebih dahulu mengenai apa itu Variable pada Figma. 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.

Sebagai contoh, dengan Variable Kamu dapat melakukan:

1. Membuat token desain untuk efisiensi yang lebih baik dalam mengelola sistem desain
2. Mengubah bingkai antara ukuran perangkat yang berbeda dan secara otomatis memperbarui jarak sesuai dengan sistem spasial yang telah ditentukan
3. Mengkaji cara teks mengalir dalam berbagai bahasa dengan mengubah teks pada suatu bingkai
4. Membuat desain keranjang belanja yang sepenuhnya fungsional yang menghitung total pesanan berdasarkan barang apa yang ditambahkan ke keranjang
5. Membangun prototipe kuis interaktif yang menggunakan logika kondisional untuk menunjukkan apakah pengguna menjawab pertanyaan dengan benar atau salah.

Pada update per hari ini, terdapat 4 variable yang dapat kamu gunakan seperti:

1. Color
2. Number
3. String
4. Boolean

Variable Figma

Nantinya akan ada tambahan beberapa variable yang dapat kita gunakan, seperti variable image dan typface.

Pengalaman Menggunakan

Selama Saya menggunakan Variable selama 1 minggu, Saya merasa sangat terbantu dan juga menghemat waktu dalam hal pembuatan dark mode dan responsive desain. Variable membantu Saya dalam hal membuat ukuran width, height, padding, margin, gap, dan border-radius menjadi lebih konsisten dan dinamis untuk responsive design dengan cara menggunakan mode yang di sediakan oleh variable, selain itu kita juga dapat menyesuaikan dengan UI design yang ingin kita buat.

Variable Figma — Breakpoints

Selain membantu dalam hal membuat ukuran, Variable ini juga membantu dalam pembuatan warna/color, dengan menggunakan variable color kita dapat membuat sekaligus light mode dan juga dark mode dengan sangat mudah dan cepat.

Variable Figma — Color

Selain itu dengan menggunakan variable color, kamu bisa menambah rna lain selain yang sudah kamu pilih menggunakan variable color, berbeda jika kita menggunakan color style, maka kita tidak bisa manambah warna, seperti pada gambar dibawah:

Variable Figma — Penambahan Color

Text variable membantu kita dalam dinamis konten, seperti website yang menggunakan lebih dari 1 bahasa. Maka variable ini akan membantu kita dalam mengganti ke bahasa yang berbeda dengan sangat cepat dan tidak menghabiskan banyak waktu.

Selain itu, Text variable ini membantu kita dalam UX writing konten yang ada pada website. Nantinya kita dapat dengan mudah mengedit konten yang akan kita revisi.

Variable boolean membantu kita dalam menonaktifkan sebuah layer apakah akan dimunculkan atau tidak. Variable ini sangat membantu dalam hal melakukan prototyping nantinya.

Variable Figma — Text/String

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.

Mungkin segitu saja pembahasan Artikel pada kali ini, kedepannya Saya akan coba membahasa mengenai fitur-fitur terbaru yang ada di Figma 2023.

Link Website: My Personal Website

Beli Source Code: Karyakarsa

Download Assets: Download Assets

Download Template CV Figma: CV ATS Versi Lama