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

Popular posts from this blog