Component dan kegunaannya

Component di Figma bisa diibaratkan sebagai cetakan kue yang bisa digunakan berkali-kali untuk membuat kue dengan bentuk yang sama. Ketika kamu membuat component, kamu sebenarnya sedang membuat template atau master yang nantinya bisa dicopy dan digunakan di berbagai tempat dalam desainmu. Setiap kali kamu menggunakan component tersebut, yang muncul adalah instance atau salinan dari master component itu. Yang menarik adalah ketika kamu mengubah master component, semua instance yang sudah tersebar di file desainmu akan otomatis ikut berubah juga.

Bayangkan kamu sedang mendesain aplikasi mobile dan perlu menggunakan button yang sama di puluhan halaman berbeda. Tanpa component, kamu harus membuat dan mengedit button satu per satu setiap kali ada perubahan desain. Dengan component, kamu cukup membuat satu master button, lalu menggunakannya di mana saja. Ketika client meminta perubahan warna button, kamu tinggal edit master componentnya saja, dan semua button di seluruh aplikasi akan berubah secara otomatis. Ini sangat menghemat waktu dan memastikan konsistensi desain.

Component memiliki beberapa karakteristik penting yang membuatnya powerful. Pertama, ada master component yang berfungsi sebagai sumber utama, biasanya ditandai dengan icon diamond berwarna ungu. Kedua, ada instance component yang merupakan salinan dari master, ditandai dengan icon diamond kosong. Instance bisa di-override atau diubah sebagian tanpa mempengaruhi master atau instance lainnya. Misalnya, kamu bisa mengubah text dalam button instance tanpa mengubah master componentnya.

Variant adalah fitur yang membuat component menjadi lebih pintar dan terorganisir. Jika component seperti cetakan kue, maka variant adalah cetakan kue yang punya banyak pilihan variasi dalam satu set. Variant memungkinkan kamu mengelompokkan berbagai versi dari component yang sama dalam satu tempat. Misalnya, button component bisa punya variant untuk ukuran kecil, sedang, besar, dan variant untuk state normal, hover, active, disabled.

Perbedaan mendasar antara component biasa dan component dengan variant terletak pada organisasi dan kemudahan penggunaan. Component biasa mengharuskan kamu membuat master component terpisah untuk setiap variasi. Jadi kalau kamu punya button dengan 3 ukuran dan 4 state, kamu akan punya 12 master component terpisah yang tersebar di component panel. Dengan variant, semua 12 variasi itu dikelompokkan dalam satu component family yang rapi dan mudah diakses.

Cara kerja variant sangat intuitif dan user-friendly. Ketika kamu memilih instance component yang punya variant, kamu akan melihat property panel di sebelah kanan yang menampilkan dropdown atau toggle untuk setiap variant property. Misalnya, ada dropdown untuk Size dengan pilihan Small, Medium, Large, dan toggle untuk State dengan pilihan Default, Hover, Active, Disabled. Kamu tinggal klik pilihan yang diinginkan dan instance akan berubah sesuai variant yang dipilih.

Keuntungan menggunakan variant sangat terasa dalam workflow sehari-hari. Pertama, component panel jadi lebih bersih dan terorganisir karena variant yang berhubungan dikelompokkan jadi satu. Kedua, switching antar variant jadi lebih cepat karena tidak perlu mencari component lain, tinggal ubah property di panel. Ketiga, maintenance jadi lebih mudah karena semua variant berada dalam satu master component system.

Variant juga memungkinkan kombinasi property yang complex. Kamu bisa membuat button component dengan property Size dan State yang bisa dikombinasikan secara bebas. Jadi kamu bisa punya Small Button dalam state Hover, Medium Button dalam state Active, Large Button dalam state Disabled, dan seterusnya. Semua kombinasi ini diatur otomatis oleh Figma berdasarkan property matrix yang kamu definisikan.

Untuk membuat variant, kamu mulai dengan membuat beberapa component yang serupa tapi berbeda variasi. Misalnya, buat button small, button medium, button large. Setelah itu, select semua component tersebut dan pilih Combine as Variants dari context menu. Figma akan otomatis mendeteksi perbedaan antar component dan membuat property yang sesuai. Kamu juga bisa menambah property baru atau mengubah nama property yang sudah ada.

Praktik terbaik dalam menggunakan component dan variant adalah mulai dengan mengidentifikasi elemen yang sering digunakan dan memiliki variasi. Button, input field, card, icon adalah kandidat yang bagus untuk dijadikan component. Untuk variant, pikirkan dimensi variasi yang logis seperti size, state, type, atau style. Jangan membuat variant yang terlalu kompleks karena bisa membingungkan pengguna lain yang akan menggunakan component tersebut.

Component dan variant adalah fondasi dari design system yang scalable dan maintainable. Dengan memahami dan menggunakan keduanya dengan baik, kamu bisa membuat design yang konsisten, workflow yang efisien, dan kolaborasi tim yang lebih smooth. Investasi waktu untuk setup component dan variant di awal project akan terbayar berlipat dengan kemudahan maintenance dan consistency yang didapat di kemudian hari.