Sebuah aplikasi bisa punya tombol yang sama di puluhan layar: Masuk, Daftar, Lanjutkan, Simpan. Kalau setiap tombol dibuat terpisah, lalu tim memutuskan sudut tombol diubah dari 8 menjadi 12, kamu harus mengedit puluhan tombol satu per satu. Hampir pasti ada yang terlewat, dan aplikasi terlihat tidak konsisten.

Komponen menyelesaikan masalah ini dengan prinsip sederhana: ubah main component sekali, semua instance di seluruh file ikut berubah.

• Main component adalah sumber desain. Misalnya komponen "Button".
• Instance adalah salinan yang terhubung ke main component. Tombol Masuk, Daftar, dan Lanjutkan adalah tiga instance dari Button dengan teks yang di-override.

Kalau kamu pernah memakai fungsi di pemrograman, analoginya pas. Main component seperti definisi fungsi, instance seperti pemanggilan fungsi dengan argumen berbeda. Kalau isi fungsi diperbaiki, semua pemanggilan ikut mendapat perbaikannya.

Empat operasi penting

Hati-hati dengan Detach. Setelah di-detach, instance menjadi frame biasa dan tidak lagi menerima perubahan dari main component. Pakai Detach hanya kalau kamu memang ingin elemen itu berbeda selamanya. Untuk perbedaan kecil seperti teks, cukup override.

Contoh kerja

1. Buat frame tombol dengan Auto Layout, beri teks "Tombol".
2. Tekan Ctrl + Alt + K. Frame berubah menjadi main component bernama Button.
3. Seret tiga instance dari panel Assets, lalu override teksnya menjadi Masuk, Daftar, dan Lanjutkan.
4. Ubah warna main component dari ungu ke biru. Ketiga instance ikut berubah, tetapi teks hasil override tetap.

Langkah keempat menunjukkan hal penting: override disimpan di instance, sedangkan properti yang tidak di-override terus mengikuti main component.

Satu tombol biasanya punya beberapa versi. Ada tipe Primary dan Secondary, dan ada state Default, Hover, dan Disabled. Daripada membuat enam komponen terpisah, kamu mengelompokkannya dalam satu component set dengan dua properti: Type dan State. Kombinasinya Type × State menghasilkan 2 × 3 = 6 variant.

Jenis component properties

Dengan component properties, orang yang memakai komponenmu tidak perlu membongkar layer. Mereka cukup memilih Type, menyalakan atau mematikan ikon, dan mengetik label di panel kanan.

Developer membangun hal yang sama dengan cara yang mirip. Main component menjadi satu class dasar, variant menjadi class tambahan atau atribut, dan instance adalah setiap elemen yang memakai class itu.

<button class="tombol">Masuk</button>
<button class="tombol tombol--secondary">Daftar</button>
<button class="tombol" disabled>Lanjutkan</button>

/* main component */
.tombol {
  padding: 12px 24px;
  border-radius: 12px;
  border: 2px solid #7C5CFF;
  background: #7C5CFF;
  color: #ffffff;
}

/* variant Type = Secondary */
.tombol--secondary {
  background: #ffffff;
  color: #7C5CFF;
}

/* variant State = Hover */
.tombol:hover {
  filter: brightness(1.1);
}

/* variant State = Disabled */
.tombol:disabled {
  opacity: 0.5;
}

Teks di dalam setiap button adalah override. Mengubah border-radius di .tombol sekali akan mengubah semua tombol, persis seperti mengubah main component.

Di framework seperti React, kemiripannya lebih terasa lagi. Komponen React menerima props seperti type dan label, sama seperti component properties di Figma. Itu sebabnya file Figma yang komponennya rapi sangat disukai developer.

Kapan sesuatu layak dijadikan komponen

Tidak semua elemen perlu menjadi komponen. Pertanyaan sederhana yang bisa kamu pakai: apakah elemen ini muncul lebih dari sekali, dan apakah semua kemunculannya harus berubah bersama? Tombol, input, kartu produk, item navigasi, dan avatar hampir selalu lolos pertanyaan ini. Ilustrasi besar di layar sambutan yang hanya muncul sekali biasanya tidak perlu dijadikan komponen.

Mulailah dari elemen terkecil yang paling sering dipakai, seperti tombol dan input. Setelah itu, komponen yang lebih besar seperti kartu bisa dibangun dari instance komponen kecil. Kartu produk, misalnya, berisi instance Button di dalamnya. Saat main component Button diperbaiki, tombol di dalam semua kartu ikut terbaru.

• Menyalin-tempel tombol tanpa membuat komponen. Hasilnya tampak sama hari ini, tetapi akan menyimpang begitu ada perubahan.
• Detach untuk mengganti teks. Cukup override. Detach memutus hubungan secara permanen.
• Membuat komponen terpisah untuk setiap state. Gabungkan dalam component set dengan variants agar mudah dipilih.
• Mengedit instance padahal yang ingin diubah adalah semua tombol. Perubahan yang berlaku umum harus dilakukan di main component.