Figma: Membuat Slot Component
Sembari mengisi waktu kosong karena tidak ada kerjaan dan juga karena ingin meluapkan “emosi”, kali ini saya berkontribusi di project open source teman saya, M. Zakiyuddin Munziri selaku inisiator project tersebut.
Bisa dilihat di What I Read Today
Saya berkontribusi sebagai UI Designer (fokus) dan Frontend Developer (kadang, kalau bosan desain) walaupun saat ini sebenarnya saya bekerja sebagai Backend Engineer 😅. Ini adalah cara saya mengatasi burnout kalau sedang pusing di Backend, ketika melihat UI yang “cantik” rasanya semangat bertambah lagi.
Waduh belum lanjut desain lagi, sorry bang Zaki 😅
Case
Sebagai UI Designer, ada kasus di mana saya harus mengulang sebuah desain dengan layout yang sama tetapi berbeda konten (dan beberapa hal lainnya) sehingga terpikirkan “Apakah ada cara agar sebuah komponen memiliki layout yang sama tetapi berbeda konten yang bisa kita sesuaikan sendiri?”, jawabannya adalah “ada” dan solusinya adalah dengan membuat Slot Component.
Components Needed
Pada dasarnya Slot Component adalah komponen yang dapat diganti dengan komponen lain, komponen ini berada dalam parent component atau mungkin saya bisa bilang sebagai layout atau frame.
Jadi terdapat tiga komponen, yaitu:
- Parent Component
- Placeholder Component
- Option Components
Sepertinya cukup dua saja (Parrent dan Options), tapi saya lebih suka dengan struktur seperti ini.
- Parent Component as Layout
- Swappable / Slot / Placeholder Component as Placeholder
- Selectable Option Components as Options
Parent Component / Main Layout Design
Di sini saya ingin membuat komponen modal yang isinya bisa diganti, ada tiga bagian yaitu:
- Main Content (banyak pilihan)
- Cancel Button (nantinya ini hanya ada satu pilihan saja)
- Action Button (banyak pilihan)
Setelah selesai dibuat, nantinya kita akan konversi desain ini menjadi Figma Component di akhir.
Swappable / Slot / Placeholder Component Design
Komponen ini digunakan sebagai placeholder dan juga sebagai opsi yang dapat kita pilih nantinya. Agar strukturnya lebih mudah dipahami, tiap slot / placeholder saya bungkus dengan frame seperti gambar di bawah.
Selectable Option Components Design
Sama halnya seperti di atas, agar strukturnya lebih mudah dipahami, tiap opsi slot / placeholder saya bungkus dengan frame seperti gambar di bawah.
Convert All Design to Figma Component
Untuk membuat komponen di figma kita cukup memilih komponen yang ingin kita buat sebagai Figma Component pada menu layers di samping kiri (atau bisa juga memilih secara langsung) lalu menekan tombol “Create component” yang berada di atas halaman.
Tambahan: perbedaan Component dan Instance (lihat ikon)
Konversi semua desain Selectable Option Components ke Figma Component
Konversi semua desain pilihan untuk Swappable / Slot / Placeholder Component ke Figma Component
Setelah mengkonversi semua komponen yang dibutuhkan selanjutnya kita generate komponen tadi (membuat instance) dan diletakan di Main Layout sesuai slot atau tempatnya sebagai placeholder yang nantinya bisa diswap.
Konversi Main Layout menjadi Figma Component
Create Instance Swap
Langkah terakhir adalah membuat Instance Swap agar placeholder yang telah kita buat tadi bisa kita ganti dengan komponen lain yang kita inginkan, prosesnya seperti kita mendaftarkan kumpulan komponen pengganti placeholder tersebut.
Lihat tombol berwarna biru yang sedang aktif di sebelah kanan halaman untuk membuat Instance Swap.
Create Instance Main Layout | Result
Agar dapat digunakan tentu saja kita harus membuat Instance dari Component yang telah kita buat. Seperti gambar di bawah, terlihat dari ikonnya kita sudah membuat sebuah Instance dari Main Layout alias Modal.
Jika dilihat bagian kanan dari halaman terdapat menu atau pilihan untuk mengubah Content, Cancel Button, Action Button dan sekarang kita sudah bisa mengubah-ubah Slot Component tersebut sesuai yang kita inginkan.
Note
Tentu saja tutorial desain akan lebih mudah dipahami apabila dijelaskan menggunakan video 😅, mungkin di lain waktu akan saya buat ketika saya siap untuk berbicara.
Saya bukan orang yang ahli di bidang ini (UI/UX) jadi mohon maaf apabila ada ketidaksesuaian.
I’m just doing it for fun because I love interfaces
Thank you. Written on 28th July 2023
