Figma Tutorial: Belajar Bikin UI Design Dengan Auto Layout
Belajar Bikin UI Design Sederhana Dengan Auto Layout
Apa itu auto layout?
Auto layout merupakan fitur ajaib dari figma yang bisa buat desain kamu jadi dinamis. Fitur ini menurutku sangat membantu banget pas lagi desain UI karena ketika lagi membuat komponen, tentu menjadi responsif karena frame akan menyesuaikan secara otomatis.
Sekarang, mari kita belajar menggunakan auto layout sambil membuat UI sederhana untuk mobile app seperti dibawah ini. Sudah siap?
Kita mulai dengan membuat frame terlebih dahulu. Klik icon frame di pojok kiri atas atau tekan tombol F pada keyboard.
Lalu pilih frame iPhone 8 (375 x 667) untuk frame-nya.
Tampilan nya apakah sudah seperti di bawah ini?
Sekarang, kita buat titlenya dulu. Klik ikon teks di pojok kiri atas atau shortcutnya kalian bisa tekan tombol T.
Buat tulisan “Login”. Untuk informasi seperti font, warna, dan ukuran ada di sebelah kanan ya.
Selanjutnya, kita buat subtitlenya. Buat tulisannya seperti dibawah ini. Caranya sama seperti sebelumnya. Untuk warna, font, maupun ukurannya bisa kalian ikuti di sebelah kanan ya.
Sekarang kita mulai masuk ke bagian yang paling asyik. Yaitu bermain dengan auto layout! Caranya kalian bisa ikuti video dibawah ini
Kalau sudah, kalian pilih objek auto layout yang sudah dibuat tadi. Lalu pada bagian frame, pilih opsi dari hug menjadi fixed pada menu width (cari yang tulisan W ya). Lalu ubah angkanya menjadi 375px.
Frame sudah beres. Sekarang kita beralih ke bagian auto-layout nya. Untuk konfigurasinya, kalian bisa ikuti dibawah ini ya.
- Horizontal Padding : 20px
- Vertical Padding : 5px
- Jarak antar elemen : 5px
Selamat. Kalian sudah bisa membuat teks judul dengan auto layout. Kalau ada kendala, bisa ketik di kolom komentar ya. Pasti aku bantu kok.
Sekarang kita buat stakeholder pada text input untuk memasukkan email dan password. Caranya buat teks seperti langkah sebelumnya, lalu buat tulisan “Email”.
Selanjutnya, buat auto layout lagi. Untuk konfigurasi auto layout bisa kalian ikuti seperti gambar dibawah ini. Karena kita membuat elemen input field, berikan elemen stroke dengan warna #9D9D9D.
Selanjutnya, kita buat labelnya. Caranya sama seperti sebelumnya. Untuk konfigurasi warna, teks, dan ukuran ada di sebelah kanan.
Selanjutnya, kalian seleksi label dan input field-nya. Lalu tambahkan auto layout seperti gambar dibawah ini. Nantinya label dan input field menyatu menjadi grup auto layout. Untuk jarak antar elemen, bisa kalian berikan angka 5 ya.
Selanjutnya, lakukan cara yang sama pada bagian password.
Kalau sudah bikin kedua elemen tersebut, kalian bisa gabungkan kedua elemen (perhatikan layer frame 4 dan frame 3) tersebut kedalam frame 1 seperti di bawah.
Untuk peletakannya jangan panik, guys. Begitulah cara kerja auto layout. Dia bakalan menyesuaikan elemennya secara otomatis. Untuk mengatur letaknya, kalian cukup geser layer tulisannya ke atas. Biar ga bingung, kalian bisa buat grup (Ctrl + G) pada tulisan yang sudah kita buat.
How cool was that, eh? Sekarang kita atur jarak antar elemennya menjadi 35px atau bisa disesuaikan dengan kebutuhan ya.
Jangan lupa atur penamaan pada layer kalian ya.
Sekarang kita buat tombol untuk opsi login dengan sosial media. Kita akan membutuhkan 2 tombol, yaitu login dengan facebook dan login dengan twitter. Pertama, kalian siapakan terlebih dahulu icon-nya.
Saya merekomendasikan website feathersicon.com karena bisa digunakan secara komersial maupun personal.
Kalian buat grup (Ctrl+G) pada layer ikon terlebih dahulu seperti gambar di bawah ini.
Lalu buat tulisan “Twitter”. Jangan lupa untuk ikuti konfigurasi seperti warna, font, dan ukuran ya.
Selanjutnya, seleksi kedua objek tersebut lalu buat auto layout.
Tambahkan radius 15px, jarak antar elemen sebesar 10px, padding horizontal sebesar 15px dan vertikal sebesar 10px. Lalu buat ukuran frame menjadi fixed karena kita akan bermain dengan angka kelebaran tombolnya. Berikan juga warna tombol sesuai dengan branding twitter. Disini saya memberikan warna #78B7F3.
Lakukan langkah yang sama dengan facebook. Kalau sudah, seleksi kedua tombol tersebut dan buat grup. Letakkan grup tombol tersebut di layer container.
Jangan lupa ubah arah elemennya menjadi horizontal supaya bisa berubah seperti ini.
Supaya ukuran framenya mengikuti ukuran container yang sudah dibuat, pada kolom width, ubah konfigurasi dari hug content menjadi fill container.
Setelah itu, buat jarak antar tombol menjadi space between supaya jaraknya bisa otomatis.
Cakep! Sekarang tinggal kalian atur peletakannya aja.
Gimana? Sekarang tinggal buat tombol login beserta link untuk register.
Kalian cukup copy paste salah satu tombol sosial medianya, lalu hapus ikonnya dan ubah tulisan menjadi “login”. Setelah itu, geser layer tombol loginnya ke paling bawah dan ubah ukurannya menjadi fill container.
Sekarang kita buat link untuk menuju halaman register. Buat tulisan “Need a new account? Register Now”. Lalu, buat auto layout seperti dibawah.
Jangan lupa ubah konfigurasi width-nya menjadi fill container supaya bisa dibuat ke tengah.
Untuk konfigurasi tulisannya bisa ikuti ini :
Selesai sudah tutorial membuat UI Sederhana dengan auto layout. Semoga bermanfaat dan semangat :)
Kunjungi medium Naufal Permana untuk artikel dan konten lainnya
