> ## 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 Daftar Menu

Langkah terakhir dari latihan menggambar Wireframe ini yaitu membuat daftar menu di bawah filter kategori. Berikut ini adalah langkah-langkahnya:

1. Kita mulai dengan membuat teks sub judul seperti ini:\
   [![20210816165545a04eabd22a4455523c23c8ad903aa84e.jpeg](https://d17ivq9b7rppb3.cloudfront.net/original/academy/20210816165545a04eabd22a4455523c23c8ad903aa84e.jpeg)](# "20210816165545a04eabd22a4455523c23c8ad903aa84e.jpeg")

2. Selanjutnya untuk membuat daftar menu, copy paste elemen **Image** dari menu pencarian ke frame utama. Kemudian supaya tinggi elemen ikut berubah ketika lebarnya diubah, Anda bisa mengaktifkan ikon **Constrain proportions** berbentuk rantai seperti ini:\
   [![2021081616592200cfe8c612d6840ddefc3f4fdbd7e0a1.gif](https://d17ivq9b7rppb3.cloudfront.net/original/academy/2021081616592200cfe8c612d6840ddefc3f4fdbd7e0a1.gif)](# "2021081616592200cfe8c612d6840ddefc3f4fdbd7e0a1.gif")

3. Kemudian buat **2 Rectangle (R)** dengan lebar yang berbeda untuk merepresentasikan nama menu dan harga. Gabungkan juga dalam sebuah grup **(Ctrl+G)** dengan nama **Grid Item**, seperti berikut.\
   [![2021081616554424b4d5b2cb6f79693ecc68f207ebddea.jpeg](https://d17ivq9b7rppb3.cloudfront.net/original/academy/2021081616554424b4d5b2cb6f79693ecc68f207ebddea.jpeg)](# "2021081616554424b4d5b2cb6f79693ecc68f207ebddea.jpeg")

4. Selanjutnya duplikasi menjadi 4 bagian dan sesuaikan ukuran sesuai dengan lebar aplikasi:\
   [![2021081616554527d47397c70da31d44b377fe2a069744.jpeg](https://d17ivq9b7rppb3.cloudfront.net/original/academy/2021081616554527d47397c70da31d44b377fe2a069744.jpeg)](# "2021081616554527d47397c70da31d44b377fe2a069744.jpeg")

5. Mantap! Anda telah menyelesaikan seluruh latihan, berikut adalah hasil akhir dari latihan kali ini.\
   [![20210816170204eeb941b1bd18729c3e71ecac9346c319.jpeg](https://d17ivq9b7rppb3.cloudfront.net/original/academy/20210816170204eeb941b1bd18729c3e71ecac9346c319.jpeg)](# "20210816170204eeb941b1bd18729c3e71ecac9346c319.jpeg")