Cara Membuat Menu Animation di Figma
Figma adalah salah satu alat desain yang sangat populer dan digunakan oleh banyak desainer UI/UX. Pada tutorial kali ini, kita akan belajar bagaimana membuat animasi menu yang keren di Figma. Tutorial ini dibuat sederhana agar mudah dipahami oleh pemula sekalipun. Yuk, kita mulai!
Langkah-Langkah Membuat Menu Animation di Figma
1. Membuat Dasar Menu
Buka aplikasi Figma.
Buat sebuah rectangle (persegi panjang) dengan menggunakan tool Rectangle.
Atur sudut (corner radius) agar menjadi lebih bulat untuk membuat bentuk dasar menu terlihat lebih lembut.
Ubah warna fill menjadi putih untuk latar belakang menu.
2. Membuat Efek Bentuk Unik
Tambahkan sebuah lingkaran di atas rectangle tadi dan ubah warna fill lingkaran menjadi putih.
Double-click pada lingkaran untuk memunculkan titik anchor (anchor points).
Tarik titik anchor ke atas hingga bentuk lingkaran berubah menjadi seperti tetesan air. Anda bisa menyesuaikan ukurannya sesuai selera.
3. Menambahkan Ikon Menu
Gunakan plugin bootstrap (bisa diunduh dari Figma Plugin).
Cari ikon home, QR (barcode), dan people (profil).
Letakkan ikon-ikon tersebut di atas rectangle dan atur jaraknya agar rapi.
Ubah warna ikon menjadi Hijau agar serasi dengan latar belakang
4. Mengatur Posisi dan Ukuran Ikon
Kelompokkan semua ikon menjadi satu grup dengan menekan Command+E (Mac) atau Ctrl+E (Windows).
Atur ukuran ikon agar seragam. Pastikan ikon terlihat proporsional di dalam rectangle.
5. Membuat Frame untuk Animasi
Pilih grup ikon, lalu masukkan ke dalam frame.
Duplikasi frame pertama dengan menekan Alt+Drag atau Option+Drag.
Pada frame kedua, pindahkan ikon QR ke tengah dan ubah warna fill-nya menjadi hijau.
Ulangi langkah ini untuk ikon profil pada frame ketiga, dan ubah warna fill-nya menjadi warna hijau
6. Mengatur Animasi
Pilih semua frame yang telah dibuat dan gabungkan menjadi Component Set (klik kanan > Create Component Set).
Buka tab Prototype di Figma.
Hubungkan ikon di frame pertama ke frame kedua, dan set animasi dengan pengaturan berikut:
Interaction: On Tap
Animation: Smart Animate
Easing: Gentle
Durasi: 800 ms
Ulangi langkah ini untuk frame-frame berikutnya.
7. Preview Animasi
Pindahkan component yang sudah dibuat ke halaman utama.
Klik tombol Play di pojok kanan atas untuk melihat hasil animasi Anda.
Tips Tambahan
Bingung dengan hasil yang kurang rapi?: Anda bisa menggunakan fitur Tidy Up di Figma untuk merapikan jarak antar elemen.
Ingin menambahkan elemen lain?: Coba tambahkan bayangan atau efek hover pada ikon untuk membuat desain lebih interaktif.
Simpan Proyek Anda: Jangan lupa menyimpan proyek Anda secara rutin agar tidak kehilangan progres.
Penutup
Dengan mengikuti langkah-langkah di atas, Anda sudah bisa membuat menu animasi yang menarik di Figma. Tutorial ini dirancang agar pemula sekalipun dapat mengikuti dengan mudah. Jika Anda merasa ada langkah yang kurang jelas, silakan tinggalkan komentar untuk diskusi lebih lanjut.
Semoga berhasil dan selamat mencoba!
Comments
Post a Comment