Materi Training · Divisi CER

Belajar Auto Layout
Figma

Materi pendamping sebelum sesi training live. Pelajari dulu videonya, main-main dengan demo interaktif di bawah, biar pas training nggak bingung 🚀

▶ Tonton Video Pendamping 🎨 Buka Figma

1Apa itu Auto Layout?

Shortcut: Shift + A

Auto layout bikin frame yang menyesuaikan diri secara otomatis saat isinya berubah. Kalau kamu tambah/kurangi teks, atau geser posisi item — jarak dan ukuran semuanya rapi sendiri, tanpa perlu geser-geser manual satu-satu.

Demo · Klik tombolnya 👇

Label

Coba perhatiin: kotak ungu (frame-nya) ikut melebar otomatis mengikuti isi chip-nya. Ini yang dimaksud "menyesuaikan diri". Di desain manual tanpa auto layout, kamu harus resize frame-nya sendiri 😮‍💨

2Direction · Gap · Padding

Tiga setting pertama yang wajib kamu kuasai di panel kanan.

Direction → arah susunan anak-anaknya: ↓ vertikal atau → horizontal
Gap → jarak antar item
Padding → jarak dari tepi frame ke item di dalamnya (atas/bawah/kiri/kanan)

Mainkan sendiri 🎛️

Gap: 12 Padding: 14

Item 1

Item 2

Item 3

💡 Di dunia coding ini sama persis dengan konsep Flexbox (flex-direction, gap, padding). Jadi kalau nanti kamu lihat code CSS, kamu udah punya bekal!

3Hug · Fixed · Fill

Aturan siapa yang ngikutin siapa. Ini bagian yang paling sering bikin bingung pemula!

Mode	Artinya	Kapan dipakai
Hug contents	Ukuran mengikuti isi	Button, tag, badge — ukurannya menempel konten
Fixed	Ukuran terkunci, tidak berubah	Sidebar, header dengan lebar tetap
Fill	Isi mengisi sisa ruang yang tersedia	Konten utama di dalam layout, biar responsif

Demo · Ganti mode Item 2 👇

Item 1

Item 2

Item 3

🔑 Rumus praktis: parent-nya Hug, satu anak Fill, sisanya Hug. Kombinasi ini yang bikin layout kamu bisa "napas" saat ukuran layar berubah.

4Nested Auto Layout

Auto layout di dalam auto layout — begini cara komponen kompleks dibangun.

Kartu di bawah ini sebenarnya 3 lapis auto layout:

Lapis 1: kartu (vertikal) → foto, teks judul, baris aksi
Lapis 2: baris aksi (horizontal) → avatar + nama, tombol like
Lapis 3: grup ikon (horizontal) → ❤ 💬 ↗

🏔️

Trip Gunung Papandayan ⛰️

Open trip 2D1N — slot terbatas, buruan daftar!

@rifqi.design

❤️ 💬 🔗

🧩 Tips: biasakan select by layer di panel kiri (klik 2× masuk ke anak, klik 1× di canvas untuk parent). Struktur layer kamu yang rapi = desain yang scalable.

5Cheat Sheet Shortcut

Simpen ini, bakal kepake tiap hari.

Shortcut	Fungsi
`Shift` + `A`	Tambah auto layout ke selection
`Alt` klik (drag duplikat)	Duplikat item di dalam auto layout
`Ctrl/Cmd` + `D`	Duplicate persis di tempat (jaga urutan)
Klik kanan → Remove auto layout	Lepas auto layout (balik ke frame biasa)
Double-klik tepi frame	Select parent frame-nya
`Enter`	Masuk ke dalam group/frame terpilih
`Shift` + `R`	Tampilkan/hide ruler

6Latihan Sebelum Sesi Live ✍️

Kerjakan checklist ini di file latihan masing-masing. Bawa hasilnya pas training buat di-review bareng!

Bikin button "Daftar Sekarang" pakai auto layout (padding 12/24, corner radius 8) — tes ganti tulisan jadi lebih panjang, pastikan nggak rusak Bikin tag/chip (#GIS #RemoteSensing #Survey) dalam 1 baris horizontal dengan gap rapi Bikin kartu postingan seperti demo #4 (nested minimal 2 lapis) Eksperimen resizing: bikin 1 row berisi 3 kolom — tengahnya Fill, sisanya Hug. Resize framenya, lihat mana yang ikut Rebuild 1 screen dari desain lama kamu pakai auto layout dari awal (tanpa drag manual!)