Skip to main content
Pada latihan ini, Anda akan memahami penggunaan grid dan padding untuk membuat desain yang rapi.
  1. Nah, kita lanjut untuk membuat kolom pencarian. Namun, supaya elemen ini terlihat rapi, gunakan Grid sebagaimana yang sudah kita pelajari pada materi Layouting. Untuk menambahkan grid pada suatu Frame, klik Frame Home → Klik Icon Tambah (+) pada properti Layout Grid → Klik icon untuk mengubah pengaturan → Ganti size (lebar) Grid menjadi 8px. Maka akan muncul Grid seperti ini:
    dos:1784184c3f0fb6e3b020c73371faa64220211005170913.jpeg
  2. Selanjutnya kita akan menerapkan prinsip layouting yang lain, yaitu White Space. Di sini Anda akan memberikan Padding dari pinggir halaman sejauh 16 px. Usahakan setiap elemen yang akan dimasukkan tidak melewati batas tersebut. Pada grid dengan lebar 8 px di atas, batasnya adalah 2 kotak (2x8=16 px). Sebagai contoh di sini kita akan menambahkan kolom pencarian menggunakan Rectangle (R) berukuran 328x32.
    dos:ff05c6bcb489cc5b8997421ec7f9500220211005170919.jpeg
    Dengan bantuan Grid ini, Anda bisa memastikan jarak elemen ke atas, kiri, dan kanan adalah presisi 16 px, bukan mengira-ngira saja. Tentu ini akan membuat desain Anda lebih rapi, kan?
  3. Lanjutkan dengan mengganti warnanya menjadi putih (FFFFFF) dan ubah radius 8px seperti berikut:
    dos:25ff871b11aa0938fb5f3b702da3851b20211005170913.jpeg
  4. Untuk menampilkan atau menyembunyikan Grid, Anda dapat mengaturnya melalui ikon mata seperti berikut atau menggunakan shortcut Ctrl+Shift+4.dos:f199aac56adef166c2153f2ce4e7988120211005170915.jpeg