Hello people with the spirit of learning! Gimana progres belajar kalian sejauh ini? Di sini ada yang sudah tahu cara menggunakan Auto Layout pada Figma?
Kalau belum, yuk, kali ini kita akan belajar secara singkat cara menggunakan Auto Layout Figma– sebuah fitur yang memudahkan kamu dalam proses design!
Auto Layout memiliki fungsi membuat frame pada UI design kalian menjadi lebih dinamis. Sebagai contoh, kalian tidak perlu mengubah ukuran frame untuk mengikuti isi teksnya karena frame akan menyesuaikan. Alias, Auto Layout memungkinkan kita membuat component yang responsif.
Masih banyak fungsi Auto Layout yang memudahkan kamu di Figma menjadi lebih praktis. Oleh Karena itu, Auto Layout merupakan fitur unggulan di tools ini.
Pada latihan kali ini, kita akan membuat daftar menu makanan.
1) Siapkan Element-nya
Mari kita siapkan beberapa elements seperti Shape lingkaran, Text dan siapkan plugins bernama “Unsplash” untuk mengambil image.
2) Memberi Text dan Shape
Caranya, pada bagian Toolbar, pilih “T” (Text) dan ketik nama menu makanan yang kamu mau.
Lalu di sampingnya, pilih Shape dan pilih Ellipse untuk si bentuk lingkaran.
Tekan Shift sembari menarik kursor sehingga membentuk bentuk lingkaran yang sempurna.
3) Mengaktifkan Auto Layout
Select semua elements dan tekan Shift+A untuk mengaktifkan Auto Layout. Di bagian sidebar, ubah padding menjadi 10 dan spacing between items menjadi 20.
4) Mengaktifkan Fill Container
Aktifkan fill container. Caranya, di bagian “Frame” pada sidebar, pilih fill container agar text tetap mengikuti container saat ingin merubah ukuran container.
5) Masukan Image dengan Plugins
Klik shape lingkaran pada menu namun pastikan kamu sudah install plugins “Unsplash”.
Jika sudah, klik kanan ➡️ ”Plugins” ➡️ “Unsplash”.
Search image yang kamu mau lalu pilih dan tunggu hingga image muncul di dalam shape.
Ulangi sampai terlihat menjadi list menu makanan yaa 😊
Kamu hanya perlu men-duplicate menu yang sudah ada dan dengan aktifnya Auto Layout, kamu tidak perlu lagi mengubah pengaturan ukuran/jarak/jenis font satu persatu lagi karena nanti menu yang kamu duplicate akan menyesuaikan pengaturan dari menu sebelumnya.
Selamat! Kamu sudah bisa menggunakan Auto Layout pada Figma 🎉
p.s: untuk menghapus Auto Layout, cukup klik tanda “+” pada bagian Auto Layout di side bar menjadi tanda “-”.
Dan untuk membuat UI Design di atas, kita tinggal menambahkan container daftar menu makanan ke dalam frame baru yang sudah kita design yaa😉 .
Proses Membuat UI Design List Menu
1) New Frame
Pada bagian toolbar, kita pilih Frame lalu atur ukuran frame pada sisi sidebar dengan W: 375 dan H: 781.
2) Background Menu
Untuk background, kita pakai warna putih.
Kembali lagi ke toolbar, pilih shape lalu pilih rectangle dengan ukuran W: 375 H: 259.
Atur posisi ke Align horizontal center dan Align center.
3) Image for Background Menu
Seleksi shape tadi dan masukan plugins “Unsplash”. Seach image “Dining” untuk mendapatkan image restoran seperti UI di atas.
4) Cara Membuat Gradasi Image
Duplicate Image dengan menekan shortcut Shift+D. Pada image kedua, kita ke Fill pada sidebar dan pilih Solid maka akan muncul beberapa opsi. Setelah itu kita pilih Linear.
Ubah opacity warna pada kotak pertama menjadi 0% dan kotak kedua 100%.
Drag kotak pertama ke kanan hingga berada di tengah. Pastikan juga image ini berada di atas shape pertama.
(Caranya, kalian bisa klik kanan lalu Bring to front.)
5) Judul Restaurant
.png?table=block&id=ebfb8431-9fa4-4d83-b273-511dd983b575&spaceId=9d031906-5fae-4313-b78f-30f0a1f23b3a&width=1920&userId=&cache=v2)
Untuk memberi judul resto, ketik nama resto sesuai imajinasi kalian dengan ketentuan font yang bebas juga. Di sini, aku pakai Poppins dengan size 16px. font style Semibold. Letakan di atas dengan jarak atas 84px dan kiri 44px
6) Bottom Navigation Bar
Untuk icon Home, Search & Profile; kita bisa dapatkan dengan install plugin “Iconify”
Select icons
Aktifkan Auto layout (Shift+A)
Atur menjadi Horizontal direction di sidebar
Spacing between items: 88px
Fill dan pilih warna yang kamu mau
Ubah ukuran container menjadi W:376 H:52
Corner radius menjadi 40px untuk atas dan bawah.
Pilih container Navigation bar bawah dan atur posisi dengan memilih Align horizontal center dan Align bottom pada sisi sidebar.
7) Upper Navigation
Dapatkan icon Back dan Share dari plugin “Iconify”
Beri jarak atas 48px dan kiri 40px
Tebalkan icons dengan cara pilih “Stroke” pada bagian sidebar dan ubah menjadi 2.
Begitu juga dengan icon bintang, kamu bisa dapatkan di plugin “Iconify” dan fill icon sesuai warna yang kamu inginkan.
Terima kasih sudah membaca artikel ini yaa! Jika kalian ingin tahu lebih dalam tentang peng-aplikasian Auto Layout, kami menyediakan banyak kelas yang membahas tentang Auto Layout pada Figma lohh! Sebagai contoh, kamu bisa mengikuti dulu kelas gratisnya yaitu kelas freemium “UI Style Guide”.
Selamat belajar dan mencoba teman-teman! 📚
Link plugins :
Unsplash https://www.figma.com/community/plugin/738454987945972471/Unsplash
Iconify https://www.figma.com/community/plugin/735098390272716381/Iconify
