> ## 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 Banner

Langkah pertama dari latihan menggambar Wireframe ini yaitu membuat bagian yang paling atas terlebih dahulu, yaitu banner. Berikut ini adalah langkah-langkahnya:

1. Okay, mari kita mulai dengan menambahkan elemen persegi panjang ke dalam kanvas sebagai ilustrasi dari banner. Pertama, pilih **Rectangle (R)** pada **Shape Tools**.\
   [![20210816143523160e48b1ed35f035b00fadee7b106d6e.jpeg](https://d17ivq9b7rppb3.cloudfront.net/original/academy/20210816143523160e48b1ed35f035b00fadee7b106d6e.jpeg)](# "20210816143523160e48b1ed35f035b00fadee7b106d6e.jpeg")\
   Kemudian buat elemen sesuai dengan ukuran yang diinginkan. Anda juga dapat melakukan *drag and drop* untuk memindahkan elemen.\
   [![2021081614364254c2262b274601ff02d41247d23332ab.gif](https://d17ivq9b7rppb3.cloudfront.net/original/academy/2021081614364254c2262b274601ff02d41247d23332ab.gif)](# "2021081614364254c2262b274601ff02d41247d23332ab.gif")\
   Dalam aplikasi Figma terdapat garis bantu berwarna merah yang membantu Anda untuk membuat elemen yang presisi.

2. Selanjutnya untuk membuat garis silang, Anda perlu menggunakan **Line (P)** pada Shape Tools.\
   [![20210816143714316f1b8f9afb2ca8bd83cec6e6e6f492.jpeg](https://d17ivq9b7rppb3.cloudfront.net/original/academy/20210816143714316f1b8f9afb2ca8bd83cec6e6e6f492.jpeg)](# "20210816143714316f1b8f9afb2ca8bd83cec6e6e6f492.jpeg")\
   Untuk menggunakannya cukup drag dari lokasi awal sampai lokasi akhir seperti ini:\
   [![20210816143803c62a9f664761f0eb3ec376e2559c6da4.gif](https://d17ivq9b7rppb3.cloudfront.net/original/academy/20210816143803c62a9f664761f0eb3ec376e2559c6da4.gif)](# "20210816143803c62a9f664761f0eb3ec376e2559c6da4.gif")\
   Seperti yang Anda lihat, Figma akan membantu Anda untuk meletakkan titik sehingga desain menjadi lebih rapi.

3. Kemudian kita akan mengubah warna garis tersebut menjadi abu-abu. Untuk memilih lebih dari satu elemen, tekan **Shift** sambil memilih elemen lainnya. Kemudian pada bagian **stroke**, ganti warnanya menggunakan **Hex Color** seperti **969696** atau menggunakan **color picker** seperti ini:\
   [![202108161439388dd4572d491440b66ca0ae688410de34.gif](https://d17ivq9b7rppb3.cloudfront.net/original/academy/202108161439388dd4572d491440b66ca0ae688410de34.gif)](# "202108161439388dd4572d491440b66ca0ae688410de34.gif")

4. Kemudian untuk memudahkan manajemen elemen, kita akan menggabungkan beberapa elemen menjadi sebuah grup. Caranya yaitu blok atau pilih elemen yang ingin digabungkan, kemudian **klik kanan** dan pilih **Group selection (Ctrl + G)**.\
   [![2021081614422000632126b1bf7a283b1b40f417054ebe.gif](https://d17ivq9b7rppb3.cloudfront.net/original/academy/2021081614422000632126b1bf7a283b1b40f417054ebe.gif)](# "2021081614422000632126b1bf7a283b1b40f417054ebe.gif")\
   Hasilnya dapat dilihat pada panel di sebelah kiri. Anda juga dapat mengubah namanya dengan klik dua kali supaya lebih mudah dicari ketika elemen semakin banyak nanti.\
   [![202108161442445ad2b74509ffe9b244d7a0eb914dcad9.jpeg](https://d17ivq9b7rppb3.cloudfront.net/original/academy/202108161442445ad2b74509ffe9b244d7a0eb914dcad9.jpeg)](# "202108161442445ad2b74509ffe9b244d7a0eb914dcad9.jpeg")