Kode Warna Figma: Pengertian, Fungsi, Sistem, & Cara Pakai

Siti Khadijah Azzukhruf Firdausi

•

14 February 2024

•

Dalam desain UI/UX, warna memiliki fungsi untuk menambah nilai estetika dan menyampaikan pesan pada pengguna. Oleh sebab itu, memahami kode warna Figma adalah hal penting dalam proses desain UI/UX.

Dengan begitu, UI/UX designer bisa menerapkan warna secara akurat dan konsisten ke dalam proyek mereka. Untuk mempelajarinya, simak artikel ini sampai habis ya!

Apa itu Kode Warna Figma?

Kode warna Figma adalah sistem yang digunakan untuk menentukan dan menerapkan warna spesifik dalam desain UI/IX. Figma memungkinkan desainer untuk menggunakan kode warna dalam menciptakan dan mengelola palet yang digunakan di proyek.

Fungsi Kode Warna Figma

Dalam Figma, fungsi kode warna cukup penting bagi UI/UX designer. Adapun beberapa fungsi utamanya adalah:

Menentukan Warna: Dengan kode, desainer bisa menentukan warna yang spesifik untuk digunakan dalam elemen desain.
Konsistensi Warna: Dengan kode, desainer bisa memastikan konsistensi warna di seluruh proyek desain.

Sistem Kode Warna Figma

Seperti yang dijelaskan sebelumnya, kode warna Figma memungkinkan desainer untuk menggunakan warna secara konsisten. Berikut adalah beberapa sistem kode warna Figma yang paling sering digunakan:

1. Hexadecimal (Hex)

Kode warna Figma pertama adalah Hexadecimal (Hex) yang memiliki format #RRGGBB. Sistem kode warna ini menggunakan kombinasi enam huruf dan/atau angka setelah tanda pagar (#).

Dalam sistem hex, RR (red), GG (green), dan BB (blue) adalah nilai dari 00 hingga FF dalam notasi hexadecimal. Nilai tersebut mewakili intensitas warna merah, hijau, dan biru.

Contohnya adalah #FFFFFF untuk warna putih. Sedangkan #000000 untuk warna hitam. Lebih lanjut, hex sering digunakan dalam desain web dan aplikasi. Hal ini karena kompabilitasnya luas dan presisi dalam menentukan warna digital.

Baca Juga: Cek Perbedaan Desain UI dan UX, Lewat Hal-Hal Ini!

2. RGB (Red, Green, Blue)

Kedua, kode warna Figma adalah RGB (Red, Green, Blue) yang memiliki format rgb(r, g, b). RGB menggunakan tingga angka yang berkisar antara 0 hingga 255. Nilai tersebut mewakili intensitas warna merah, hijau, dan biru.

Contohnya adalah rgb(255, 255, 255) untuk warna putih. Lalu, rgb(0, 0, 0) untuk warna hitam. Kode ini juga sering kali digunakan dalam desain web dan aplikasi.

3. RGBA (Red, Green, Blue, Alpha)

Berikutnya, kode warna Figma adalah RGBA (Red, Green, Blue, Alpha). Kode ini memiliki format rgba(r, g, b, a). Lalu, ini juga hampir mirip dengan RGB.

Hanya saja kode ini menambahkan komponen alpha (a) yang mewakili tingkat transparansi dari 0.0 (sepenuhnya transparan) hingga 1.0 (sepenuhnya opak). Contohnya adalah rgba(255, 0, 0, 0.5) untuk merah dengan transparansi 50%.

Sama seperti kode sebelumnya, RGBA juga sering digunakan dalam desain web dan aplikasi.

4. HSL (Hue, Saturation, Lightness)

Selanjutnya, kode warna Figma adalah HSL (Hue, Saturation, Lightness). Ini memiliki format hsl(h, s%, l%).

HSL mendefinisikan warna berdasarkan hue (derajat pada roda warna dari 0 hingga 360), saturation (kejenuhan warna dari 0% hingga 100%), dan lightness (kecerahan warna dari 0% hingga 100%).

Contohnya adalah hsl(120, 100%, 50%) untuk warna hijau yang cerah. Sistem kode HSL sering digunakan untuk proses desain yang membutuhkan penyesuaian warna halus dan terkontrol.

Itu karena sistemnya memberikan lebih banyak fleksibilitas dan intuisi dalam memilih warna. Hal ini khususnya berlaku pada saat menyesuaikan kecerahan dan kejenuhan.

5. HSLA (Hue, Saturation, Lightness, Alpha)

Terakhir, kode warna Figma adalah HSLA (Hue, Saturation, Lightness, Alpha). Formatnya adalah hsla(h, s%, l%, a). Lalu, cara kerjanya juga sama HSL hanya saja ini menggunakan komponen alpha untuk transparansi.

Contoh penggunaannya adalah hsla(120, 100%, 50%, 0.3) untuk warna hijau dengan transparansi 30%.

Baca Juga: Proses Desain UI/UX: Contoh Workflow dari Riset sampai Pengujian

Cara Pakai Kode Warna Figma

Menggunakan kode bisa mempermudah pekerjaan desainer dalam menerapkan warna di elemen desain. Berikut adalah langkah-langkah untuk menggunakan kode warna di Figma:

Pilih Elemen: Klik elemen yang mau diwarnai (teks, shapes, dll).
Buka Pengaturan Warna: Klik pada properti warna di panel sebelah kanan untuk membuka pengaturan warna.
Masukkan Kode Warna (Hex): Apabila kamu pilih kode hex, maka ketikkan langsung ke dalam kotak input. Misalnya, #FFFFFF untuk putih.
Masukkan Kode Warna (RGB/RGBA): Apabila pakai kode ini, ganti tab ke RGB. Lalu, masukkan nilai Red, Green, Blue, dan Alpha (jika perlu).
Simpan Sebagai Style (Opsional): Jika ingin menggunakan warna yang sudah dipilih di masa depan, klik ‘Create Style’ untuk menyimpannya.
Terapkan Warna: Setelah kode warna dimasukkan, warna akan langsung diterapkan ke elemen yang dipilih.

Demikian penjelasan penggunaan kode warna Figma yang mencakup pengertian hingga cara pakainya. Dari penjelasan di atas, dapat dilihat bahwa sistem kode warna ternyata bukanlah hal yang sederhana.

Untuk memilih warna yang sesuai, dibutuhkan pemahaman kombinasi tepat. Oleh karena itu, peran UI/UX designer pada tahap ini cukup krusial dan kompleks.

Meski bukanlah peran mudah, UI/UX designer adalah pekerjaan yang cukup menjanjikan. Tertarik untuk memulainya? MinDi rekomendasikanmu Bootcamp UIUX/Product Design.

Program ini cocok banget buat para career-switcher yang baru mau mulai. Kamu bakal diajari konsep dasar, alat pendukung, hingga praktik dengan real-case project. Pokoknya, kamu bakal dibimbing sampai jadi!

So, nggak usah tunggu lagi! Segera daftar dan mulai karir yang lebih baik bareng Dibimbing.id!

Training