UI Tips: Accessible Color Palette, Membuat Kombinasi Warna dengan Figma

Selamat datang di tips figma, setelah sebelumnya kita membahas #FivePlanes dalam user experience, kali ini ada tips hack untuk membuat desain sistem warna lebih cepat dan profesional dengan palet warna. Kali ini kita akan belajar cara membuat beragam varian warna dari satu warna yang dipilih berdasarkan kecerahan (kontras warna). Nantinya, kamu akan membuat kombinasi warna yang serupa atau yang disebut accessible colors palette. Kombinasi warna ini nantinya akan membantu generate adaptive color berdasarkan warna background sehingga desain sistem warna kamu bakal lebih dinamis. Untuk tutorial kali ini, kita akan membuat palet warna menggunakan Figma.

Apa itu Accessible Colors Combination atau Variasi Adaptive Colors?

Accessible colors palette atau palet warna akses memberikan alternatif warna serupa dengan membuat variasi warna yang sama namun dengan kontras yang berbeda. Bagi kalian seorang UI/UX designer yang ingin menjual desain sistem atau UI aplikasi, ketersediaan accessible colors atau adaptive colors akan menjadi nilai jual lebih. Ada beberapa yang perlu diperhatikan dalam memilih warna sebagai konten though. Ada kriteria WCAG AA dan AAA, kamu bisa pelajari di sini.

Tujuannya, ketika nanti desainer mendesain UI, desainer tidak terlalu terbaku dengan satu warna aksen saja, sehingga apabila ada case dimana warna aksen tersebut tidak terlihat jelas karena tertutup warna background, desainer bisa menggunakan turunan warna lainnya dengan kontras warna yang lebih sesuai. Dengan ini akan tercipta harmoni dan konsistensi warna karena kita tidak perlu mengarang lagi dalam mengatur kontras warna.

Optional, Color Palette for Figma How To

Sebelumnya, saya sudah menyediakan template color palette for figma. Jika mau kamu bisa pakai ini sebagai draft latihan. Untuk penjelasan palet warnanya terbagi menjadi tiga variant.

Variant pertama, mirip seperti variant kedua, namun ada mark dengan lingkaran putih diatas, ini sebagai penanda kalau color switch versi ini digunakan untuk menyimpan salah satu warna utama aplikasi. Sedangkan yang variant kedua, itu digunakan untuk turunan dari warna utama.

Yang ketiga, digunakan untuk tipe warna gradien.

Persiapan memulai desain Figma: Install Plugin

Kita akan menginstall plugin color foundation figma, klik link ini.

Plugin ini akan otomatis menghasilkan range dan list kombinasi warna yang sesuai standar WCAG AA dan AAA lalu akan dibuat palet warna juga.
Pilih tombol install, jika plugin terinstall, maka teks tombol install akan berubah menjadi uninstall. Kemudian buat File Figma untuk membuat workspace baru. Caranya, pada halaman dashboard figma pilih new design file.

(Jika kamu terlanjur membuat design file dan belum install pluginnya, langkahnya tetap sama, buka link plugin lalu pilih install plugin, bisa pula pada menu file -> plugin -> browse plugin cari accessible colors -> install -> menuju tab workspace figma)

Tentukan Warna Utama Palet untuk Desain Sistem

Oke, langkah pertama, kamu bisa pilih warna utama untuk desainmu. Di sini, saya pakai Huemint, AI untuk generate ide warna untuk desain agar lebih cepat. Di sini, aku pilih mode web dengan 2 warna aksen,

Kalian lihat diatas ada 4 palet warna. Screenshot palet warna tersebut kemudian masukkan ke Figma. Buat vektor shape untuk menyimpan warna beserta informasi code hex dan valuenya. Kamu bisa memakai color swatch yang sudah disediakan.

Membuat Color Styles: Accessible Colors Combination

Perhatikan guide berikut ini untuk bagaimana cara memulai dan memasukkan 4 warna utama ke dalam Figma.

Inilah hasil final membuat palet warna di figma.

Selanjutnya pada tab workspace design mu, klik menu logo figma -> plugin => color foundation. Akan muncul jendela foundation: color generator

Lihat gambar diatas, untuk meng-generate kombinasi warna accessible color, cukup masukkan hex code warna dibawah label color. Kamu juga bisa mengganti nama kombinasi warna, disini saya ganti namanya menjadi orange.

Di sebelah button text palette, ada create styles, ini digunakan untuk menyimpan style warna ke dalam sistem untuk dapat digunakan diseluruh layer atau global.

Color Foundation Style yang sudah dibuat tadi dapat kamu modif / hapus tepatnya di sidebar kanan saat kamu klik background workspace figma

Berikut ini tampilan final dari desain sistem warna dengan variant palet warna

Sebenarnya, ada banyak plugin untuk membuat varian dan kombinasi warna di Figma. Misal Color Compass, cara menggunakan pluginnya untuk membuat berbagai tipe adaptive colors cukup mudah.

Setelah install color compass, pada workspace figma, pilih warna, misal di sini saya multiple klik shape warna biru sampai hanya kotak biru saja yang dipilih

Selagi shape dalam seleksi, pada menu figma -> menuju plugins -> colors compass

Di sini ada banyak kombinasi warna, berdasarkan tints, shades, saturasi, complementary, triadic, tetradic, analogous. Untuk menambahkan pilihan kombinasi warna, klik tombol plus pada salah satu kombinasi warna, misal saya ingin blend with previous color, cukup klik plus icon yang sejajar dengan teks blend with previous color.

Itulah tips figma untuk membuat desain sistem warna, kamu tinggal beri penanda misal category color 20, 50, 60, 70, 100, 200, 400 dan seterusnya. Untuk hasil contohnya bisa kamu lihat digambar dibawah ini.

Untuk penamaan angka warna pastikan semakin rendah nilai semakin cerah warnanya. Seperti nilai warna 50 di sini kontras warna semakin mendekati putih. Demikian tutorial yang wahaha, untuk tutorial user experience dan user interface lain, silahkan kunjungi link UI/UX Category.