Membuat Button Lebih Mudah Dengan Auto Layout di Figma

Alfajri
2 min readSep 9, 2023

--

Figma merupakan sofware yang banyak digunakan untuk membuat design UI/UX tampilan website ataupun mobile, banyak kelebihan yang ditawarkan oleh aplikasi ini salah satunya dan paling utama adalah…. Gratis, ya gratis. Selain itu banyak tool yang sangat membantu dalam kita membuat design seperti layouting,prototyping dan lainnya.Salah satu component yang pasti ada didalam desain tampilan ialah tombol atau button.

Cara standart membuat button ialah membuat kotak lalu tempatkan text didalam kotak tersebut lalu group keduanya, sangat mudah bukan. Jika ingin menambahkan button lagi kita dapat copy dan paste button sebelumnya.

Namun akan banyak masalah jika kita bekerja dengan banyak button dan memiliki isi yang berbeda beda dan menyebabkan inkonsistensi padding button dan juga kita harus manual mengatur posisi text agar berada pas ditengah button.

Tanpa auto layout proses diatas harus kita lakukan secara manual dan satu persatu setiap menduplikat button, bayangkan kita akan membuat 100 button.

Berikut cara membuat auto layout pada button :

Cara membuat auto layout

Maka dari itu ada fitur dari figma yaitu auto layout, dimana akan otomatis mengatur posisi konten sesuai yang kita inginkan dengan mudah. Contoh kasus pada button diatas, kita dapat membuat button tersebut auto layout

Sebenarnya auto layout bisa diterapkan disemua komponen seperti pada list dan lainnya, namun contoh mudahnya dapat diterapkan pada komponent button.

Terima kasih 😸

--

--

Alfajri
Alfajri

Written by Alfajri

Halo saya feri, tertarik pada teknologi dan seni. Ingin berbagi cerita dan pengalaman serta mencoba belajar menulis

No responses yet