Layer Structure
Think logically and make it clean
Hierarchy Parent-Child
Jangan buat nested frames berulang-ulang tanpa fungsi struktural yang jelas. Struktur yang tumpang-tindih hanya akan membuat handover ke developer jadi ribet.
Hubungan antara parent dan child harus clean dan logic.
Group vs Frame
Group
Untuk organisasi visual elemen statis yang tidak perlu positioning kompleks.
Contoh: kumpulan vector shapes atau ornamen background.
Frame
Untuk elemen dengan koordinat layout sendiri, hitbox, atau sebagai wrapper konten utama.
Auto Layout Policy
Auto Layout bukan prioritas di fase eksplorasi awal. Bebas tidak menggunakan Auto Layout agar ruang visual tetap organik.
Raw Frame Use Case
Ini memberikan freedom penuh untuk absolute positioning tanpa batasan.
- Hero sections abstrak
- Layout dengan elemen overlapping
- floating graphics
- Asimetrical design
Auto Layout Use Case
Komponen dinamis yang repetitif. Memastikan behavior seperti Flexbox saat konten berubah atau ukuran responsive.
- Navbar
- Buttons
- Dropdown
- Cards grid
- List items
- Form inputs.
Finalization Audit
Sebelum handover ke developer:
- Pastikan parent-child hierarchy di semua komponen statis clean, bebas nested frames.
- Semua dynamic components (buttons, navbar, etc) harus sudah punya Auto Layout yang rapi untuk akurasi padding dan gap.