Tutorial Motion Animasi dengan Principle App — Episode 1
Pengenalan tool Principle App dalam membuat motion animasi rapid prototyping agar desain interaksi kalian semakin kece :)
Hallo, pada kesempatan kali ini saya akan membagikan sedikit tutorial mengenai tool yang bernama Principle. Kalian bisa melihat gambar diatas, motion animasi tersebut dibuat menggunakan aplikasi Principle.
Principle adalah sebuah tools untuk membantu designer dalam membuat desain animasi dan membuat UI lebih interaktif. Kalian dapat mendownload aplikasi Principle di link ini: https://principleformac.com/
Pertama mendownload Principle, kalian dapat menggunakannya secara gratis selama 14 hari, dihitung dari ketika saat kalian menggunakan aplikasi. Tapi kalian dapat menggunakan Principle secara utuh dengan membayar $129 untuk 1 tahun.
1. Ringan dan cepat
Orang-orang yang biasa bekerja menggunakan After Effect, untuk membuat sebuah animasi prototyping, dalam waktu normal membutuhkan setidaknya 30 menit agar menjadi sebuah prototype. Tapi jika kalian sudah menguasai Principle, hanya membutuhkan kurang dari 10 menit untuk membuat animasi prototyping. Ini disebabkan karena adanya fitur Auto Animate yang dapat mempercepat pekerjaan kamu. Contohnya seperti pada gambar pertama.
2. Mudah digunakan
Jika dibandingkan dengan tools yang lain, Principle sangat mudah untuk dipelajari. Saya sendiri belajar menggunakan Principle hanya beberapa hari, dan sudah bisa membuat motion transisi yang cukup menarik. Principle menyediakan dokumentasi yang dapat kalian pelajari di sini https://principleformac.com/tutorial.html
Jadi, jika kalian sedang belajar dan mencari tools untuk membuat motion animasi UI prototyping, saya sarankan menggunakan Principle.
3. Sketch and Figma Export
Principle sudah terintegrasi dengan Sketch App dan Figma. Jadi ketika kalian sudah membuat desain UI dari salah satu aplikasi tersebut, kalian dapat meng-eksportnya langsung ke dalam Principle dan dapat mulai membuat animasi interaksi.
Oke, kita mulai!
Pertama, kita akan membuat animasi sederhana seperti gambar dibawah ini.
1. Buka aplikasi Principle kalian
2. Buat shape kotak dengan klik tombol “Rectangle” atau “R”
3. Duplicate kotak menjadi tiga dengan perintah “Command+D” lalu atur posisi kotak menjadi seperti ini
4. Duplicate Artboard “Command+D”
Klik kanan pada artboard dan pilih Duplicate Artboard. Kemudian kalian akan memiliki dua artboard yang sama.
5. Buat trigger untuk memulai animasi
Pilih kotak pertama yang ada di Artboard 1, kemudain akan muncul tombol petir seperti ini.
Ketika menekan tombol petir, akan muncul beberapa trigger yang memiliki behavior yang berbeda-beda. Karena kita hanya akan meng-tap maka pilih trigger “Tap”.
Setelah memilih trigger tap, kemudian drag menuju Artboard 2
Jika berhasil, maka akan muncul tanda panah diatas Artboard. Itu menandakan bahwa kedua Artboard sudah terhubung. Arah panah menunjukan arah transisi yaitu dari Artboard 1 > Artboard 2.
Coba kalian buat trigger dari kotak ketiga Artboard 2 menuju Artboard 1.
6. Ubah posisi kotak-kotak yang ada di Artboard 2
Pilih ketiga kotak yang ada di Artboard 2, kemudian geser posisi mereka ke arah kiri, nah disini fitur Auto Animate berfungsi.
7. Kita coba animasinya
Untuk mencoba animasinya kalian bisa memilih tombol “Show Preview” atau menuju area Window Preview.
Dan hasil animasinya seperti ini.
Jika kita lihat kembali, animasinya sedikit berbeda dengan contoh pertama yang saya perlihatkan. Itu karena animasi nya masih statis. Maka dari itu, kita akan mencoba meng-custom animasinya.
8. Custom animasi dengan fitur Animate
Animate ini berfungsi untuk memanipulasi animasi, sama halnya dengan After Effect, Animate ini bersifat keyframe sehingga memiliki waktu timeline untuk memanipulasi animasi. Untuk memunculkan Animate yaitu dengan cara menekan tombol Animate atau memilih panah trigger pertama dari Artboard 1 ke 2 yang sudah ada.
Jika sudah muncul Animate, kita atur behavior animasinya, dengan cara memblok semua keyframe lalu mengklik keyframe atau tombol “Default”. Terdapat beberapa behavior animasi, kita pilih “Spring” untuk memunculkan efek animasi bounce.
Lakukan hal yang sama pada panah trigger dari Artboard 2 ke 1.
Hasilnya akan seperti ini.
Animasinya sudah hampir mirip nih, namun ada satu hal lagi yang belum, kita atur durasi animasi setiap kotak agar waktu animasinya tidak sama, caranya dengan menggeser keyframe dari setiap kotak seperti dibawah ini.
Lakukan hal yang sama pada panah trigger kedua dengan posisi keyframe yang berlawanan.
Maka hasil akhirnya akan seperti ini.
Yeay! Selamat kalian sudah bisa membuat motion animasi dengan Principle.
Episode Selanjutnya…
Untuk artikel selanjutnya, kita akan mencoba membuat motion animasi seperti ini.
Stay tune ya untuk artikel selanjutnya ^___^
