- Bagian selanjutnya adalah filter kategori. Buat lingkaran dengan menggunakan Ellipse Tool (O) dengan jarak 12 px dari teks di atasnya. Tahan Shift untuk membuat lingkaran sempurna dengan ukuran 48x48. Kemudian, ubah properti Fill menjadi gambar Icon Category All seperti ini:
- Lalu gunakan Text Tool (T) untuk menambahkan teks di bawahnya. Jangan lupa untuk mengatur margin teks dengan ikon di atasnya menjadi 8px. Konfigurasi selengkapnya seperti berikut:
Pastikan sudah menggunakan Auto Width dan Align Center supaya teks selalu dalam satu baris dan rata tengah. - Jika sebelumnya Anda sudah mengenal Group dan Frame, sekarang kita akan berkenalan dengan Components. Anda perlu menggunakan Components jika terdapat elemen yang digunakan berulang lagi pada sebuah desain. Untuk membuat sebuah Components, caranya cukup klik kanan pada elemen dan pilih Create Components.
Anda dapat melihat logo dari Component adalah seperti ini:
Anda juga dapat melihat semua Component yang sudah dibuat pada tab Asset yang ada di panel sebelah kiri seperti ini:
-
Untuk mengetahui manfaat dari Component, buatlah Instance dengan drag and drop component dari Asset atau duplicate (Ctrl+D) component tersebut seperti ini:
Perbedaan dari Component dengan Instance dapat dilihat pada logonya seperti berikut:
Dapat dilihat logo dari Instance adalah berupa belah ketupat kosong, Sedangkan logo dari Component utama atau biasa disebut dengan Main Component adalah belah ketupat berisi pola seperti gambar di atas. -
Kelebihan dari penggunaan Component adalah jika terdapat perubahan pada Main Component maka semua Instance akan juga ikut berubah. Berikut adalah contohnya.
Dengan adanya fitur ini, Anda dapat membuat elemen yang konsisten dengan mudah, tanpa harus mengubah satu per satu ketika terjadi perubahan desain. Mantap, bukan? -
Walaupun begitu, Anda tetap bisa memodifikasi setiap instance sesuai keinginan. Sebagai contoh di sini setiap teks diganti menjadi seperti berikut:
Nah, walaupun teks telah diubah, Anda tetap dapat mengganti pengaturan dari teks pada satu tempat, seperti berikut:
Sangat efisien, bukan? Karena banyak sekali manfaat yang didapatkan dari penggunaan Component, kita akan menggunakannya untuk setiap elemen yang digunakan berkali-kali seperti tombol, Card, App bar, dan lain sebagainya.
Sebagai tambahan, berikut adalah beberapa menu tambahan yang muncul jika Anda melakukan klik kanan pada instance:
- Reset all overrides : Menghapus modifikasi yang sudah dilakukan menjadi pengaturan awal seperti Main Component.
- Detach instance : Melepas instance menjadi elemen biasa (frame).
- Go to main component : Menuju ke lokasi Main Component.
- Push overrides to main component : Mengubah konfigurasi Main Component sesuai dengan konfigurasi pada instance yang dipilih.