Halo teman-teman semua Kali ini kita akan coba membuat sebuah UX prototyping Interaction dan animation di vigma ya jadi disini saya udah punya desain aplikasinya dan udah ada yang di prototyping seperti ini login gagal nanti kita akan buat seperti ini juga ini namanya dan juga kita akan membuat animasi vertical scrolling seperti ini dan juga horizontal scrolling seperti ini ya pesan sekarang Nah ini ke Open overlay yang nanti akan kita buat dan ini after delay kita akan buat prototypingnya seperti itu dan juga ada juga nih drag prototyping kalau misalnya kalian pernah lihat di aplikasi cari jodoh seperti itu dia ngedrag seperti ini nah seperti itu kita akan buat juga seperti ini ya dan juga untuk prototyping Scroll 2 namanya kita Klik di bagian ini elemen ini dia akan langsung ke bagian yang dimaksud seperti itu [Musik] untuk filenya ini nanti saya taruh di deskripsi Jadi kalian gak perlu desain dari awal ya kita akan fokus untuk belajar tentang prototypingnya oke di sini kita Prototype 1 Ini dia minta email ya berarti di sini kita tambahkan ke kanan Oke setelah itu kita pilih aja jadi nanti kalau misalkan dia mengisi email dia akan muncul dari atas eh dari bawah ke atas Oke seperti itu setelah itu Dan kalau misalkan dia tiba-tiba mencet tombol masuk ya Karena kan dia belum ngisi email dan passwordnya tapi udah mencet tombol masuk maka akan keluar peringatan ya jadi tombol masuk ini kita Arahkan ke pop up ya ke pop up login gagal ini di bagian popok login gagal kita pilih Open overlay Oke Nah di sini Open overlay setelah itu untuk pengaturannya yang center ini kita ganti jadi bottom Center kayak gini peredam center Setelah itu kita centang dua-duanya close Click Kings outside dan add background Oke untuk move in nya ini kita dari atas dari bawah ke atas jadi kita pilih yang top seperti ini Oke Setelah itu kita bisa Arahkan kalau misalnya dia mencet keypad ini dia akan lanjut ke login page 3 yaitu di mana email ama Passwordnya udah terisinya ini kita pilih Smart Animate aja Setelah itu kita pilih Dimas tombol masuk ini ke homepage ini kita pilih move in aja [Musik] Oke seperti itu nah pada bagian homepage ini kita akan buat horizontal scrolling dan vertikal scrollingnya jadi untuk horizontal scrolllingnya dulu jadi ada 3 elemen ini ya tiga elemen kita blok 33 nya ketika kita blok 33 nya Ini kalau misalkan kalian gak keliatan nah tuh ini ada tiga ya kita blok 33 nya Setelah itu kita Klik Kanan frame selection Nah kalau udah frame selection begini tinggal kita perkecil nih yang bagian kanan ini kita perkecil sampai ngepas ke ukuran kanvasnya ya kayak gini setelah itu ke bagian Prototype Ini dia ada overflow scrolling kita pilih horizontal scrolling Oke Setelah itu kita coba dulu ya dari awal flow 1 misalkan Ini email Oke ini udah berhasil oke gitu tadi ada yang salah sebentar Nah kalau misalkan kita tombol Masuk oh ini masih di bawah tengah kita ubah karena saya maunya itu di bawah di tengah di tengah-tengah pokoknya nih berarti kita pilih yang Center nah dia jadi akan disenter Ini kalau misalkan itu nah seperti ini barusan kita klik coba lagi yang coba lagi nya ini berarti nanti pop-up ini akan hilang ya kita close overlay aja Jadi kalau misalkan user nggak klik coba lagi dia akan hilang pop-upnya Nah itu seperti itu Oke ini tinggal masuk di sini ini kalau langsung kita lihat di bagian bawah ini nih dia overflow ya karena kita belum [Musik] nah ini ini overflow kita coba dulu nah ini horizontal score ini udah bener nih tinggal kita urus yang bagian vertikal scrollingnya belum nih kita kecil dulu setelah itu yang di bagian ini ini bagian kontennya kita bisa Klik Kanan frame Selection setelah itu sama kayak tadi kita vertical scrolling seperti ini nanti setelah itu kita tinggal kecilin Oke kayak gitu Oh ya jangan lupa yang bagian atasnya ini kenapa ini bisa nggak berpindah karena saya gunakan fix position jadi di sini nih yang bagian ini kita perlu fixposition menstrualin Jadi kalau misalnya nanti dia nge Scroll dia akan dia tidak akan ikut Scroll ini juga sama tuh ini kita centang bagian fix scrolling nya seperti itu Oke horizontal scording dan vertikal udah berhasil kita lanjut ke bagian yang ini aja nih yang detail pembayaran jadi detail pembayarannya dia akan muncul cek pesanan seperti ini jadi di bagian tombol pesan sekarang kita Arahkan prototypingnya kecek pesanan Setelah itu kita Open overlay sama kayak tadi Open overlay Nah kalau yang ini bottom center aja ya bottom center dengan settingan seperti ini ini ceklis ceklis setelah itu background nya itu hitam dengan transparan 25% [Musik] setelah itu Ini ada move in ke atas nah dan kalau misalkan dia cek lagi berarti kalau cek lagi dia akan balik lagi ke patch ini Jadi tinggal kita close overlay seperti itu kalau misalkan yakin tinggal kita Arahkan ke patch pembayaran sukses seperti itu Ini kalau untuk yang ini itu kita kasih Smart Animate aja kalau misalnya kita lihat Oke ini udah berhasil nanti akan muncul dari bawah yakin nah ini udah berhasil ya Berarti untuk typing yang pertama selanjutnya ada drag prototyping di sini kita akan coba membuat sebuah prototyping seperti aplikasi pencari jodohnya yang ini yang belum di animasikan Kita chat rald nanti dia akan menduplikat nah yang bagian ini card ini kita bisa rotasi dulu seperti ini Setelah itu kita arahin ke kanan nah seperti itu Nah kalau kita perhatikan cardnya ini itu di luar Jadi kita masukkan aja ke dalam nah seperti itu Jadi nanti dia akan hilang kayak gini tinggal kita kasih prototypingnya Jadi pas di bagian drag prototyping yang pertama ini kita ke Prototype Setelah itu kita Arahkan ke bagian page setelahnya dan kita ganti jadi on drag ya pas diganti jadi on drag navigate itu ke bagian sini dan Smart Animate dan kalau misalnya kita coba [Musik] Oke ini udah berhasil tuh seperti itu tapi ini masih belum mulus kita bikin lebih mulus lagi Jadi pas di bagian sini pas dia ngedrag Itu otomatis kartu yang setelahnya itu agak jadi gede [Musik] Nah kayak gini Jadi kalau kita lihat Nah tuh dia jadi kayak apa berganti gitu nah seperti itu Oke untuk drag prototypingnya udah berhasil selanjutnya kita ke Scroll to prototyping nih yang bagian animation kita tinggal animation aja Misalkan untuk elemen yang appetize tinggal kita ke Prototype Setelah itu kita Arahkan ke bagian sini ya ke konten yang ingin dituju Nah kita on tab setelah itu pilih yang Scroll to ya please dengan animasinya itu Animate kayak gini ininya Biarin Nol aja dan kalau misalnya kita coba nah ini berhasil seperti itu kalau misalkan di sekiranya kurang mulus Coba kita ganti quick nah ini Bounce kita pilih aja skin ya dengan ini 300 ini juga sama yang bagian bawahnya tinggal kita atur kita Arahkan ke bagian komponen yang ini 7 Scroll to ini dia juga sama dan yang untuk bagian ini jangan lupa di fix position ya dicentang Agar kalian Scroll ini dia nggak berpindah tempat dan ini berfungsi untuk menarik lagi pajak ke atas jadi kita Prototype dulu dan ini dia akan balik ke grup ini nih grup dari M4 test device Terima kasih telah menonton video ini jangan lupa like jika menyukai video ini komen jika ada kesulitan dan subscribe untuk video tutorial selanjutnya and see you next time