Suatu hari, Anda sedang duduk bersama direktur perusahaan logistik besar. Mereka membutuhkan executive dashboard dengan visualisasi grafik peta interaktif untuk memantau distribusi barang di level nasional. Dashboard diharapkan memiliki light mode yang optimal untuk presentasi di ruang rapat yang terang, juga dark mode yang lebih nyaman bagi mata untuk penggunaan berdurasi lama. Sebagai UI/UX designer, Anda diminta untuk mempersiapkan prototype desain executive dashboard tersebut.
Untuk menjawab kebutuhan ini, fitur variables di Figma dapat menjadi solusi yang tepat. Diperkenalkan pada Figma Config 2023 dan dirilis ke publik pada Juli 2023, fitur ini memungkinkan UI/UX designer membuat color system yang fleksibel untuk light mode dan dark mode. Dengan demikian, perubahan tema warna desain dapat dilakukan dengan mudah dengan tetap menjaga konsistensi visual tanpa perlu penyesuaian detail satu per satu.
BADR Interactive berpengalaman mengerjakan beberapa project yang memanfaatkan fitur variable di Figma untuk mengelola beberapa tema warna. Berikut adalah tutorial membuat light mode dan dark mode dengan menggunakan fitur Figma variables.
Apa itu Figma Variables?
Variables adalah fitur Figma yang membantu UI/UX designer menyimpan nilai-nilai yang mewakili atribut desain, seperti kode warna, angka, teks, atau nilai Boolean. Nilai-nilai ini bisa dipakai berulang kali dan diterapkan ke semua elemen desain, bahkan pada interaksi prototype. Kemampuan fitur ini tidak hanya membuat alur kerja desain lebih terstruktur dan efisien, tetapi juga membuka jalan untuk implementasi design tokens yang lebih mudah.
Sekilas, fitur variables mungkin terlihat mirip dengan fitur styles yang terlebih dahulu populer digunakan. Jika dengan styles Anda hanya bisa menerapkan style yang seragam pada elemen desain, dengan variables Anda dapat membuat beberapa collection terpisah yang nilai-nilainya saling terhubung. Dengan begitu, Anda bisa mendefinisikan multi-level properties yang lebih kompleks dan membuka peluang untuk sistem desain yang lebih dinamis.
Kelebihan Figma Variables
1. Penjagaan Konsistensi dan Fleksibilitas Perubahan Atribut Desain
Proses standardisasi elemen desain dan update nilai atribut desain menjadi lebih sederhana hanya dengan mengubah nilai variables dan perubahan akan otomatis diterapkan ke seluruh elemen desain yang terhubung. Hal ini membantu Anda memastikan konsistensi visual di seluruh desain tanpa perlu memeriksa dan menyesuaikan setiap elemen satu per satu.
2. Fitur Mode untuk Desain Multi Tema
Untuk membuat desain yang dilengkapi pengaturan tema seperti light mode dan dark mode, Anda hanya perlu mengatur varian tema dengan menambah mode di variables. Dengan satu klik, Anda dapat menguji beberapa versi tampilan desain. Hal ini memberikan keleluasaan untuk mengeksplorasi beberapa konteks desain tanpa perlu membuat ulang elemen-elemen desain secara terpisah.
3. Peningkatan Produktivitas Desain
Perubahan nilai atribut desain bisa dilakukan lebih cepat karena Anda tidak perlu lagi mengedit setiap elemen desain secara manual. Perubahan dapat dilakukan lebih cepat secara terpusat. Hal ini menghemat banyak waktu dan meminimalkan potensi kesalahan sehingga mempercepat alur kerja secara signifikan.
Langkah Membuat Light & Dark Mode dengan Variables di Figma
1. Membuat Variable Warna di Figma
Anda perlu membuat variabel warna terlebih dahulu agar desain fleksibel untuk penyesuaian mode tema warna. Untuk dashboard dengan visualisasi data berupa peta, Anda perlu memastikan pemilihan warna yang mendukung keterbacaan data, seperti warna background peta, outline, dan teks.
1. Buat file design baru di Figma.
2. Buka fitur Variables di Figma dengan klik icon pengaturan (posisi di panel kanan). Modal pengaturan Variables akan muncul.
3. Klik Create variable dan pilih tipe Color. Collection baru akan otomatis terbuat dengan nama “Collection 1”. Ubah nama collection menjadi “Token” dengan klik icon titik tiga horizontal dan pilih menu Rename.
4. Beri nama warna yang relevan agar mudah dipahami, misalnya “background/background 1”, “chart/color 1”.
💡Sekilas Tips: Figma menggunakan karakter garis miring untuk memisahkan nama variabel dan mengelompokkannya secara otomatis. Kata apa pun sebelum ‘/’ pertama menjadi nama kelompok Variable, sedangkan kata apapun setelah ‘/’ mendefinisikan properti dalam kelompok Variable tersebut. Misal, "background/background 1" dan "background/background 2" akan otomatis masuk ke grup Variable “background”.5. Masukkan kode HEX di kolom Value, misalnya FFFFFF untuk background/background 1 dan F1F4F6 untuk background/background 2.
6. Ubah nama kolom Value menjadi “Light” dengan cara klik dua kali pada header kolom Value tersebut.
7. Tambahkan semua warna yang akan dibutuhkan dengan klik Create variable di bawah tabel di dalam modal pengaturan Variables.
2. Melakukan Setup Mode Variable Warna di Figma
Selanjutnya Anda perlu mengatur setup mode variable warna dark mode untuk desain executive dashboard. Pengaturan ini memungkinkan setiap elemen desain Anda mampu adaptif berubah warna secara otomatis sesuai mode yang dipilih nantinya.
1. Klik icon + di pojok kanan header kolom tabel untuk membuat mode baru.
2. Ubah nama kolom menjadi “Dark”.
3. Sesuaikan value setiap baris Variable di kolom dark mode. Misalnya untuk variable “background/background 1”, pada mode Light value-nya adalah FFFFFF sedangkan pada mode Dark value-nya adalah 161A1D.
3. Membuat Desain Executive Dashboard
Sekarang, saatnya Anda membuat desain executive dashboard dan menghubungkan setiap elemen dengan Variable terkait, seperti grafik peta, outline, teks, dan seterusnya. Jika elemen desain tidak diberikan warna menggunakan Variable yang sudah diatur sebelumnya, maka meskipun pilihan mode warna sudah diubah dari light mode ke dark mode, warna desain tidak akan terpengaruh.
1. Pilih komponen desain pada dashboard, misalnya salah satu wilayah di grafik peta.
2. Buka pengaturan warna Fill di panel kanan. Klik icon dan tab Libraries berisi daftar styles dan variables warna akan terbuka.
3. Pilih warna dari collection bernama Token untuk elemen wilayah di grafik peta tersebut pada mode Light, misalnya chart/color 1. Pastikan setiap elemen desain terhubung dengan warna Variable.
4. Duplicate frame desain, lalu pilih opsi “Dark” di pengaturan Appearance untuk membuat tampilannya berubah menjadi mode Dark secara otomatis.
5. Berikut adalah hasil tampilan desain dark mode dari executive dashboard.
Dengan fitur Variables di Figma, kebutuhan membuat executive dashboard dengan light mode dan dark mode bisa dikerjakan dengan mudah dan cepat dengan tetap mempertahankan konsistensi desain antar mode. Untuk membantu Anda mendapatkan gambaran lebih mendalam mengenai cara mengatur Variable untuk desain multi tema warna, kami telah menyiapkan file Figma yang bisa Anda download secara gratis dengan klik button di bawah. File berisi desain executive dashboard lengkap dengan Variabel yang bisa di-edit. Selamat mencoba!
