Bayangkan kamu membuat tombol bertuliskan "Simpan" secara manual: sebuah rectangle, lalu teks di atasnya, diposisikan di tengah dengan tangan. Kemudian tim memutuskan teksnya diganti menjadi "Simpan perubahan". Teks memanjang dan keluar dari rectangle. Kamu harus melebarkan rectangle, menengahkan teks lagi, lalu mengulanginya di setiap layar yang memakai tombol itu.

Auto Layout menghapus pekerjaan berulang itu. Dengan Auto Layout, frame tahu cara menyusun isinya sendiri. Isi bertambah, container ikut menyesuaikan, dan jarak tetap konsisten. Karena itulah Auto Layout disebut fitur paling penting untuk desain UI modern.

Pilih sebuah frame atau beberapa objek, lalu tekan Shift + A. Figma membungkus atau mengubah frame itu menjadi frame Auto Layout. Setelah itu, empat pengaturan utama muncul di panel kanan.

Contoh dari deck: sebuah frame dengan arah horizontal, padding 16, dan gap 12. Setiap item berjarak 12 dari item berikutnya, dan semua item berjarak 16 dari tepi frame.

Auto Layout bersarang

Layout yang kompleks hampir selalu dibangun dari Auto Layout bersarang. Contohnya sebuah kartu produk:

• Kartu: Auto Layout vertikal, padding 16, gap 12.
  • Gambar produk.
  • Baris judul dan harga: Auto Layout horizontal, gap 8.
  • Baris tombol: Auto Layout horizontal, gap 8.

Setiap tingkat hanya mengurus satu arah. Cara berpikir ini sama persis dengan cara developer menyusun halaman dengan flexbox.

Setiap elemen di dalam Auto Layout punya mode resizing yang menentukan bagaimana ukurannya bereaksi.

Kombinasi yang paling sering kamu temui adalah tombol dengan Hug dan kartu dengan Fill container. Tombol "Simpan" yang memakai Hug akan melebar sendiri saat teksnya menjadi "Simpan perubahan". Kartu yang memakai Fill container akan melebar mengikuti layar.

Bagi developer web, Auto Layout hampir satu lawan satu dengan CSS flexbox. Tabel berikut adalah kamus penerjemahnya.

Contoh kerja: baris profil

Kita terjemahkan sebuah baris profil: avatar 48 × 48 (Fixed), nama yang mengisi sisa ruang (Fill container), dan tombol "Ikuti" (Hug). Baris memakai Auto Layout horizontal, padding 16, gap 12, alignment tengah.

<div class="baris">
  <img class="avatar" src="avatar.png" alt="Foto Rina">
  <span class="nama">Rina</span>
  <button class="tombol">Ikuti</button>
</div>

.baris {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0; /* Fixed: tidak boleh mengecil */
}

.nama {
  flex: 1; /* Fill container */
}

.tombol {
  display: inline-flex; /* Hug contents */
  padding: 12px 24px;
}

Perhatikan flex-shrink: 0 pada avatar. Tanpa itu, saat ruang sempit browser bisa mengecilkan avatar, padahal di Figma avatar itu Fixed. Detail kecil seperti ini adalah contoh kenapa designer dan developer perlu memakai istilah yang sama.

Demo yang patut dicoba di Figma

Buat tombol dengan Auto Layout horizontal, lalu ketik teks yang lebih panjang di dalamnya. Frame tombol akan ikut melebar karena mode resizing-nya Hug. Lalu ubah mode menjadi Fixed dan ketik lagi. Sekarang teks bisa terpotong atau membungkus, karena ukuran frame tidak lagi mengikuti isi. Eksperimen kecil ini membuat perbedaan ketiga mode langsung terasa.

Wrap dan grid

Selain horizontal dan vertikal, arah Auto Layout bisa diatur menjadi wrap atau grid. Wrap membuat item turun ke baris berikutnya saat ruang habis, cocok untuk deretan chip kategori atau tag. Di CSS, perilaku ini setara dengan flex-wrap: wrap. Arah grid menyusun item dalam baris dan kolom sekaligus, mirip CSS Grid yang kamu lihat di bab layout grid.

• Menggeser item manual di dalam Auto Layout. Posisi diatur oleh arah, gap, dan alignment. Kalau kamu ingin jarak berbeda, ubah gap atau padding, bukan menyeret item.
• Memberi jarak dengan rectangle kosong. Pakai gap. Rectangle pengganjal membuat layout sulit dirawat.
• Memakai Fixed untuk tombol. Tombol yang Fixed tidak menyesuaikan saat teksnya berubah atau diterjemahkan ke bahasa lain.
• Satu Auto Layout untuk semuanya. Layout kompleks lebih mudah dibangun dari beberapa Auto Layout bersarang yang masing-masing mengurus satu arah.