Gubuku – Siapa di sini yang kalau ngedesain di Figma masih suka ngatain margin dan padding satu per satu secara manual? Terus pas ada teks yang kepanjangan atau harus ganti ukuran frame, seluruh susunan elemennya langsung berantakan kayak hubungan yang gak ada kepastian?

Chill, bestie! Masalah hidup lo sebagai desainer bisa selesai seketika cuma dengan satu fitur sakti di Figma: Auto-Layout.

Fitur ini ibarat “pembantu pribadi” yang bikin semua elemen desain lo bisa geser, membesar, dan mengecil secara otomatis (responsive). Buat lo yang lagi ngerjain konten kompleks—kayak dashboard, tabel, grid produk, atau microblog Instagram—yuk simak panduan memanfaatkan Auto-Layout biar kerjaan lo auto-cepat dan kelihatan profesional!

Apa Sih Auto-Layout dan Kenapa Lo Wajib Pakai?

Sederhananya, Auto-Layout adalah fitur yang mengubah frame biasa menjadi wadah dinamis. Elemen di dalamnya bakal ngikutin aturan jarak (spacing) dan arah (direction) yang udah lo tentukan.

Keunggulan utamanya:

• Gak Perlu Geplak Margin Manual: Jarak antarelemen bakal konsisten secara otomatis.

• Desain Jadi Responsive: Kalau teks bertambah panjang, ukuran tombol atau card bakal menyesuaikan sendiri.

• Hemat Waktu 10x Lipat: Bikin revisi konten kompleks gak pakai drama drag and drop ulang satu-satu.

Cara Mengaktifkan Auto-Layout (Shortcuts Cepat!)

Cara pakainya gampang banget dan gak butuh effort tinggi:

1. Pilih Elemen: Blok atau pilih dua/lebih elemen yang mau ditaruh dalam satu kelompok (misal: Ikon + Teks).

2. Gunakan Shortcut: Tekan Shift + A di keyboard lo (Mac/Windows).

3. Lewat Panel Kanan: Atau lo bisa klik kanan lalu pilih Add Auto Layout, atau klik tanda (+) di bagian panel Auto Layout di sebelah kanan layar.

Trik Memanfaatkan Auto-Layout untuk Konten Kompleks

1. Pahami Dulu “Direction” (Arah Susunan)

Pas lo ngedesain konten kompleks, tentukan arah alur elemen lo:

• Vertical (Atas ke Bawah): Cocok buat bikin feed postingan, daftar checklist, atau formulir.

• Horizontal (Kiri ke Kanan): Cocok buat navigation bar, tombol (button), atau susunan tag/badge.

• Wrap: Cocok buat susunan tags atau cards yang kalau layarnya diperkecil, elemennya bakal otomatis pindah ke baris bawahnya!

2. Atur Spacing dan Padding yang Konsisten

Gak ada lagi cerita jarak antar card beda-beda 1-2 pixel.

• Gap Between Items: Atur jarak pasti antarelemen di dalam frame (misal: 16px).

• Padding: Atur jarak antara tepi frame dengan isi konten di dalamnya (Atas, Bawah, Kiri, Kanan).

3. Kuasai Jurus “Resizing” (Hug vs Fill vs Fixed)

Ini dia kunci rahasia bikin konten kompleks tetap rapi:

• Hug Contents: Frame bakal memeluk isinya. Kalau teks di dalamnya makin panjang, frame-nya ikut membesar.

• Fill Container: Elemen di dalam bakal melebar memenuhi seluruh ruang frame induknya. Ini pas banget buat isi paragraf di card konten!

• Fixed Width/Height: Ukuran frame dikunci mati, gak bakal berubah walau isinya ditambah.

4. Bikin System “Nested Auto-Layout” (Auto-Layout di Dalam Auto-Layout)

Buat konten yang super kompleks (seperti card e-commerce yang ada gambar, harga, judul, dan tombol beli), lo bisa tumpuk Auto-Layout!

• Langkah 1: Bikin Auto-Layout horizontal buat [Ikon Diskon + Teks Harga].

• Langkah 2: Gabungin [Judul + Teks Harga] tadi jadi Auto-Layout vertikal.

• Langkah 3: Masukkan [Gambar Produk] dan grup teks tadi ke dalam satu frame Auto-Layout utama.

Result-nya? Kalau foto produk diganti atau teks harga makin panjang, seluruh susunan card bakal adjust sendiri tanpa berantakan!

Checklist Auto-Layout Buat Pemula

Fitur	Fungsinya Buat Apa?	Cocok Dipakai Pada
Shift + A	Shortcut mengaktifkan Auto-Layout	Semua elemen/frame
Fill Container	Bikin elemen melebar ngikutin wadah	Teks deskripsi, Gambar banner
Hug Contents	Bikin wadah menyesuaikan ukuran isi	Tombol (Button), Badge tag
Absolute Position	Menaruh elemen bebas tanpa terikat aturan Auto-Layout	Ikon “Notification Badge”, Tanda silang (Close)

Penulis : kiki dari SMKN 9 Bungo