Origami Studio: Apa itu Patch dan Cara Menggunakannya
Building block yang powerful dari Origami Studio untuk bikin High Fidelity Prototype
Bikin prototype dengan Origami Studio akan membuat kita banyak bermain sama yang namanya “Patches”. Patches merupakan building block di Origami Studio yang berperan sebagai dasar dari interaksi, animasi dan behavior dari prototype yang akan kita bangun.
Patches yang ada pada Origami, kurang lebih ada sekitar 128 dan bisa kita kategorikan ke beberapa kelompok seperti
1. Interaction
Fungsi patch ini untuk menangani dan menerima input berupa interaksi yang dilakukan oleh user. Umumnya, input dari interaction patch akan berupa layer dimana interaksi terjadi dengan output yang akan mempengaruhi properti dari layer lainnya.
Misalnya, untuk membuat navigasi dari screen login ke screen sukses. Kita bisa menambahkan Interaction patch, dimana inputnya adalah layer Button Login dan outputnya berupa tap pulse yang dihubungkan ke properti dari layer sukses.
2. Layer Property
Fungsinya untuk mengontrol properti dari sebuah layer misalnya, posisi, size, opacity dan lainnya. Untuk patch ini, akan muncul ketika menguhubungkan output suatu patch ke input yang ada pada property panel.
Misalnya pada contoh diatas, kita mau coba buat merubah text berdasarkan state dari textfield.
3. Mathematical & Logical
Pada Origami Studio, kita bisa menggunakan logic dan penghitungan matematika untuk membuat kondisi atau syarat agar interaksi bisa berjalan.
Misalnya pada contoh ini, agar button login tidak tertutup keyboard, kita bisa menggunakan patch matematika untuk mengurangi value Y dari layer berdasarkan tinggi keyboard.
4. State Management
Fungsi dari patch ini untuk mengatur state dari komponen, layer maupun screen dari prototype kita. State patch ini akan bersinggungan dengan Math & Logic patch.
Misalnya, disini kita bisa coba deteksi kalau form email sedang aktif atau tidak. Patch yang kita gunakan disini ada layer property, option switch & option picker.
Option switch akan mengubah value option pada option picker, dimana secara default akan bernilai 0. Kalau teman-teman sudah kenal dengan konsep array, urutan yang digunakan pada option ini sama. Jadi, urutan tidak dimulai dari 1, tapi dari 0. Sehingga, opsi pertama akan bernilai 0.
Dengan Option Switch, kita bisa mengatur nih opsi mana yang akan kita gunakan pada option picker. Pada case ini, ketika form aktif maka opsi 1 akan dipilih. Tetapi, ketika form tidak aktif maka opsi 0 akan dipilih.
5. Animation & Transition
Fungsi dari patch ini, untuk membuat animasi dari hasil interaksi yang dilakukan oleh user. Umumnya akan menghasilkan output berupa progress dan transisi dari nilai A ke nilai B.
Banyak properti yang bisa kita ubah dengan menggunakan patch transisi ini. Misalnya pada contoh diatas, kita bisa mengubah corner radius, scale, opacity dan posisi berdasarkan progress dari interaksi. Dalam hal ini, aku coba menggunakan patch pop switch.
6. Device Property
Patch ini memungkinkan kita untuk mengakses native function yang ada pada device target prototype. Seperti akses gps, gyroscope maupun kamera.
Untuk kamera, kita bisa menggunakan layer “Viewfinder” yang sudah include pada origami, untuk menampilkan objek yang dilihat oleh kamera. Kita perlu mengkombinasikannya dengan patch Camera untuk menangkap gambar.
7. Data Handler
Prototyping dengan Origami juga memungkinkan kita membuatnya dengan real data yang kita miliki. Misalnya, kita sudah punya API untuk menghandle data seperti Lokasi, Cuaca dan sebagainya. Kita bisa mengaturnya dengan patch pada kelompok ini.
8. Loop
Loop akan membantu kita untuk membuat pengulangan data. Patch ini akan membantu ketika kita punya objek dengan tipe konten dan layout yang sama. Misalnya, untuk card pada halaman notifikasi.
9. Media
Tipe patch yang akan menghandle data dalam bentuk media. Misalnya audio maupun video.
Patch yang disebutkan diatas merupakan beberapa patch yang kemungkinan akan sering kita gunakan ketika membuat prototype dengan Origami Studio. Karena, masih banyak patch lainnya dan bahkan, kita bisa membuat patch sendiri sesuai dengan kebutuhan kita.
Takeaway
Dengan beragam jenis patch dan kemampuan kustomisasi patch pada Origami, menjadikannya salah satu tools prototyping yang powerful. Kita bisa membuat prototype menggunakan real data yang kita miliki dengan patch request API maupun membuat patch dengan menggunakan javascript.
