Relationship Between Figma Auto-Layout & CSS Flex-box
Para desainer mungkin sudah tidak asing lagi dengan kata-kata Auto-layout yang merupakan salah satu fitur dari Figma, tapi apakah teman-teman desainer sekalian pernah dengar dengan istilah CSS Flex-box?
Topik ini mungkin belum terlalu banyak dibahas dikalangan desainer, namun sebenarnya sangat penting untuk diketahui oleh para teman-teman desainer. Pada tulisan kali ini saya akan membahas tentang hubungan Auto-Layout yang digunakan oleh para desainer dengan Flex-box yang digunakan oleh para developer.
Apa Itu Figma Auto-Layout?
“Auto layout is a property you can add to frames and components. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change.”
Singkatnya, auto-layout ini adalah sebuah fitur dimana desainer menggabungkan beberapa komponen desain (item) dalam satu frame, lalu item tersebut dapat diatur untuk memenuhi ruang frame atau menyusut agar sesuai dengan ruang frame sehingga bisa menjadi suatu desain yang responsive mengikuti ukuran framenya. Item-item di dalam frame auto-layout ini akan ditumpuk satu sama lain (baik secara vertikal maupun horizontal), kamu juga bisa mengatur padding, fill, stroke dan corner radius dari frame auto-layout ini.
Yuk Kenalan dengan CSS Flexbox
“Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces.”
Mirip seperti auto-layout, Flexbox adalah metode one-dimensional layout yang digunakan untuk mengatur item dalam baris atau kolom. Item Flex (memperluas) untuk memenuhi ruang tambahan atau menyusut agar sesuai dengan ruang yang lebih kecil.
Jadi Apa sih Bedanya Auto-Layout dengan Flexbox?
Bukankah pemahaman tentang auto-layout dan flexbox ada suatu kemiripan? Tentu, karena Figma ingin menyamakan konsep menggambarkan struktur UI dan hubungan antar objeknya pada CSS dengan desain UI sehingga fitur auto-layout ini bisa lebih responsif berdasarkan properti CSS-Flex.
Sebuah aplikasi ataupun website nyatanya terdiri dari kotak-kotak yang tidak terlihat dan disusun sedemikian rupa hingga menghasilkan suatu visual UI. Desainer yang menggunakan auto-layout pada desainnya, secara tidak langsung memudahkan developer untuk melihat kotak-kotak ini dan tidak perlu lagi mengira-ngira untuk mengubah desain tersebut ke dalam kodingan, sehingga hasil kodingan dapat terlihat sama dengan desain aslinya. Hal ini juga dapat membantu untuk mengurangi kesenjangan pengetahuan antara desainer dan developer.
Alignment & padding pada Figma auto-layout akan diartikan sebagai align-items dan padding pada CSS flex-box. Desainer dan developer sebenarnya bisa langsung melihat hasil coding CSS dari frame auto-layout yang telah dibuat pada tab Inspect di Figma.
Terlihat menarik bukan? Tidak hanya menguntungkan bagi developer, penggunaan auto-layout juga sangat menguntungkan bagi Desainer. Dengan menggunakan auto-layout kita dapat dengan mudah mengatur responsive suatu komponen, mempermudah penyusunan suatu komponen tanpa harus memindahkannya satu per satu, dan masih banyak lagi.
Ayo teman-teman desainer sekalian, mulailah pakai auto-layout pada desain UI yang telah dibuat untuk hubungan yang lebih erat dengan para developer!😉
Untuk kalian para desainer yang mau coba menyelam ke dunia Design System terutama Color Foundation, silahkan mampir ke tulisan saya yang membahas tentang Design System For Beginner: Color Style Guide.
Thank you, and please enjoy reading this article!
Sumber :
