Cara Membuat Fancy Bottom Navigation di Figma

Hello people with the spirit of learning 👋. Di artikel ini kita akan membuat fancy navigation dengan sangat mudah di figma🤩. oke langsung saja kita mulai, lets go🔥

Step 1: Buatlah Rectangle

Buatlah Rectangle (r) dengan ukuran 375x80

(*Weightnya harus sesuaikan dengan ukuran frame yang kita pakai)

Step 2: Buatlah Ellipse

  1. Buatlah Ellipse (e) dengan ukuran 80x80
  2. Lalu Pastikan Rata tengah dengan rectangle seperti digambar diatas.
  1. Setelah itu Duplicate Ellipse tadi,
  2. Lalu jadikan ukurannya menjadi 64x64
  3. Pastikan rata tengah dengan Ellipse sebelumnya

Step 3: Boolean Groups

  1. Seleksi Rectangle dan Ellipse yang kita duplicate tadi
  2. Lalu pergi ke menu Boolean Groups
  3. Setelah itu pilih Subtract selection

Step 4: Outline Stroke

  1. Pilih Rectangle yang sudah kita Subtract selection tadi
  2. Lalu Klik kanan
  3. Pilih Outline stroke

Step 5: Corner Radius

1. Klik 2x pada Rectangle

2. Pilih 2 Titik Anchor Point seperti di gambar

(*pastikan sudah melakukan step 4)

3. Setelah itu diberi Corner Radius 24

Step 6: Finishing

Terakhir kita tambahkan beberapa component:

  1. Tambahkan beberapa Icon
  2. Tambahkan juga corner radius di beberapa sudut

Tadaaa, Selesai deh~

Hello people with the spirit of learning! gimana? sangat mudah bukan? terima kasih telah membaca artikel ini dan selamat mencoba :)

Oiya, kalau kita mau meng convert fancy navigation ini kedalam bentuk code, kita bisa mengikuti kelas Full-Stack Laravel Flutter: E-Commerce App. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus membeli sepatu online.