Cara Menggunakan Tata Letak Otomatis Di Figma

Tata Letak Otomatis adalah alat penting untuk setiap desainer dan pengguna Figma. Fitur ini memungkinkan Anda melakukan perubahan seperti mengubah ukuran atau memposisikan ulang bingkai dan objek. Tata Letak Otomatis akan memungkinkan Anda menyesuaikan tinggi dan berat elemen, misalnya, dengan pengaturan otomatis, sehingga memotong pekerjaan Anda menjadi dua.

Karena ukuran layar berubah berdasarkan perangkat atau browser yang akan digunakan pengguna untuk mengakses situs web, Tata Letak Otomatis membuat elemen di dalam bingkai menyesuaikan dengan perubahan tersebut. Hal ini membuat tata letak dan struktur terlihat lebih presisi dan bersinergi. Baca terus untuk mengetahui cara menggunakan Tata Letak Otomatis di Figma dan fitur-fiturnya.

Menggunakan Tata Letak Otomatis

Untuk menggunakan Auto Layout dan semua fiturnya, Anda harus menambahkannya terlebih dahulu ke frame yang sedang Anda kerjakan, yang bisa berupa frame baru atau frame yang berisi konten, objek, dan komponen. Setelah Anda memilih bingkai atau objek, berikut cara menambahkan Tata Letak Otomatis ke dalamnya:

• Tekan "Alt + A" pada keyboard Anda (Berfungsi di Mac dan Windows).
• Klik kanan pada objek atau komponen dan klik Auto Layout (Anda harus menambahkan fitur ini ke setiap komponen karena tidak mungkin dilakukan secara massal).
• Ketuk ikon plus di sebelah opsi “Tata Letak Otomatis” pada menu di Figma.

Selain menambahkan Tata Letak Otomatis ke bingkai, Anda dapat melakukan berbagai hal, mulai dari menumpuk bingkai hingga menggandakan, mengatur, dan menghapus objek.

Menambah dan Menghapus Objek

Menambahkan objek ke bingkai Anda cukup mudah. Anda hanya perlu mengambil objek yang ingin Anda tambahkan dan ikuti indikatornya. Dan jika Anda ingin menghapusnya, tarik kembali dan tekan hapus. Jika Anda memilih untuk menambahkan objek yang lebih besar dari bingkai induk, Anda harus menghindari pengaturan default Figma agar dapat melakukannya. Anda dapat melakukan ini dengan menahan tombol “Ctrl” untuk Windows dan “Command” untuk Mac.

Menggandakan Objek

Jika Anda ingin menambahkan dua atau lebih objek identik ke bingkai, Anda dapat menduplikasinya, yang merupakan fitur Lapisan Otomatis yang berguna. Inilah cara Anda melakukannya:

1. Ketuk objek yang ingin Anda duplikat.
   
2. Tahan tombol “Ctrl” dan “D” secara bersamaan jika Anda memiliki Windows.
   
3. Untuk Mac, duplikat dengan menahan tombol “Command” dan “D”.
   

Menyusun Objek

Jika Anda tidak menyukai tampilan bingkai dan susunan objek serta komponen di dalamnya, Anda dapat mengatur ulangnya. Jika Anda telah menggabungkan dua lapisan, Anda harus melewati pengaturan default Figma dengan menekan “Ctrl” untuk Windows dan “Command” untuk Mac untuk mengakses opsi pemilihan dalam dan memindahkan komponen dari lapisan awal. Namun, jika itu satu frame, Anda dapat memilih objek dan memindahkannya ke tempat lain, mirip dengan menambahkan objek, atau menggunakan tombol panah.

Tingkat Tata Letak Otomatis

Fitur lain dari Tata Letak Otomatis adalah menggabungkan lebih banyak bingkai menjadi satu untuk membuat antarmuka yang lebih rumit di mana Anda dapat melapisi berbagai tingkat Tata Letak Otomatis seperti baris tombol dan tombol, postingan, dan garis waktu. Setiap level memungkinkan Anda menambahkan objek lebih lanjut ke bingkai Anda. Tingkat tombol dan baris tombol bersifat horizontal, sedangkan postingan adalah lapisan vertikal tempat Anda dapat memasukkan deskripsi, gambar, dll.

Saat Anda menumpuk dua bingkai bersama-sama, keduanya akan bergabung dan mendapatkan properti bingkai induk. Hal ini memungkinkan pengguna untuk mengimplementasikan objek yang dapat disesuaikan. Anda dapat mengambil satu dan meletakkannya di bingkai lain untuk menggabungkan dua bingkai. Untuk melakukan ini, Anda harus:

1. Pilih satu bingkai dan semua yang ingin Anda tambahkan ke dalamnya.
   
2. Tekan “Shift + A” untuk menambahkan bingkai Tata Letak Otomatis.
   

Fungsi Tata Letak Otomatis

Opsi Tata Letak Otomatis di Figma memiliki banyak properti atau fungsi yang berharga, mulai dari arah dan urutan penumpukan hingga spasi, pengubahan ukuran, dan penyelarasan. Bagian ini akan membahas masing-masing fungsi tersebut secara lebih rinci.

Arah

Seperti namanya, arah mengacu pada urutan objek dalam sebuah bingkai. Saat menggunakan Tata Letak Otomatis, objek dapat ditempatkan:

• Vertikal – Benda ditempatkan pada sumbu y. Opsi ini cocok untuk daftar, menu, umpan berita, dll.
• Horizontal – Objek dan komponen pada sumbu x (tombol, ikon, dll.).
• Posisi bungkus – Objek diatur dalam beberapa kolom dan baris.

Urutan Penumpukan

Anda dapat memilih susunan susun mana yang paling sesuai dengan bingkai Anda. Ini adalah perubahan visual hanya karena urutan penumpukannya tetap sama (jika 1,2,3, tetap 1,2,3 tetapi dengan penyesuaian visual). Saat objek ditumpuk satu sama lain, Anda dapat memilih objek mana yang akan berada di atas. Jadi, misalnya, jika Anda mempunyai tiga hal yang bertanda 1, 2, dan 3, Anda dapat memilih 1 atau 3. Berikut cara melakukannya:

1. Pilih bingkai Tata Letak Otomatis.
   
2. Arahkan ke opsi Tata Letak Otomatis di sebelah kanan layar Anda.
   
3. Ketuk tiga titik horizontal untuk membuka opsi lanjutan.
   
4. Temukan opsi “Penumpukan Kanvas”.
   
5. Pilih “Pertama di atas” atau “Terakhir di atas.”
   

Posisi Absolut

Properti “Layer Flow” lainnya adalah posisi absolut, selain urutan dan arah penumpukan. Fitur ini memungkinkan Anda menempatkan objek di mana pun Anda inginkan, dengan mengabaikan batas bingkai. Inilah cara mengaktifkannya:

1. Ambil sebuah objek dan letakkan di dalam bingkai.
   
2. Di menu sebelah kanan, di samping nilai “X” dan “Y”, ketuk ikon yang menyerupai persegi tanpa tepi dengan tanda plus di dalamnya.
   
3. Pindahkan objek sepanjang garis bingkai.
   

Pengaturan Kesenjangan

Ada beberapa fitur yang dapat Anda sesuaikan dalam hal spasi, seperti gap. Anda memiliki dua cara untuk mengubah celah: otomatis dan mengetik di celah tertentu. Jika Anda ingin gap Anda sebesar mungkin, maka Anda harus memilih pengaturan auto di menu Auto Layout. Namun jika Anda ingin memasukkan nilai Anda, ketikkan nilai tersebut di dalam kotak yang ditentukan.

Selanjutnya, pengaturan gap dapat diatur untuk segala arah. Jika ikon Anda hanya horizontal dan vertikal, Anda dapat memilih celah horizontal di antara keduanya. Namun jika dalam posisi membungkus, Anda dapat menyesuaikan pengaturan celah vertikal dan horizontal.

Pengaturan Penjajaran

Setelah Anda mengatur fitur arah, padding, dan celah, Anda dapat menyesuaikan perataan objek anak dalam bingkai Anda karena fitur ini bergantung pada pengaturan jarak. Anda tidak dapat mengubah perataan setiap objek, namun memilih pola yang ditawarkan dalam menu Tata Letak Otomatis. Anda dapat mengklik kisi 3x3 di menu dan memilih perataan yang Anda inginkan. Hal ini dapat dilakukan dengan tombol panah atau tombol WSAD pada keyboard Anda.

Selanjutnya, Anda dapat memilih pengaturan otomatis di sini untuk mengganti perataan horizontal dan vertikal sebagai satu baris. Dengan nilai tertentu, Anda dapat memiliki kesembilan opsi (kiri atas, kiri bawah, kiri, kanan kiri, kanan bawah, dll.).

Anda juga dapat menyesuaikan perataan teks dengan mengaktifkan opsi ini dari menu dan menahan tombol “B”.

Mengubah ukuran

Opsi pengubahan ukuran Tata Letak Otomatis memiliki banyak properti tambahan seperti konten pelukan, opsi wadah isi, penyesuaian lebar dan tinggi, dimensi, dll. Anda dapat memilih opsi otomatis jika Anda ingin nilai Anda diperbaiki, tetapi itu membatasi kemungkinannya. Untuk mengubah ukuran, disarankan untuk menetapkan nilai Anda.

Anda dapat memilih nilai tetap atau mengaturnya ke dimensi lebar dan tinggi maksimum atau minimum. Konten pelukan memungkinkan Anda menyesuaikan ukuran bingkai berdasarkan objek anak, sedangkan opsi wadah isi mengubah ukuran objek sesuai dengan bingkai induk.

Membuat Bingkai Unik Dengan Tata Letak Otomatis

Tata Letak Otomatis, sebagai salah satu fitur penting Figma, dapat menyesuaikan bingkai dan objek serta kompartemen di dalamnya sesuai keinginan Anda. Properti dan fiturnya beragam, memungkinkan Anda membuat produk yang tepat dan rapi. Tata Letak Otomatis adalah alat dasar yang harus Anda kuasai sebelum bekerja di Figma.

Fungsi Tata Letak Otomatis manakah yang paling sering Anda gunakan? Beri tahu kami di bagian komentar di bawah.