Origami Studio: Membuat Komponen Pertamamu
Penjelasan singkat gimana sih untuk membuat komponen pada Origami Studio
UI Designer pasti udah familiar nih sama yang namanya komponen. Pada Figma, Sketch maupun Adobe XD kita bisa mempercepat proses desain kita dengan menggunakan komponen. Biasanya, item yang akan kita buat menjadi komponen adalah item-item yang bakal sering kita gunakan. Misalnya Bottom Navigation Bar, Button, Textfield dan sebagainya.
Pada Origami Studio, kita juga bisa bikin komponen untuk item-item yang bakal sering kita gunakan. Selain untuk menjaga konsistensi pada prototype, kita juga bisa “menyembunyikan” interaction patch yang kita bikin. Misalnya, transisi dari default ke pressed state untuk button.
Komponen Figma vs Origami Studio
Pada Origami Studio, terdapat sedikit perbedaan dalam pembuatan dan penggunaan komponen. Pada Figma, instance dari komponen utama masih editable. Kita bisa adjust padding, ganti text, maupun warna. Tapi pada Origami, instance dari komponen tidak langsung editable. Kita perlu define dulu, layer atau properti apa aja yang editable.
Misalnya untuk komponen button diatas, kita tidak bisa mengatur sizing dengan cara drag pada instance button kita. Pada panel property, secara default kita juga hanya punya 3 opsi yang bisa kita atur, Enable, Position & Anchor. Berbeda dengan Figma dimana pada instance kita masih punya kontrol yang sama pada panel properti secara default.
Membuat Komponen
Untuk membuat komponen, caranya tidak jauh berbeda dengan ketika kita membuat komponen pada Figma. Kita bisa pilih dulu grup layer yang ingin dijadikan komponen, klik kanan, kemudian pilih group into component.
Selain layer, kita juga bisa membuat komponen untuk patch yang bakal sering kita gunakan. Misalnya pada contoh diatas untuk membuat converter dari Fahrenheit ke Celsius dan Kelvin.
Akses properti komponen
Untuk mengakses properti maupun layer pada komponen yang kita buat, kita bisa tap main component untuk layer dan double tap pada instance patch untuk komponen patch.
Untuk kustomisasi properti apa aja yang editable dan output apa aja yang bisa dikeluarkan, kita perlu mengakses menu Component Info. Kita bisa mengaksesnya dengan klik Icon info pada header layer panel, setelah masuk ke dalam detail komponen.
Component Info
Pada menu ini, kita bisa mengubah meta data dari komponen yang kita bikin. Mulai dari nama komponen, platform (iOS, Android, Web), bikin preview dan lainnya. Pada menu ini juga, kita bisa mengatur properti dari komponen yang kita bikin.
Sistemnya mirip dengan ketika kita menambahkan variant atau property lainnya pada komponen di Figma. Pada Origami, properti ini kita sebut sebagai “Port” yang di kelompokkan sebagai Input & Output. Kita juga bisa mengelompokkan Input atau Output kita ke dalam grup. Misalnya, secara default kita sudah mendapatkan grup “General” yang isinya ada enable, position & anchor.
Input
Port input adalah port yang akan kita gunakan pada panel properti komponen kita nantinya. Secara default kita hanya memiliki port enable, position & anchor. Port ini yang bisa kita gunakan untuk kustomisasi instance nantinya. Bisa berupa size, tipe komponen, warna dan lainnya.
Output
Kalau port output, kita bisa mengaksesnya melalui “touch” button yang ada di layer panel. Buat contoh, bisa kita lihat untuk komponen Text Field yang tersedia dari Origami. Kita bisa mendapatkan output seperti tinggi keyboard, text hasil input, tombol enter pada keyboard on press dan lainnya.
Menambahkan Port Input
Untuk menambahkan port input, kita bisa melakukannya dengan menekan button + pada side panel. Sebelum menambahkan port, kita juga bisa membuat kategori dulu atau menambahkan kategori lewat form “Category Name” dari port. Ketika ingin menambahkan port input, kita perlu memikirkan hal apa saja yang bakal bisa atau perlu kita kustomisasi. Misalnya untuk size dari instance.
Untuk size, kita bisa menggunakan tipe size. Setelah port ditambahkan, maka akan muncul baru pada patch editor komponen kita. Patch dari port input akan berwarna ungu dan perlu kita hubungkan ke patch lain atau properti dari layer yang mau kita kustomisasi.
Pada case ini, akan muncul port size yang belum memiliki koneksi kemanapun. Untuk membuat size komponen kita bisa di adjust, kita perlu menghubungkan port input ini ke properti dari layer komponen kita. Karena size yang akan di adjust adalah keseluruhan komponen, kita perlu memilih layer dengan hierarchy paling atas yang dalam case ini adalah layer button.
Kemudian kita bisa menghubungkan output nodes dari patch size kita ke property size dari layer/grup Button. Secara default, value dari size kita untuk masing-masing Width dan Height adalah 0. Kita bisa mengubahnya melalui Component Info pada bagian input Size kita.
Setelah kita menambahkan port size input ini, kita baru bisa mengkustomisasi size dari instance komponen kita. Namun, kita hanya bisa mengaturnya melalui properti panel yang ada di samping kanan.
Menambahkan Port Output
Caranya nggak berbeda jauh dengan ketika kita menambahkan port input. Kita bisa menekan icon button + yang ada di samping tulisan Output. Ketika ingin menambahkan port output, kita perlu memikirkan data atau value apa saja yang mau kita ambil dari komponen.
Misalnya, kita mau mendapatkan info kalau button kita sedang berada pada state default, onPress atau disabled. Kita bisa menghubungkan patch output kita dengan patch input yang berisikan state kita. Disini port input yang kita gunakan akan menggunakan tipe Enum atau Enumeration yang isinya ada default, onPress dan disabled.
Disini, kita akan menggunakan patch option picker & option sender untuk membaca state dari button. Agar lebih rapi, kita menghubungkan output dari option picker & sender ke broadcaster.
Fungsi dari broadcaster ini sama seperti dengan noodles yang kita gunakan sebelumnya. Kalau kita ibaratkan, sama seperti WiFi dengan Kabel Lan. Jadi, Broadcaster ini akan menyebarkan ouput kita tanpa membutuhkan noodles. Kita mengambil datanya dengan menggunakan patch Receiver.
Receiver Button State ini kemudian kita coba hubungkan dengan ouput yang sudah dibuat sebelumnya.
Menggunakan port output
Untuk menggunakan port output, kita bisa menggunakannya melalui icon + yang ada pada panel layer instance component kita.
Untuk mencobanya, kita bisa hubungkan output tersebut ke sebuah text layer, dan kita coba ganti statenya melalui panel properti.
Bikin Interaksi di dalam Komponen
Komponen bisa memiliki interaksinya sendiri di dalam patch editor mereka. Ini salah satu fungsi komponen untuk membuat rapi patch editor file kita & mensederhanakan noodles yang kita buat. Terutama untuk repetitive interaction. Misalnya, untuk mengubah state dari default ke onPress. Kita bisa menambahkannya melalui patch editor yang ada di dalam komponen.
Untuk contoh ini, kita coba rearrange port input state kita menjadi seperti gambar diatas. Kita juga tambahkan interaction button untuk cek apakah layer sedang di tekan atau tidak.
Disini, kita coba kombinasikan dengan patch logic seperti And, Not & Or. Kemudian ouput kita kirimkan melalui broadcaster yang bisa kita hubungkan ke output Button State kita.
Kemudian, agar lebih terlihat perubahannya kita bisa menambahkan logic untuk mengubah background dari layer ketika ditekan.
dannnn selamat, kamu udah berhasil bikin komponen di Origami!
Quick Recap
Fungsi komponen pada Origami Studio tidak jauh beda dengan apa yang ada pada tools design lainnya. Bisa kita gunakan untuk mempercepat proses prototyping & mensederhanakan patch editor kita. Selain itu, kita bisa membuat prototype yang lebih interaktif lagi dengan penggunaan port input & output yang ada di dalam komponen. Jadi ketika membuat komponen, selain desainnya kita juga perlu memikirkan fungsionalitas dari komponen tersebut. Impact apa yang kita harapkan dari komponen yang kita buat
