Mari kita jujur. Jika Anda sudah lama mendesain, Anda pasti tahu penderitaan ini: Manual Resizing.

Anda selesai mendesain Hero Section yang sempurna untuk Desktop. Lalu, klien atau tim developer meminta versi Mobile dan Tablet. Seketika, workflow Anda berubah menjadi sesi gym jari, di mana Anda harus menggeser, mengatur ulang spacing, dan menumpuk element satu per satu. Capek? Jelas. Boros waktu? Sangat!

Nah, di Figma, ada fitur yang benar-benar mengubah permainan ini, membuatnya terasa seperti coding tanpa harus menulis kode: Auto Layout. Fitur ini bukan cuma keren, tapi wajib dikuasai untuk survive di industri desain modern.

Auto Layout: Mengapa Harus Berhenti “Menempel”

Dulu, kita mendesain dengan cara “menempel” (pinning) element di kanvas. Ketika frame berubah lebar, element lain tetap di tempatnya, menyebabkan tumpang tindih (overlap) atau jarak yang kacau.

Auto Layout hadir sebagai solusi. Ia mengubah frame statis menjadi wadah dinamis yang cerdas.

• Fungsi Inti: Alih-alih menempel, Auto Layout menumpuk element berdasarkan aturan yang Anda berikan (vertikal atau horizontal) dan menjaga jarak (spacing) serta padding (ruang luar) secara konsisten.

• Analogi Paling Pas: Ini seperti membuat daftar di Microsoft Word. Ketika Anda menambahkan satu baris baru, semua baris di bawahnya otomatis bergeser ke bawah, bukan malah tumpang tindih.

3 Manfaat Nyata di Workflow Harian Anda

1. Goodbye, Manual Resizing!

Inilah penghemat waktu terbesar. Ketika Anda menambah teks baru pada tombol yang menggunakan Auto Layout, tombol itu akan otomatis melar sesuai panjang teks sambil tetap menjaga padding di dalamnya.

Anda tidak perlu lagi menggeser sudut tombol untuk menyesuaikan lebar setiap kali label berubah. Ini membuat testing teks lebih cepat 10x lipat.

2. Membangun Komponen yang Fleksibel (Scalable)

Jika Anda mendesain Design System atau sekumpulan Card yang akan dipakai berulang kali, Auto Layout adalah fondasinya.

Anda bisa membuat sebuah Card yang memiliki judul, deskripsi, dan tombol. Begitu Card ini digunakan di tampilan Mobile (lebar sempit), Anda hanya perlu mengatur Frame luar. Element di dalamnya (judul, teks) akan otomatis membungkus (wrap) dengan rapi sesuai aturan yang sudah Anda tetapkan.

3. Merapikan Layer Panel (Anti Chaos!)

Karena semua element dikelompokkan dan diatur secara logis oleh Auto Layout, layer panel Anda akan jauh lebih bersih, terstruktur, dan mudah dipahami, baik oleh Anda sendiri, maupun oleh developer yang akan mengkodekan desain Anda.

Langkah Awal Jadi Master Auto Layout

Cara termudah untuk memulai adalah dengan mengaktifkannya (pilih element lalu tekan Shift + A). Setelah itu, fokus pada tiga pengaturan ajaib di panel kanan:

📝 Kesimpulan: Jangan Hanya “Menempel”

Berhenti membuang-buang waktu menggeser pixel secara manual. Auto Layout bukan hanya fitur, melainkan cara berpikir baru dalam desain: membuat aturan, bukan solusi statis.

Dengan menguasai Auto Layout, Anda tidak hanya menghemat waktu, tetapi Anda juga berbicara dalam bahasa yang sama dengan developer Anda, memastikan implementasi website Anda akan seakurat desain yang Anda buat.

Tantang diri Anda: Coba ubah semua Button dan Navigasi Bar Anda ke Auto Layout hari ini juga!

Apakah ada kesulitan teknis di Figma yang sering Anda temui? Share keluhan Anda di kolom komentar! 👇