Apa itu Colors Variable Di Figma? Apakah Sama Dengan Color Style?

Syafaat Adi
TLabCircle
Published in
3 min readDec 28, 2023

Dalam membuat UI design di figma tentu saja kita akan menggunakan warna, dengan hadirnya update dari figma sekarang penggunaan warna bisa dikembangkan lagi. Sebelumnya kita telah mengenal color style yang bisa kita gunakan kembali saat pengaplikasian warna sehingga kita tidak perlu repot memasukkan atau memilih warna dari awal, cukup perlu pilih style yang sudah dibuat. Pada tulisan kali ini akan cenderung membahas tentang Color Variable.

Photo by Ann H from Pexels: https://www.pexels.com/photo/yellow-and-and-blue-colored-pencils-1762851/

Color Variable hanya dapat menampung nilai warna tunggal (solid color).

Color Style dapat menampung nilai warna tunggal dan ganda (solid color, gradient color, gambar, GIF, video, dan warna yang dicampur).

Terlihat sekilas memang fiturnya lebih powerfull color style, tetapi patut kita garis bawahi bahwa jika digali lebih dalam masing-masing memiliki kelebihan masing-masing.

Ketika membuat variable colors maka akan bisa diberikan warna di setiap modenya tanpa harus mengubah warna satu persatu.

light mode vs dark mode

Berikut perbedaan hasil dari membuat color variable dibandingkan dengan text style,

Source: figma

Kalian perlu membuat beberapa warna untuk membedakan yang akan digunakan untuk light mode dan dark mode pada variable color seperti berikut,

Setelah itu kalian tinggal copy design yang ada dan bisa diubah dengan cara klik atau seleksi frame tersebut dan klik variable pada bagian sebelah kanan dengan section layer,

Setelah itu akan muncul pilihan dan bisa dipilih ingin mengaplikasikan mode yang mana, jika dari contoh diatas jika diubah menjadi dark mode akan seperti berikut ini,

Jadi dari cara yang digunakan menggunakan variable colors maka akan mempermudah dalam mengganti warna secara bersamaan tanpa harus satu persatu karena telah dibuat variabelnya. Walaupun terlihat praktis tetapi cara ini masih terbatas untuk proses warna pemilihan menggunakan gradien karena variable hanya memiliki warna tunggal. Secara implementasipun color style dan color variable memiliki keunggulan dan tujuan yang berbeda.

Jadi dari 2 cara ini bisa kalian sesuaiakan dengan kebutuhan design kalian supaya penggunaanya bisa maksimal.

--

--

Syafaat Adi
TLabCircle

Hi, Please enjoy the Cake of Design. Berbagi cerita dan tips UI/UX Design.