Kapan Harus Menggunakan Full Auto Layout Pada UI/UX Desain Kita di Figma?
Pengalaman betapa mengasyikannya mendesain UI/UX menggunakan full auto layout
Bagi Kalian yang menggunakan Figma untuk membuat UI/UX Design pasti sudah mengenal fitur auto layout. Auto Layout merupakan salah satu fitur terpenting di Figma, dengan keserbagunaan yang membedakannya dari yang ada di alat desain lainnya. Singkatnya, ini memungkinkan Kamu untuk menyusun komponen dan bingkai dengan cara yang dapat tumbuh secara otomatis, membuat wadah beradaptasi dengan ukuran isinya, atau sebaliknya.
Pada tulisan ini Saya akan membahas mengenai betapa serunya menggunakan full auto layout saat membuat ui/ux design di figma. Banyak hal yang dapat memudahkan kamu nantinya dalam melakukan proses pembuatan design. Namun, jika Kalian belum pernah menggunakan fitur Auto Layout alangkah lebih baiknya mempelajari mengenai fitur-fitur yang ada pada Auto Layout atau Kamu dapat membaca pada Artikel Saya sebelumnya di Cara Membuat Desain di Figma Menggunakan Auto Layout.
Alasan menggunakan Auto Layout
Waktu pertama kali menggunakan Figma, Saya masih belum mengetahui adanya fitur auto layout, saat itu jika membuat desain Saya masih menyesuaikan padding dan margin secara manual yang membuat pekerjaan mendesain membutuhkan waktu yang lebih lama. Padahal project yang Saya kerjakaan saat masih menjadi freelancer membutuhkan waktu yang cepat untuk penyelesain pembuatan desain.
Selain penyesuaian padding dan margin yang manual, hal yang membuat Saya akhirnya menggunakan full auto layout yaitu memindahkan posisi komponen yang dibuat secara manual dengan cara mengeser-geserkan componentnya.
Alasan yang paling mendasar kenapa menggunakan full auto layout, dikarenakan selain Saya menjadi UI/UX, Saya juga sebagai Web Developer yang diharuskan untuk menggubah desain yang sudah dibuat ke dalam bentuk codingan. Dengan penggunaan yang serba manual dalam hal mendesain membuat Saya menjadi kesulitan untuk melihat padding, margin, dan posisi yang Saya desain sendiri dan jika ingin melihat nilainya harus melakukan cek satu-satu secara manual.
Dengan ketiga alasan tersebut yang membuat Saya mulai beralih menggunakan fitur Auto layout secara bertahap sampai akhirnya menggunakan Full Auto Layout pada desain yang Saya buat.
Awal mula menggunakan Auto Layout
Sebelum menggunakan Auto Layout hal pertama yang Saya lakukan yaitu mencari tahu dan mempelajari fitur auto layout tersebut agar memberikan kemudahan saat Saya mengaplikasikannya ke dalam project asli. Pengalaman pertama saat menggunakan auto layout yang pasti sangat bingung dan kagok, karena jika sudah menggunakan auto layout beberapa komponen dan item yang sudah Kita buat tidak bisa Kita geser-geser secara manual, dimana pada tahun 2019–2022 awal fitur auto layout masih dangat terbatas.
Pada tahun itu masih banyak fitur auto layout yang belum rilis seperti absolut position, negative gap, dan lain lainnya, yang membuat Saya harus berkreasi agar bisa membuat desain yang sulit menggunakan auto layout seperti contoh dibawah ini yaitu wireframing yang menurut Saya sulit untuk dibuat menggunakan auto layout pada tahun 2022 sebelum adanya new auto layout dari Figma:
Jika Kalian masih awal-awal menggunakan auto layout jangan cepat menyerah jika merasa kesulitan dan bingung, karena untuk penggunaan fitur auto layout ini diperlukannya latihan dan penggunaan yang terus menerus agar memahami konsep dari fitur tersebut. cobalah untuk membuat desain yang lebih kompleks seperti desain halaman web danhalaman aplikasi menggunakan auto layout. Ini akan membantu Kamu memahami lebih baik tentang fitur Auto Layout dan meningkatkan keterampilan Kamu dalam menciptakan desain menggunakan auto layout.
Perbedaan yang mencolok
Perbedaan yang sangat terlihat sudah pasti desain yang menjadi lebih rapih, konsisten, dan mudah untuk dipahami nilai dari padding dan marginnya.
Perbedaan selanjutnya yaitu kemudahan dalam memindahkan dan melakukan sorting untuk section/komponen yang sudah Kita buat, tanpa harus mengeser-gesernya secara manual.
Mudah saat membuat desain secara tim. Memberikan kemudahan dan mengurangi waktu menjadi lebih cepat dalam melakuan proses sebuah desain.
Saat kapan kita harus menggunakan Full Auto Layout
Menurut Saya waktu yang tepat untuk menggunakan Full Auto Layout yaitu saat kalian menginginkan desain yang kalian buat mudah dipindahkan, rapih, konsisten, dan mudah dipahami nilai-nilai dari padding dan marginnya. Selain itu waktu yang tepat saat kalian sudah terbiasa dengan fitur auto layout dan figma dalam hal pembuatan desain.
Waktu yang tepat selanjutnya yaitu saat kalian bekerja secara tim, karena full auto layout sangat memudahkan kalian unutk memonitoring hasil pekerjaan orang lain sudah sesuai dengan styleguide atau belum.
Bagi kalian pemula dan baru saja mengenal figma dan auto layout, kalian boleh saja langsung menggunakan full auto layout, karena nantinya akan memudahkan kalian dalam melakukan pembuatan desain dan juga memahami cara pembuatan website malalui codingan, karena dengan penggunaan full auto layout saya jadi lebih memahami tentang penggunaan flexbox dan grid pada css dan memudahkan Saya dalam mengubah desain figma ke dalam website codingan maupun wordpress.
Kesimpulan
Kseimpulnya yaitu fengan menggunakan fitur Auto Layout di Figma, desain UI/UX akan menjadi lebih mudah untuk disusun dan dikonfigurasi. Fitur ini akan mengatur komponen secara otomatis, membuat wadah beradaptasi dengan ukuran isinya, dan memudahkan pemindahan komponen. Penggunaan Full Auto Layout akan membuat desain rapih, konsisten, dan mudah dipahami nilai-nilai dari padding dan marginnya. Fitur ini juga akan memudahkan kerja tim, karena desain akan lebih mudah untuk dicocokkan dan diintegrasikan. Dengan penggunaan fitur ini, akan mengurangi kesalahan yang dapat terjadi saat proses desain, serta memudahkan proses pembuatan dan pengiriman desain.
Link Website: My Personal Website
Beli Source Code: Karyakarsa
Download Assets Button with Auto Layout: Download Assets
Beberapa Sumber Foto & Video: Figma
