> ## 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 Menggunakan Frame

Pada latihan ini, Anda akan mengetahui perbedaan Group dan Frame ketika ukuran komponen berubah.

1. Sebelum lanjut ke bagian filter kategori, Anda perlu menggabungkan elemen-elemen pada kolom pencarian. Jika pada latihan Wireframe kita menggabungkan elemen menggunakan fitur Group, di sini kita menggunakan Frame. Supaya mengetahui perbedaannya, ubahlah ukuran Group dan lihat apa yang terjadi.\
   [![dos:c0681d387aabeb5c6879fd973fb96bd920211006155516.gif](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:c0681d387aabeb5c6879fd973fb96bd920211006155516.gif)](# "dos:c0681d387aabeb5c6879fd973fb96bd920211006155516.gif")Seperti yang Anda lihat, ukuran ikon pencarian juga ikut membesar dan mengecil secara tidak proporsional. Nah, supaya ikon tetap proporsional, manfaatkanlah Frame.
2. Apabila sudah terlanjur menjadi Group, Anda bisa mengubahnya menjadi Frame melalui dropdown properti di panel kanan, seperti ini:\
   [![dos:0ee6d0a57a8d15676156db664a43574d20211006155547.gif](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:0ee6d0a57a8d15676156db664a43574d20211006155547.gif)](# "dos:0ee6d0a57a8d15676156db664a43574d20211006155547.gif")\
   Namun, jika belum diubah menjadi Group, Anda bisa menggabungkannya dengan memilih elemen menggunakan **Shift**. Kemudian **klik kanan** dan pilih **Frame selection (Ctrl+Alt+G)**.\
   [![dos:23c18270da1d227e97b4ba5041a332b920211006155706.gif](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:23c18270da1d227e97b4ba5041a332b920211006155706.gif)](# "dos:23c18270da1d227e97b4ba5041a332b920211006155706.gif")\
   Perbedaan elemen yang berupa Group atau Frame dapat dilihat pada ikonnya. Ikon Group berupa persegi putus-putus seperti ini:\
   [![dos:0505bfbf8fd648c501b1971cf17bfa7f20211006155325.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:0505bfbf8fd648c501b1971cf17bfa7f20211006155325.jpeg)](# "dos:0505bfbf8fd648c501b1971cf17bfa7f20211006155325.jpeg")\
   Sedangkan ikon Frame berbentuk pagar (#) seperti ini:\
   [![dos:3008d3341f0bb40ad3c3d2e1737e0e7020211006155325.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:3008d3341f0bb40ad3c3d2e1737e0e7020211006155325.jpeg)](# "dos:3008d3341f0bb40ad3c3d2e1737e0e7020211006155325.jpeg")
3. Salah satu kelebihan Frame yaitu terdapat fitur Clip Content, di mana Anda dapat menyembunyikan elemen yang tidak dibutuhkan seperti ini:\
   [![dos:cdcd06f26ad6c999046c6fa8d51cd8f820211006155929.gif](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:cdcd06f26ad6c999046c6fa8d51cd8f820211006155929.gif)](# "dos:cdcd06f26ad6c999046c6fa8d51cd8f820211006155929.gif")\
   Dapat dilihat walaupun kita mengubah ukuran Frame, elemen yang di dalamnya tidak ikut berubah.
4. Jika dilihat sekali lagi, radius pada sebelah kanan tidak terlihat. Supaya tetap terlihat, sesuaikan ukuran **Rectangle** dengan ukuran Frame. Caranya, ubah properti pada Constraint menjadi **Scale** seperti berikut:\
   [![dos:847feb05dedbf4f11db6483cedc20c5220211006160204.gif](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:847feb05dedbf4f11db6483cedc20c5220211006160204.gif)](# "dos:847feb05dedbf4f11db6483cedc20c5220211006160204.gif")

Mantap! Kolom pencarian kini sudah selesai dan dapat dimodifikasi dengan mudah. Silakan kembalikan ukuran kolom pencarian ke ukuran sebelumnya untuk menyesuaikan dengan desain Wireframe.