PART 8 FIGMA || Variant Figma

 Variant

            Variant merupakan variasi dari suatu komponen yang sudah digunakan sebelumnya, variant dapat digunakan apabila desainer ingin menggunakan suatu komponen yang sama tetapi misalnya warna yang berbeda, dengan masalah seperti itu desainer dapat menggunakan variant. Dengan variant ini juga desainer dapat mengelompokan dan mengatur sebuah komponen yang sama dalam satu kesatuan atau dalam satu wadah. Contohnya jika kita ingin menggunakan button yang bentuknya sama tetapi warna dan textnya ingin berbeda kita dapat menggunakan variant ini. Untuk lebih tepatnya saya akan memberi langkah-langkah agar suatu komponen dapat menjadi variant.

Langkah-langkah Penggunaan

1. Buka file dan siapkan suatu komponen utama

   • Buka file dengan frame sesuai kebutuhan anda
   • Siapkan salah satu komponen utama untuk dijadikan variant, disini saya akan menggunakan komponen button yang akan dijadikan variant
   • 
     
     
     
     
     
     

2. Ubah button tersebut menjadi komponent

   • Select dengan tekan tombol "SHIFT" dan klik objek yang akan dijadikan komponen
   • Klik kanan atau "CTRL + ALT + K" untuk menjadikan komponen
   • 
     
     

3. Tambahkan variant di tools bar yang berada di kanan

   • Tambahkan properti di bagian tools bar kanan, lalu klik '+' di sebelah properti
   • Pilih Variant
   • 
     
     

4. Tambahkan button dengan menggunakan variant

   • Jika kalian ingin menambahkan button dengan style yang berbeda klik komponen yang sudah dibuat tadi lalu klik "+" disekitar komponen.
   • 
     
     
     
     

5. Atur variant button yang sudah ditambahkan

• Atur background dan text pada variant button yang sudah kalian tambahkan
• 
  
  
  
  

            Dengan dibuatnya postingan ini saya harap kalian dapat mengikuti tutorial atau trik dalam pembuatan variant. Jadi, jika kalian ingin menggunakan menduplikat suatu komponen kalian tidak perlu men selectnya satu persatu.