Sebagai seorang Pengembang, saya selalu ingin belajar bagaimana merancang produk kelas dunia dari awal (sendiri). Baru-baru ini saya mempelajari cara mendesain aplikasi menggunakan alat dan proses yang tepat, terutama menggunakan alat yang sudah mapan, Figma.
Karena Figma mendukung hampir semua jenis gambar populer, dan dengan koleksi plugin yang tersedia (gratis 😁) kami dapat menarik dan melepas desain untuk aplikasi atau situs web apa pun dengan mudah.
Masalah yang paling sering saya temui adalah berurusan dengan gambar, terutama Ikon dan kebutuhan untuk mengubah warna yang berbeda berdasarkan skema desain (misalnya mode Gelap vs Terang).
Setelah mencari beberapa saat, saya menemukan utas reddit ini ( klik di sini , kredit untuk pembuatnya!) dan langsung merasa ingin mencoba trik keren yang sama pada plugin favorit saya.
Mengubah warna Ikon.
Untuk kebutuhan Ikon saya, saya cenderung menggunakan StreamLine Icons, salah satu plugin Figma yang paling banyak digunakan untuk mendapatkan bentuk yang diinginkan ke dalam desain. Anda dapat menemukan plugin di sini.
Berikut adalah bagaimana kita dapat mengubah warna ikon yang diimpor dari plugin ini.
1]. Muat Plugin dengan memilihnya dari menu Plugin.
2]. Pilih Ikon dari Plugin, misalnya Ikon Rumah.
3]. Pilih Ikon dan hapus isian "FFFFFF" dari gambar di panel desain di sebelah kanan. Ini akan menghapus ikon hingga batasnya sehingga menghapus latar belakang yang tidak diinginkan.
Hapus isi dari menu desain di sisi kanan.
Ikon tanpa latar belakang warna putih.
4]. Gambarlah sebuah persegi panjang di atas icon, pastikan persegi panjang tersebut memiliki dimensi yang sama dengan Icon tersebut, misal 48x48 seperti pada gambar di atas. Jika tidak, itu dapat disesuaikan nanti juga dari panel desain di sebelah kanan.
Pilih Rectangle dari Shape-tools pada toolbar di Top-Left.
Gambar persegi panjang di atas Ikon. Sesuaikan ukurannya agar sesuai dengan dimensi Ikon.
5]. Pilih Ikon dan Persegi Panjang dengan menekan Cmd+Klik pada setiap item pada Lapisan, atau secara manual pada bingkai dan buka Menu Klik Kanan, lalu pilih Gunakan Sebagai Masker (shift+cmd+m).
Cmd + klik pada Layers untuk memilihnya.
Menu Klik Kanan -> Gunakan sebagai topeng.
Hasil
6]. Ubah warna Rectangle di Mask untuk mencapai hasil yang diinginkan.
Ikon berwarna Merah.
Ikon berwarna Biru.
Ikon dapat memiliki warna apa saja.
Saya menemukan trik ini cukup berguna dan mudah dipelajari, dan hasil akhirnya sama menakjubkannya. Trik ini berfungsi dengan baik dengan file gambar khusus juga, saya akan mencoba menambahkan lebih banyak skenario ke dokumen ini dan terus memperbaruinya dengan lebih banyak temuan di sepanjang jalan. Jangan ragu untuk meninggalkan pemikiran atau ide Anda di komentar di bawah. Saya selalu melihat keluar untuk belajar hal-hal baru.
