> ## Documentation Index
> Fetch the complete documentation index at: https://v1-learn.neoartd.my.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Latihan Membuat Menu Pencarian

Langkah kedua dari latihan menggambar Wireframe ini yaitu membuat kolom pencarian di atas banner. Berikut ini adalah langkah-langkahnya:

1. Buatlah sebuah **Rectangle (R)** di atas banner seperti ini:\
   [![20210816144457d4207f45629908d099d7a363c741e429.jpeg](https://d17ivq9b7rppb3.cloudfront.net/original/academy/20210816144457d4207f45629908d099d7a363c741e429.jpeg)](# "20210816144457d4207f45629908d099d7a363c741e429.jpeg")\
   Kemudian atur warnanya menjadi **Putih (FFFFFF)** dengan mengganti property yang ada pada bagian **Fill**.\
   [![20210816144507b07ee52668d3a11c91303953eca0412c.jpeg](https://d17ivq9b7rppb3.cloudfront.net/original/academy/20210816144507b07ee52668d3a11c91303953eca0412c.jpeg)](# "20210816144507b07ee52668d3a11c91303953eca0412c.jpeg")

2. Anda juga dapat mengatur seberapa melengkung sudut suatu elemen dengan mengatur **radius** seperti berikut:\
   [![20210816144701c4fa9e71ba573ce9bc596d6248b557ed.gif](https://d17ivq9b7rppb3.cloudfront.net/original/academy/20210816144701c4fa9e71ba573ce9bc596d6248b557ed.gif)](# "20210816144701c4fa9e71ba573ce9bc596d6248b557ed.gif")

3. Kemudian untuk membuat representasi ikon pencarian, lakukan Copy Paste elemen Image yang sudah dibuat sebelumnya. Tentu Anda sudah mahir dengan cara ini, kan? Cukup **Ctrl + C** untuk **Copy** dan **Ctrl + V** untuk **Paste**. Perhatikan pada panel sebelah kiri ketika sebuah elemen sudah tersalin. Namun, perlu diperhatikan bahwa lokasi salinan biasanya sama dengan lokasi asalnya. Jadi untuk mengeceknya, pindahkan lokasinya seperti berikut:\
   [![20210816144831f53f5cb7c7228b05d9dce8cd11ddec62.gif](https://d17ivq9b7rppb3.cloudfront.net/original/academy/20210816144831f53f5cb7c7228b05d9dce8cd11ddec62.gif)](# "20210816144831f53f5cb7c7228b05d9dce8cd11ddec62.gif")

4. Namun, jika diperhatikan posisi gambar masih ada di sebelah bawah menu pencarian. Untuk memindahkannya ke atas, cukup **klik kanan** dan pilih **Bring to front** atau menggunakan shortcut **Ctrl+Shift+]**.\
   [![202108161452351b1ddabe125f183ef9a7afc599452dd6.gif](https://d17ivq9b7rppb3.cloudfront.net/original/academy/202108161452351b1ddabe125f183ef9a7afc599452dd6.gif)](# "202108161452351b1ddabe125f183ef9a7afc599452dd6.gif")\
   Sebenarnya ada empat mekanisme untuk memindahkan posisi, yaitu:
   * **Bring forward / Ctrl+]** : Memindahkan satu posisi ke atas.
   * **Bring to front / Ctrl+Shift+]** : Memindahkan posisi ke paling atas.
   * **Send backward / Ctrl+\[** : Memindahkan satu posisi ke bawah.
   * **Send to back / Ctrl+Shift+\[** : Memindahkan posisi ke paling bawah.

5. Kemudian ubah ukuran gambar menjadi 30x30 dan letakkan di bagian kiri kolom pencarian seperti ini:\
   [![202108161454104ac554e999c65a5942a0bc11dbca105a.jpeg](https://d17ivq9b7rppb3.cloudfront.net/original/academy/202108161454104ac554e999c65a5942a0bc11dbca105a.jpeg)](# "202108161454104ac554e999c65a5942a0bc11dbca105a.jpeg")\
   Supaya lokasi gambar tepat di tengah kolom, manfaatkan fitur *alignment* pada Figma. Caranya **pilih kedua elemen dengan menggunakan Shift** dan pilih ikon **Align vertical centers** pada property seperti ini:\
   [![202108161455038ee191f6e88861655fc4dccb8d96d330.gif](https://d17ivq9b7rppb3.cloudfront.net/original/academy/202108161455038ee191f6e88861655fc4dccb8d96d330.gif)](# "202108161455038ee191f6e88861655fc4dccb8d96d330.gif")\
   Untuk beberapa pilihan *alignment* yang lain adalah:
   * **Align left (Alt+A)** : Rata kiri
   * **Align horizontal centers (Alt+H)** : Rata tengah secara horizontal
   * **Align right (Alt+D)**  : Rata kanan
   * **Align top (Alt+W)** : Rata atas
   * **Align vertical centers (Alt+V)** : Rata tengah secara vertikal
   * **Align bottom (Alt+S)** : Rata bawah

Hore! Dengan memanfaatkan alignment tersebut, desain kolom pencarian Anda menjadi lebih rapi seperti berikut:\
[![20210816145525b32290d07073174f4797f97bd061a38f.jpeg](https://d17ivq9b7rppb3.cloudfront.net/original/academy/20210816145525b32290d07073174f4797f97bd061a38f.jpeg)](# "20210816145525b32290d07073174f4797f97bd061a38f.jpeg")