Pernahkah kamu merasa frustrasi saat mengubah teks pada sebuah tombol di Figma, lalu ukurannya tidak otomatis menyesuaikan? Atau saat menambah card baru di UI design, kamu harus menggeser elemen lainnya satu per satu secara manual? Jika kamu pernah mengalami hal tersebut, maka Auto Layout adalah fitur Figma wajib yang harus kamu kuasai sekarang juga.
Di artikel ini, kita akan mengupas tuntas cara kerja Auto Layout di Figma, membedah setiap panel kontrolnya (seperti Flow, Alignment, Gap, Padding, hingga Clip Content), serta melihat bagaimana fitur ini terhubung langsung dengan sistem CSS Flexbox di dunia web development.
1. Apa Itu Auto Layout dan Mengapa Sangat Penting?
Auto Layout adalah fitur di Figma yang memungkinkan sebuah Frame atau Component menyesuaikan ukurannya secara otomatis dan dinamis mengikuti isi konten di dalamnya. Di dunia web development, logika kerja Auto Layout sangat mirip dengan CSS Flexbox.
- Membuat Komponen Responsive: Tombol, Form Input, Navigation Bar, hingga Card List akan beradaptasi secara otomatis saat teks berubah.
- Menghemat Waktu Desain hingga 70%: Kamu tidak perlu lagi mengatur ulang posisi elemen secara manual.
- Mempermudah Developer Handoff: Struktur layout di Figma menjadi sejalan dengan struktur kodingan CSS, sehingga memudahkan slicing UI oleh frontend developer.
2. Cara Mengaktifkan Auto Layout di Figma
Sebelum mengutak-atik opsi indikatornya, kamu perlu tahu cara mengaktifkannya terlebih dahulu:
Cara 1: Menggunakan Keyboard Shortcut (Paling Cepat)
- Pilih (select) minimal 2 elemen (misalnya: Teks + Ikon) atau 1 Frame yang sudah ada.
- Tekan kombinasi tombol Shift + A pada keyboard.
Cara 2: Melalui Panel Right Sidebar
- Pilih elemen atau Frame yang ingin dijadikan Auto Layout.
- Perhatikan panel sebelah kanan (Design Panel), cari seksi Auto layout.
- Klik ikon + (Plus) di sudut kanan seksi tersebut.
3. Bedah Detail Fitur & Tools Auto Layout
Setelah Auto Layout aktif, panel pengaturan di sidebar kanan akan terbuka. Mari kita bedah fungsi dari masing-masing opsi:
3.1 Flow (Arah Susunan / Layout Direction)
- Vertical Flow (↓): Menyusun elemen dari atas ke bawah. Sangat cocok untuk Form Input, List Item, atau Sidebar Menu.
- Horizontal Flow (→): Menyusun elemen dari kiri ke kanan. Cocok untuk Navbar, Row Button, atau Tag List.
- Wrap (↵): Elemen menyusun ke samping, tetapi jika ruang horizontal sudah penuh, elemen berikutnya otomatis berpindah ke baris baru. Cocok untuk Tag Cloud atau Gallery Grid.
3.2 Alignment (Penyelarasan Posisi)
Panel Alignment menyediakan grid 3x3 (9 titik posisi) untuk menentukan di mana konten internal akan bersandar di dalam frame induknya (misalnya: Kiri Atas, Tengah-Tengah, Kanan Bawah, dsb).
3.3 Gap (Jarak Antar Elemen)
- Fixed Gap (Nilai Angka): Kamu bisa menentukan jarak spesifik dalam satuan piksel (misalnya: 8px, 16px, 24px).
- Auto Gap (Space Between): Jika kamu mengetik Auto pada kolom Gap, Figma akan mendorong elemen ke ujung kiri dan kanan secara otomatis untuk mengisi ruang yang ada.
3.4 Padding (Ruang Dalam Frame)
- Horizontal Padding: Jarak kosong di sebelah Kiri & Kanan.
- Vertical Padding: Jarak kosong di sebelah Atas & Bawah.
- Individual Padding Control: Kamu dapat mengklik ikon persegi empat untuk mengatur nilai padding Kiri, Atas, Kanan, dan Bawah secara terpisah.
3.5 Clip Content (Memotong Konten yang Meluber)
- Checked [x]: Elemen yang keluar dari batas frame akan dipotong dan disembunyikan.
- Unchecked [ ]: Elemen yang keluar batas frame tetap akan terlihat secara visual di kanvas.
4. Perbandingan Konsep: Figma Auto Layout vs CSS Flexbox
Sebagai web developer atau UI designer di JejakKode, memahami hubungan antara istilah di Figma dan CSS akan membuat proses koding jauh lebih cepat. Berikut adalah padanannya:
- Horizontal Flow → flex-direction: row; : Menyusun konten secara menyamping.
- Vertical Flow → flex-direction: column; : Menyusun konten menumpuk ke bawah.
- Wrap → flex-wrap: wrap; : Berpindah baris jika ruang horizontal habis.
- Gap (Fixed) → gap: 16px; : Menentukan jarak spesifik antar elemen.
- Gap: Auto → justify-content: space-between; : Memberi jarak maksimal di antara elemen.
- Padding → padding: 12px 16px; : Memberi ruang dalam dari batas container.
- Clip Content → overflow: hidden; : Memotong konten yang keluar dari container.
5. Kesimpulan & Best Practices
- Manfaatkan Shortcut: Selalu gunakan Shift + A agar workflow desain kamu semakin cepat.
- Gunakan Pendekatan Atomic Design: Buat Auto Layout dari komponen terkecil terlebih dahulu (misal: Button), lalu gabungkan menjadi Card, lalu gabungkan Card ke dalam Grid/List.
- Penamaan Frame yang Rapi: Hindari nama default seperti Frame 1024. Biasakan beri nama yang spesifik seperti Button-Primary atau Navbar-Container.
