Frame, Layouting, dan Grid System di Figma

🎯 Tujuan Pembelajaran
Memahami fungsi Frame sebagai artboard/desain screen
Mampu membuat layout responsif
Menggunakan Grid dan Auto Layout untuk merapikan desain

📘 Materi Teori
1. Apa itu Frame?
Frame di Figma = artboard atau canvas desain
Digunakan untuk mewakili halaman (misal: Home, Login, Detail, dll.)
Shortcut: tekan F lalu pilih ukuran seperti iPhone 13 atau Desktop

2. Grid System
Grid membantu menyusun elemen dengan rapi dan konsisten
Jenis grid:
Grid: kotak persegi
Columns: untuk layout kolom (misal, 12 kolom Bootstrap)
Rows: untuk kontrol vertikal
Cara menambahkan:
Pilih frame → klik kanan → Add Layout Grid

3. Auto Layout
Untuk menyusun elemen secara otomatis (atas-bawah, kiri-kanan)
Berguna untuk button, card, list item, dsb
Bisa atur padding, spacing antar item, alignment
Aktifkan dari sidebar kanan → klik + pada Auto Layout

🖼️ Contoh Desain
Desain: Kartu Produk dengan Auto Layout

Gambar produk

Judul produk

Harga

Tombol "Beli Sekarang"

Semuanya dibungkus dalam frame dengan Auto Layout (vertikal)

-------------------------------------------------------------------------

🛠️ Praktik Langsung
✅ Langkah Praktik: Buat Layout Kartu Produk
Buat Frame ukuran iPhone 13 (390x844)
Tambahkan satu Rectangle sebagai kartu produk
Di dalamnya tambahkan:
Gambar (Rectangle)
Nama Produk (Text)
Harga (Text)
Tombol "Beli Sekarang" (Rectangle + Text)
Bungkus semua dalam satu group lalu aktifkan Auto Layout (↓ Vertikal)
Tambahkan padding: 16px, spacing antar item: 8px
Atur warna latar, bayangan, dan border radius

-------------------------------------------------------------------------

🎓 Tugas Mandiri:
Buat 2 kartu produk dengan layout yang seragam
Ubah ukuran layar (dari iPhone ke tablet) dan lihat apakah layout tetap rapi
Tambahkan Grid System (12 kolom)