Auto Layout adalah salah satu fitur terpenting di Figma. Dengan Auto Layout, kamu bisa membuat desain yang rapi, konsisten, dan mudah diubah ukurannya tanpa harus mengatur posisi elemen satu per satu secara manual.

Fitur ini sangat membantu, terutama untuk pemula yang baru belajar Figma. Artikel ini menggunakan bahasa sederhana agar mudah dipahami dan bisa langsung dipraktikkan.

Apa Itu Auto Layout?

Auto Layout adalah fitur di Figma yang memungkinkan elemen seperti teks, tombol, card, dan komponen UI lainnya mengatur dirinya sendiri secara otomatis.

Contoh sederhana dalam penggunaan Auto Layout:

• Saat teks di dalam tombol bertambah, ukuran tombol ikut menyesuaikan

• Saat isi card berubah, layout tetap rapi

• Saat elemen dipindahkan, jarak antar elemen tetap konsisten

Singkatnya, Auto Layout membuat desain menyesuaikan isi secara otomatis tanpa perlu banyak pengaturan manual.

Kenapa Pemula Wajib Belajar Auto Layout?

Banyak pemula mengatur desain dengan cara manual, seperti menggeser satu per satu elemen. Cara ini memang bisa, tetapi akan sangat melelahkan saat revisi.

Dengan Auto Layout, proses desain jadi jauh lebih efisien. Beberapa manfaat utama Auto Layout antara lain:

• Proses desain lebih cepat

• Revisi tidak ribet

• Sangat cocok untuk UI mobile dan website

• Cara kerjanya mirip dengan sistem layout yang digunakan developer

Karena itulah Auto Layout dianggap sebagai fondasi penting dalam desain UI modern.

Cara Membuat Auto Layout Dasar

Untuk membuat Auto Layout di Figma caranya sangat mudah.

Langkah-langkahnya:

• Pilih beberapa elemen (misalnya teks dan background)

• Tekan Shift + A

• Auto Layout langsung aktif

Alternatif lain:

• Klik kanan pada elemen

• Pilih Add Auto Layout

Arah Layout (Direction)

Auto Layout memiliki dua arah utama, yaitu horizontal dan vertical.

Horizontal

Elemen akan tersusun ke samping.

Cocok digunakan untuk:

• Navbar

• Button dengan icon dan teks

Vertical

Elemen akan tersusun ke bawah.

Cocok digunakan untuk:

• List konten

• Card

• Form

Pengaturan arah layout ini bisa kamu temukan di panel kanan pada bagian Auto Layout settings.

Mengatur Spacing Antar Elemen

Spacing Between Items adalah jarak antar elemen di dalam Auto Layout.

Contoh penggunaan yang umum:

• List konten: 8px

• Button group: 12px

• Isi card: 16px

Dengan Auto Layout, kamu tidak perlu lagi menggeser elemen satu per satu. Cukup masukkan angka spacing, dan jarak akan otomatis rapi.

Padding (Jarak Dalam Container)

Padding adalah jarak antara isi dengan pinggir container.

Contoh penerapan padding:

• Button: horizontal 16px, vertical 8px

• Card: 16–24px

Padding yang konsisten membuat desain terlihat lebih bersih dan profesional.

Mengatur Ukuran: Hug, Fixed, dan Fill

Bagian ini sering membuat pemula bingung, tapi sebenarnya cukup sederhana.

Hug Contents

Ukuran elemen mengikuti isi.

Contoh:

• Button yang panjangnya mengikuti teks

Fixed

Ukuran elemen tetap dan tidak berubah.

Contoh:

• Icon berukuran 24×24

Fill Container

Elemen akan mengisi ruang yang tersedia.

Contoh:

• Input form full width

• Card memenuhi lebar layar

Memahami tiga opsi ini akan sangat membantu saat membuat layout yang fleksibel.

Contoh Praktis: Button dengan Auto Layout

Langkah sederhana membuat button:

• Buat teks “Submit”

• Aktifkan Auto Layout (Shift + A)

• Atur padding (8px atas bawah, 16px kiri kanan)

• Tambahkan background dan border radius

Hasilnya:

• Saat teks diganti, ukuran button ikut berubah

• Tidak perlu resize manual

Contoh Praktis: Card dengan Auto Layout

Struktur card yang umum:

• Image

• Title

• Description

• Button

Langkah-langkahnya:

• Susun semua elemen secara vertical

• Aktifkan Auto Layout

• Atur spacing dan padding

• Gunakan Fill Container jika diperlukan

Dengan Auto Layout, card akan tetap rapi meskipun isi di dalamnya berubah.

Kesalahan Umum Pemula

Beberapa kesalahan yang sering terjadi saat belajar Auto Layout:

• Tidak menggunakan Auto Layout sama sekali

• Padding dibiarkan 0

• Semua elemen diatur sebagai Fixed

• Tidak memahami perbedaan Hug dan Fill

Kesalahan ini wajar dan akan teratasi seiring seringnya latihan.

Penutup

Auto Layout memang terasa membingungkan di awal, tetapi setelah terbiasa, manfaatnya akan sangat terasa. Desain menjadi lebih profesional, proses revisi lebih cepat, dan workflow desain naik ke level yang lebih baik.

Bagi pemula yang ingin serius belajar Figma, Auto Layout adalah fitur wajib yang harus dikuasai.

Jasa Pembuatan Website, Aplikasi, dan Graphic Design Terpercaya di Indonesia, khususnya wilayah Jawa Timur, oleh TFK Designer.