Create Responsive Card Using Auto Layout in Figma
Pada Blog kali ini, kita akan membahas seputar Auto Layout
Jadi, apasih auto layout itu ? Kenapa kita harus menggunakan auto layout ? Bagaimana cara membuat card yang responsif menggunakan auto layout ?
Semuanya akan dibahas di blog kali ini, langsung saja kita mulai…
Jadi, apa itu Auto Layout ?
Auto Layout adalah sebuah fitur di figma yang digunakan untuk membuat sebuah dynamic frame yang memungkinkan suatu objek atau komponen menjadi responsif. Dengan menggunakan auto layout, setiap kali ada perubahan konten, lebar dan tinggi elemen yang menampung konten tersebut turut berubah secara otomatis sehingga kita tidap perlu lagi susah-susah dalam mengatur jarak antar elemen di dalam konten.
Kenapa kita harus menggunakan Auto Layout ?
Karena dengan adanya fitur auto layout di figma, kita tidak perlu lagi repot-repot mengatur setiap komponen yang berada di dalam sebuah rancangan desain yang kita buat. Terutama yang berhubungan dengan ukuran dan posisi.
Bagaimana cara membuat card yang responsif menggunakan auto layout ?
1. Membuat file baru di figma dengan mengklik icon “+” di new design file.
2. Selanjutnya buatlah circle dengan klik “O” berukuran 100*100. Lalu masukkan foto profil beresolusi tinggi, saya menggunakan plugin unsplash di figma.
3. Kemudian buatlah nama user, jumlah profil dan deskripsi singkat menggunakan font poppins. Untuk nama user menggunakan ukuran 16px semi-bold, jumlah profil 14px regular dan deskripsi 12px regular.
4. Setelah itu, buat button follow dan message menggunakan auto layout. Pertama tama buat teks “follow” dan klik shift+A untuk membuat auto layout. Setelah berhasil membuat auto layout lalu beri warna hijau dan rounded 10%. Ulangi langkah tersebut untuk membuat button “Message” menggunakan auto layout.
5. Kemudian gabungkan button follow dan message menjadi 1 elemen menggunakan auto layout. Caranya select button follow dan message lalu klik shift+A dan kedua button tersebut otomatis menjadi 1 elemen.
6. Setelah semua elemen berhasil dibuat selanjutnya kita mulai membuat card yang responsive. Buatlah semua elemen menjadi 1 menggunakan auto layout dengan select shift+A.
Card diatas berhasil menjadi auto layout. Caranya select semua elemen lalu klik shift+A
Angka 10 merupakan jarak antar elemen, anda bisa mengatur jaraknya di sana
Align untuk card yang dibuat. Bisa rata kanan, rata kiri, center, top atau bottom.
7. Lalu aktifkan fill container. Caranya, dibagian “frame” pada sidebar, pilih fill container agar text tetap mengikuti container saat ingin merubah ukuran container.
Penulis : Yuke Prisilia
