Tutorial Sederhana Membuat Glassmorphism UI dengan Figma

Desain Glassmorphism menjadi tren baru dalam dunia UI/UX. Desain ini umumnya mempunyai bahasa desain menarik dan umumnya menggunakan tingkat transparansi (blur effect) dan pendekatan berlapis-lapis (layered approach).

Mengenal Glassmorphism

Desain Glassmorphism adalah gaya desain yang menggunakan pendekatan kedalaman dengan transparansi yang mirip dengan efek blur kaca. Gaya desain ini memungkinkan pengguna untuk melihat latar belakang melalui elemen desain. Dalam desain Glassmorphism, elemen desain memiliki efek blur yang memberikan kesan kedalaman dan membuat elemen tersebut terlihat seperti terapung di atas latar belakang. Gaya desain ini sangat populer saat ini dan banyak digunakan dalam aplikasi dan situs web modern.

Contoh Penerapan Glassmorphism

Glassmorphism adalah efek desain yang membuat seolah-olah terdapat lapisan kaca pada suatu objek. Efek ini menjadi tren pada saat ini setelah Microsoft dengan Windowsnya dan Apple dengan MacOSnya mengaplikasikan Glassmorphism pada User Interfacenya. Glassmorphism cukup mudah dicapai untuk pengembang front-end. Ada satu properti CSS utama yang bisa kita gunakan: backdrop-filter. Properti ini memungkinkan Anda untuk menerapkan beberapa efek seperti blur, sepia, dan abu-abu ke area di belakang komponen Anda. Selain itu, yang bikin Glassmorphism semakin populer di kalangan desainer adalah pendekatan berlapis-lapis dengan objek mengambang, penggunaan warna-warna cerah yang menonjolkan transparansi yang blur serta garis batas halus dan tipis pada objek yang tembus cahaya. Contoh penerapan Glassmorphism dapat dilihat pada gambar berikut:

Tutorial Cara Membuat Glassmorphism

Figma adalah software desain grafis berbasis web yang memungkinkan pengguna untuk membuat desain UI/UX. Figma sangat populer di kalangan desainer karena memungkinkan kolaborasi tim secara real-time dan memiliki fitur yang sangat lengkap seperti prototyping dan animasi.  Apakah ada hal lain yang ingin kamu ketahui tentang Figma atau Glassmorphism? Berikut adalah tutorial sederhana membuat Glassmorphism UI dengan Figma:

1. Buka Figma dan buat dokumen baru.
2. Buat frame baru dengan ukuran 360x640px.
3. Tambahkan background berwarna biru muda (#B1E3F9).
4. Buat frame baru di dalam frame pertama dengan ukuran 300x500px.
5. Tambahkan background berwarna putih (#FFFFFF) pada frame kedua.
6. Tambahkan efek blur pada frame kedua dengan radius 50px.
7. Tambahkan konten pada frame kedua sesuai kebutuhan.

Selamat mencoba!

Kesimpulan :

Artikel ini memberikan penjelasan singkat tentang Glassmorphism, sebuah gaya desain UI/UX yang populer dan menggunakan efek blur kaca untuk menciptakan kedalaman dan lapisan pada elemen desain. Artikel ini juga memberikan contoh penerapan Glassmorphism dan tutorial sederhana untuk membuat Glassmorphism UI menggunakan Figma. Dengan tutorial ini, pembaca dapat mempelajari cara membuat efek blur pada frame desain dan menambahkan konten sesuai kebutuhan. Overall, artikel ini sangat berguna bagi desainer UI/UX dan pengembang front-end yang ingin menciptakan desain modern dan menarik dengan menggunakan gaya desain Glassmorphism.