Figma Tips — Keunikan Layer Properties Setelah Config 2022
Mungkin sedikit terlambat karena update feature ini sudah ada di tahun lalu, namun saya ingin mencoba membagikan bagaiman update feature ini mengubah gameplay dari design system dan variant di Figma.
Variant
Sebelum kita memulai tentang properties ada baiknya kita mulai dengan variant, mungkin kalo kamu belum tau variant di figma, varian ini bisa diibaratkan seperti indomie, indomie itu nama brand nya dan didalemnya ada banyak variant seperti indomie rasa soto, indomie ayam bawang, indomie ayam geperek dll. Kalau dihubungkan dengan figma maka indomie itu adalah componentnya katakan button dan variant itu ya variasi dari button seperti button merah disable, button merah hovered dll.
Nah di figma cara membuat variant sangatlah mudah berikut caranya
Nah variant sangat berkait dengan dengan namanya properties, kalau simplenya sih properties itu ya komposisi dalam tiap jenis indomie nya. Contohnya misal indomie cabe ijo punya kadar garam 50gr, kalau indomie goreng original punya kadar garam10gr.
Kembali ke gif diatas jika kamu lihat didalanya 1 component ada banyak properties yang bisa di custom. Properties bersifat fleksibel dan bisa disesuaikan sesuai kebutuhan, katakan pada component button kamu bisa membuat properties seperti state, size, stye dll.
Berikut adalah cara menambahkan properties
Sudah kebayang kegunaan variant ? bayangkan kamu sedang mengerjakan project skala besar maka akan sangat take time jika kamu harus membuat component 1 per 1 ditambah harus mengganti style nya 1 per 1. Dengan variant kamu ketika kamu butuh button dengan state hover kamu tida perlu mencari 1 component sendiri namun kamu bisa mengambil component button dan tinggal pilih variat nya.
Masalahnya…
Setiap properties yang tersedia di figma itu sangat terbatas dulunya, contohnya kamu mau membuat button dengan icon di kiri dan kanan ditambah 3 state hover, disable, active coba hitung berapa jumlah variant yang harus dibuat
Button icon left + hover state
Button icon right + hover state
Button icon right + disable state
Button icon left + disable state
total ada 8 itu jika kita punya 1 properties (state) bagaimana jika kita punya tambahan properties lagi maka jumlah akan semakin banyak dan akan semakin susah mengakomodir apabila ada perubahan.
Layer Properties
Pada figma config, figma mengeluarkan tambahan properties yaitu swap instance, text, dan layer properties. Nah pada artikel ini kita akan ngebahas tentang layer dulu ya. Dibawah ini saya taruh contoh bagaimana layer properties bisa membantu.
Jika kalian lihat maka disitu saya menggunakan 1 properties namun saya menambahkan 1 kondisi baru yaitu button dengan left dan right icon. Total variant yang didapat adalah 12 variant. Banyak sekali bukan, nah jika kalian lihat layer properties ini akan sangat mengurangi jumlahnya dari 12 menjadi 3
IF ELSE
Ini adalah salah satu cara melihat feature tersebut dari sudut pandang yang lain, oke kita coba scenario seperti ini
Hanya tombol hover saja yang memiliki icon di kanan dan kiri, namun di tombol hover saya ingin icon juga bisa di hide dan show
Cara lama adalah dengan anda membuat variant ulang apabila dibutuhkan kondisi seperti itu. Nah kali ini kita akan coba lihat bagaimana jika caranya
contoh lain adalah ketika kalian ingin mendesain component yang punya efek hover, seperti sebuah card yang jika di hover baru muncul icon delete nya dan masih banyak lagi manfaatnya. Untuk 2 feature lainya saya akan bahas pada tulisan terpisah.
Butuh teman ngobrol soal design ? saya sangat senang, kamu bisa menghubungi saya di linkedin
