Cara Membuat Efek Glass di Figma
Cara Membuat Efek Glass di Figma
Penggunaan efek glassmorphism sebenarnya sudah cukup lama digunakan dalam dunia UI/UX. Microsoft menggunakan style ini pada produk sistem operasi mereka yaitu Windows Vista pada tahun 2006. Sedangkan Apple menggunakan bahasa desain ini dengan iOS versi 7 pada tahun 2013.
Menyiapkan background
Langkah berikutnya menyiapkan sebuah background untuk meletakkan hasil desain credit card dan frame UI yang akan dibuat. Untuk membuat background, kita kali ini menggunakan frame dengan cara klik ikon seperti pada gambar kemudian pilih Frame atau bisa menggunakan tombol shortcut dengan cara tekan "f" Kemudian teman-teman bisa memilih ukuran sesuai dengan kebutuhan, namun pada tutorial ini kita menggunakan frame dengan ukuran 1920x1080.
Membuat Efek Gradasi pada Background
Langkah Selanjutnya kita akan membuat background utama memiliki efek gradasi, warna dapat ditentukan sesuai dengan kesukaan masing masing, Efek Gradasi dari 40% Sebagai warna utama dan 10% warna kedua.
Membuat Rounded Rectangle
Buatlah persegi dengan bentuk yang sesuai yang anda inginkan lalu ubah corner radiusnya sekitar 18-24, Rectangle harus memiliki invisibilitas yang rendah, disarankan 30% atau 45%, Lalu gunakan efect Background blur disekitar 20
Memberikan objek di belakang Rectangle
Buatlah objek supaya terlihat blur di belakang effect glassmorphim rectangle yang telah dibuat
Comments
Post a Comment