Mengenal Figma Variants

Content

• Apa itu variant
• Membuat variant
• Penulisan dalam code
• Kelebihan dan kekurangan variant (menurut saya)

Apa itu variant

variant itu apasih? mungkin kalian yang belum pernah mendengar variant, akan penasaran dengan fungsi dan kebutuhannya. jadi variant itu adalah suatu fitur dari Figma yang memudahkan kita dalam mendesain, dan mengorganisir dalam pembuatan suatu objek. variant hanya dapat digunakan dengan menggunakan komponen yang terdapat di Figma

Komponen

untuk yang belum mengenal komponen itu apa, komponen itu adalah object yang berperilaku sama seperti object parent nya. jadi komponen tersebut terbagi menjadi parent dan child, ketika object yang diubah dalam parent maka object pada child akan mengikuti orang tuanya.

Membuat variant

langkah pertama yang dapat dilakukan dalam pembuatan variant yaitu sebagai berikut.
dalam gambar tersebut terdapat 4 buah button dengan 4 kondisi yang berbeda.

• pertama buatlah button dengan kondisi yang berbeda, kemudian button tersebut diubah menjadi komponen dengan klik kanan dan memilih “create component” atau dengan shortkey “command+option+k” jika di mac, dan “CTRL + ALT + K”
• setelah objek button sudah menjadi komponen, langkah selanjutnya adalah, pilih semua tombol tersebut dan menekan combine as variant.
• anda dapat menambahkan deskripsi dan link dokumentasi.

Kustomisasi variant

variant dapat di kustomisasi, sehingga dapat memudahkan pengguna jika pembuatan suatu UI memiliki banyak page di contoh ini saya memberikan kustomisasi pada button dengan memberikan icon

• hal pertama yang dilakukan adalah dengan menambahkan property baru dengan menekan “add new property”
• beri nama property tersebut, disini saya menggunakan property icon.

disini saya ingin membuat boolean untuk icon aktif dan non aktif, kode untuk membuat suatu boolean adalah (True/False dan On/Off)

• kemudian atur variant dengan icon dengan memilih dropdown yang terdapat di samping, true atau false.
• setelah selesai, anda dapat mengambil component yang berada di tab asset, dan memilih tombol yang diinginkan.

Penulisan dalam code

variant juga dapat memudahkan developher dalam membuat suatu komponen. Seperti contoh di bawah terdapat beberapa jenis tombol dan kondisinya.

kita juga dapat melihat dan menyalin penulisan code tersebut dengan membuka tab inspect dan meng copynya

State=”Active”;
Icon=True;
ini merupakan hasil copy an dari variant yang dapat digunakan developher dalam membuat suatu komponen.

Kelebihan dan kekurangan variant

dari fitur yang telah ditawarkan oleh Figma. variant merupakan fitur yang sangat membantu developher dan desainer untuk dapat mengerjakan suatu pekerjaan sehingga dapat lebih rapi dan lebih cepat.

Kelebihan

• penggunaan komponen yang memudahkan jika terdapat banyak page yang harus dikerjakan
• cocok digunakan untuk projek skala menengah sampai besar
• kecepatan dalam membuat objek dan memilih sesuai kondisi yang diinginkan
• memudahkan developher untuk translate desain.

Kekurangan

• pembuatan variant yang terbilang cukup memakan waktu dikarenakan banyaknya jenis objek dan kondisi dalam suatu variant tersebut.