Dear Desainer, kenalan samaVariants di Figma yuk!

Akhir tahun lalu Figma memperkenalkan Variants, sebuah fitur yang akan mempermudah kehidupan sehari-hari kamu sebagai seorang designer untuk membuat atau menyusun varian komponen sehingga lebih mudah ditemukan dan digunakan tentunya. Figma menyebutnya Variants dan ini adalah pengalaman saya setelah menggunakannya, stay tuned ya! 😎

Variants itu apasih?

Variants itu seperti kumpulan dari suatu Komponen. Jadi, kamu bisa mengumpulkan Komponen serupa dan dapat memberikan object tertentu dengan berbagai macam pilihan.

Kalo Komponen itu apa?
Untuk yang belum kenalan sama Komponen, jadi Komponen itu adalah object yang dapat kamu gunakan kembali di seluruh desain kamu. Komponen akan membantu kamu membuat dan mengelola desain yang konsisten di seluruh project kamu.

Ada dua bagian dari Komponen:

1. A Main Component sebut saja sebagai parent nya.
2. An Instance is a copy of the Component dan ini sebut saja sebagai child nya, ketika object yang diubah dalam parent maka object pada child juga akan berubah mengikuti orang tuanya.

Kamu dapat membuat Komponen untuk digunakan dalam satu file. Atau, kamu dapat menggunakan Team Library untuk berbagi Komponen di seluruh file dan project kamu.

Cara membuat Komponen bagaiamana sih?
Langkah pertama yang dapat kamu lakukan dalam membuat Variants adalah membuat Komponen terlebih dahulu dengan cara sebagai berikut.

• Pertama, buatlah Button dengan kondisi yang berbeda. (dalam langkah ini saya membuat 4 Button dengan kondisi yang berbeda).

Button (4 Kondisi Berbeda)

• Kemudian Button tersebut kamu ubah menjadi Komponen dengan klik kanan dan pilih “Create Component” atau dengan shortkey “command+option+K” untuk mac, dan “CTRL + ALT + K” untuk windows.

Membuat Komponen

• Boommmm!!! Selamat kamu berhasil membuat Komponen Button! 😱

Komponen Button

Sekarang kita buat Variants yuk!

Setelah kamu berhasil membuat Komponen Button, langkah selanjutnya adalah membuat Variants.

• Pertama, kamu seleksi atau pilih semua Komponen Button yang sudah kamu buat tadi lalu klik “Combine as Variants” di panel sebelah kanan. Bagiaimana? Mudah bukan? 😉

Membuat Variants

• Simsalabim!!! Bukan sulap bukan sihir! ✨Selamat kamu sudah berhasil membuat Variants Button 🎉🎉

Variants Button

Membuat Kustomisasi pada Variants
Variants dapat kamu kustomisasi sesuai keinganan kamu, kustomisasi ini dapat memudahkan desainer untuk membuat suatu desain yang memiliki banyak page. Berikut adalah cara untuk Kustomisasi Variants kamu:

• Pertama, kamu seleksi atau pilih Variants Button yang sudah kamu buat tadi, lalu kamu ubah “Property 1" menjadi “Type Button” di panel Variants sebelah kanan. “Type Button” saya buat untuk menentukan jenis Button pada Variants yang saya buat yaitu: Primary & Secondary.

Membuat Properti pada Variants

• Setelah kamu membuat Type Button langkah selanjutnya adalah membuat properti icon pada Variants Button. Caranya hampir sama seperti membuat properti Type Button, kamu ubah “Property 2” menjadi “Icon” di panel Variants sebelah kanan
• Lalu kamu ubah juga “icon” dan “no icon” menjadi “yes” dan “no” dengan cara meng-kliknya 2x. Tujuannya adalah supaya properti icon menjadi toogle button untuk icon aktif dan non aktif.

Membuat Button Toogle di Properti Variants

• Setelah selesai, kamu dapat mengambil Komponen Button yang sudah kamu jadikan Variants di tab “Assets” sebelah kiri panel, dan memilih Style Button yang kamu inginkan.

Variants Button

Selamat!! kamu berhasil membuat Variant Button! 😎

Pengaturan Properti Variants

Pengaturan Instance Variants

Kelebihan dan kekurangan Variants

Setelah membuat Variants Button tadi, fitur Variants yang ditawarkan oleh Figma merupakan fitur yang sangat membantu desainer untuk membuat suatu desain lebih cepat dan efisien. Namun ada beberapa Kelebihan lain dan kekurangan pada Variants ini.

Kelebihan

• Mempercepat penggunaan Komponen jika terdapat banyak page yang harus dikerjakan.
• Mempermudah pembuatan Design System.
• Dapat memilih kondisi pada suatu Komponen dengan sangat cepat.

Kekurangan

• Membutuhkan waktu yang cukup lama dalam pembuatan Variant, disesuaikan dengan banyaknnya kondisi didalam suatu Komponen.

Di artikel berikunya kita akan membahas tentang penerapan Komponen dan Variants dalam Design System ya!

Btw, gimana penjelasan mengenai Variants diatas? apakah mudah dipahami?
boleh minta pendapat kamu ya! Terima kasih, Semoga kamu suka ya! 😉