Skip to main content
Sebelum lanjut membuat daftar menu, kita akan membuat menu bottom navigation terlebih dahulu di bagian paling bawah. Berikut ini adalah langkah-langkahnya:
  1. Untuk membuatnya buat sebuah Rectangle (R) pada bagian bawah dengan tinggi 56 seperti ini:
    20210816162924c74f56d393f3d58656f9cc9debb8216e.jpeg
    Kemudian ubah property-nya dengan mengubah warna fill menjadi putih (FFFFFF) dan menambah stroke berwarna abu-abu tua (969696) dengan menggunakan ikon tambah (+).
    20210816163411b954f6ae46002a88f8317407404cdac1.gif
  2. Untuk ikon pada menu, Anda bisa memanfaatkan elemen Image yang ada di menu pencarian ditambahkan dengan elemen Rectangle (R) kemudian buat grup dengan nama Menu Item, sehingga hasilnya akan seperti ini:
    20210816163502223e8e6c823cb6ed4639ac67b78a76bd.jpeg
  3. Sebenarnya Anda bisa menggunakan teknik duplikasi seperti yang sudah diajarkan sebelumnya, namun di sini saya akan menjelaskan salah satu fitur pada Figma untuk mengatur banyak komponen sekaligus. Cobalah untuk copy-paste elemen tersebut satu per satu hingga menjadi empat elemen. Kemudian pindahkan ke tempat lain dengan jarak yang berbeda-beda. Nah, untuk membuat semua elemen tersebut memiliki jarak yang sama, Anda dapat menggunakan fitur Tidy up (Ctrl+Alt+Shift+T).
    202108161643113a44762efce4c16528fb78ccff4bdd60.gif
    Cukup menarik, bukan?
  4. Selanjutnya rapikan ikon tersebut supaya berada di tengah menu menggunakan shortcut.
    2021081616454250b38df2b9b236f563278a9be0da7f1b.gif
    Berikut langkah-langkah dan shortcut yang dilakukan pada proses di atas:
    - Shift+Select : untuk memilih setiap elemen.
    - Ctrl+G : untuk menggabungkan elemen.
    - Alt+H : untuk membuat rata tengah horizontal.
    - Alt+V : untuk membuat rata tengah vertikal.
    Biasakan diri Anda untuk menggunakan shortcut, ya! Hal tersebut akan benar-benar membuat proses desain menjadi cepat dan efisien.
  5. Hore! Menu bottom navigation sudah jadi. Jangan lupa untuk membuatnya menjadi satu grup supaya lebih mudah dibaca. Berikut ini adalah hasil desain Anda untuk saat ini:
    202108161647188dea35d65336c5b746ab7859336fd93e.jpeg
  6. Untuk bagian yang selanjutnya mungkin lebih panjang dari frame yang sudah dibuat sebelumnya. Untungnya dengan menggunakan Frame, Anda dapat mengubah ukuran tanpa mengganggu desain yang di dalamnya seperti ini:
    2021081616481891d04b7d9ee26aac22517a188bf9972a.gif
    Hal ini dapat Anda lakukan karena Home bertipe Frame dan fitur Clip Content tercentang.
    20210816164919fee28e37c70fe37989d30d62cd1bcf81.jpeg
    Untuk mengetahui mengetahui fungsi dari Clip Content, cobalah untuk uncheck dan check kembali property tersebut.
  7. Namun, jika Anda perhatikan kembali menu bottom navigation tidak mengikuti ukuran layar, sehingga Anda harus memindahkannya secara manual. Untungnya di dalam Figma terdapat sebuah fitur bernama Constraints. Constraints digunakan untuk mengatur suatu komponen melekat pada sisi mana pada frame. Sebagai contoh, supaya menu bottom navigation melekat pada bagian bawah, Anda hanya perlu mengubah properti yang sebelumnya Top menjadi Bottom. Sehingga hasilnya menjadi seperti ini:
    20210816165045ae842931af302662214398cd45973da7.gif
    Dengan begini, Anda tidak perlu khawatir seberapa panjang daftar menu pada halaman ini.