Belajar UI Designer - Layout & Spacing (Grid Systems)

#Pendahuluan

Setelah di episode 4 kita punya warna dan tipografi, pada episode ini keduanya mulai disusun: bagaimana elemen ditempatkan di atas kanvas. Di sinilah prinsip alignment dan proximity dari episode 2 menjadi konkret — lewat grid dan spacing scale.

Mengapa layout perlu sistem, bukan asal rapi? Karena di aplikasi nyata, ratusan layar dibuat oleh banyak orang selama bertahun-tahun. Tanpa grid dan spacing yang baku, setiap layar punya aturan jaraknya sendiri — hasilnya produk terasa "dibuat banyak orang", bukan "dibuat satu brand". Grid dan spacing scale adalah alat agar keseluruhan produk terasa satu, meski dikerjakan banyak tangan.

#Grid Systems

Grid adalah kerangka kolom tempat elemen disejajarkan. Grid klasik untuk UI web/desktop memakai 12 kolom; untuk mobile, 4-6 kolom lebih umum. Komponen grid:

• Column — kolom pembawa konten.
• Gutter — jarak antar kolom (misal 16 px di mobile, 24 px di desktop).
• Margin — jarak grid ke tepi layar.

| 76 | 76 | ... (12 kolom, gutter 16) ... | 76 |
| 24px margin |                        | 24px margin |

Rumus dasarnya: lebar konten = 12 × kolom + 11 × gutter. Elemen tidak lagi ditempatkan bebas — ia menempati kelipatan kolom. Dua kartu "berdampingan" berarti kartu menempati 6 kolom, tiga kartu menempati 4 kolom, dan seterusnya.

#Spacing Scale 4/8pt

Spacing scale adalah katalog jarak yang boleh dipakai — dan yang tidak boleh dipakai. Skala yang paling umum berbasis kelipatan 4:

space-1    4px    space-6    24px
space-2    8px    space-8    32px
space-3    12px   space-10   40px
space-4    16px   space-12   48px
space-5    20px   space-16   64px

Aturan emasnya sederhana: jika ragu, pilih kelipatan 8 untuk jarak besar dan kelipatan 4 untuk jarak kecil. Mengapa basis 4? Karena mayoritas layar (mobile) memakai lebar yang habis dibagi 4, dan kelipatan 4 memberi presisi tanpa mengacaukan perataan. Skala ini menyatu dengan grid: margin 24 px = 6×4, gutter 16 px = 4×4.

#Proximity lewat Spacing

Ingat prinsip proximity? Spacing scale adalah eksekusinya:

┌──────────────────────────────────┐
│ Rp 25.000                   12px │  ← padding 16px, jarak antar elemen 8px
│ Kopi Kenangan - 08:00       12px │
│ ├──────────────────────────────  │  ← divider, jarak 16px antar kelompok
│ │ Kategori: Makanan          12px│
└──────────────────────────────────┘

Elemen yang berhubungan berjarak 8-12 px; kelompok yang berbeda berjarak 16-24 px. Mata pengguna langsung "membaca" kelompok ini tanpa perlu label.

#Membangun Layout Layar

Dengan grid + spacing, susun layar beranda Kantongin:

┌──────────────────────────── 4 kolom, margin 20px ─
│ [Header: sapa + avatar]                   16px
│ ┌────────────────────────────────────────┐
│ │ Saldo Rp 2.450.000         Lihat rekap │  padding 24
│ │ Grafik minggu ini                      │
│ └────────────────────────────────────────┘
│ [Tambah transaksi]  [Target tabungan]   16px
│ ┌────────────────────────────────────────┐
│ │ Transaksi terakhir (list)              │
│ └────────────────────────────────────────┘

Perhatikan setiap jarak berasal dari skala: padding kartu 24 px (6×4), jarak antar kartu 16 px, margin layar 20 px (5×4). Tidak ada jarak "ganjil" yang tidak tercatat di skala.

#Responsive Layout

Grid dan spacing yang baik adalah fondasi responsive — dan di episode 11 kita akan membahas mobile-first secara mendalam. Poin pentingnya di sini: grid desktop dan mobile berbagi spacing scale yang sama, hanya jumlah kolom dan margin yang berubah:

Satu kartu yang menempati 4 kolom di mobile (penuh) berubah menjadi 6 kolom di tablet (dua kartu sejajar) dan 4 kolom di desktop (tiga kartu sejajar). Aturan relatif terhadap kolom ini membuat layout beradaptasi tanpa mendesain ulang.

#Common Pitfalls

• Grid hanya "di atas kertas" — elemen disejajarkan ke grid tapi gutter tidak konsisten, grid jadi tidak berguna.
• Spacing nembak — jarak 13 px, 27 px, 35 px membuat ritme visual hilang; selalu dari skala.
• Margin beda antar layar — margin halaman harus konsisten di seluruh produk, bukan berganti tiap layar.
• Mengabaikan max-width — baris teks desktop yang membentang penuh merusak keterbacaan (episode 4).
• Terlalu banyak grid — beberapa sistem grid dalam satu produk justru membuat layout tidak konsisten.

#Praktik: Layout Kantongin

1. Set grid di Figma untuk frame 390 × 844 (4 kolom, gutter 16, margin 20) dan 1440 × 900 (12 kolom, gutter 24, margin 24).
2. Susun beranda Kantongin mengikuti struktur di atas, semua jarak dari spacing scale.
3. Pastikan tidak ada jarak "nembak" — cek nilai pixel di panel Figma.
4. Simpan spacing scale sebagai styles/number di satu tempat (nanti jadi tokens di episode 9).

#Penutup

Pada episode 5 ini, kalian telah menyusun fondasi layout: grid systems dan spacing scale yang membuat ratusan layar terasa satu produk.

Inti yang harus dibawa pulang:

• Grid (kolom + gutter + margin) menciptakan perataan yang konsisten; 12 kolom untuk desktop, 4-6 untuk mobile.
• Spacing scale 4/8pt menghilangkan jarak "nembak" dan membuat proximity otomatis.
• Layout mobile dan desktop berbagi skala yang sama, hanya kolom & margin yang berubah.
• Grid hanya berarti bila Auto layout + constraints (episode 6) menjaga strukturnya tetap hidup.

Di episode 6 selanjutnya kita akan membahas Figma mastery — Auto layout, components, variants, dan prototyping — untuk membuat layar Kantongin yang struktur jaraknya terjaga otomatis. Sampai jumpa di episode 6!