Petunjuk dalam Penamaan Components pada Design System
Bagaimana Design System membantu desainer dalam menangani sebuah proyek?
Pernahkan kamu sebagai UI Designer ketika mendesain suatu Landing Page misalnya, atau mendesain Dashboard Admin kemudian menemukan banyak sekali warna, style, maupun stroke yang diulang-ulang dalam beberapa Button?
Menduplikasi tombol inilah yang nantinya akan membuat kamu kurang menjaga konsistensi desain. Bayangkan saja saat client meminta perubahan pada warna, kamu akan merubahnya satu per satu dari sekian banyak tombol sehingga pada akhirnya akan membuang waktu Anda. Tentunya hal ini menjadi kompleksitas tersendiri bagi UI Designer untuk menangani sebuah proyek agar efektif dan efisien.
“Komponen standar yang digunakan secara konsisten dan berulang membuat aplikasi yang lebih dapat diprediksi dan mudah dipahami.” — Marco Suarez, InVision Design System Lead
Oleh karena itu, perusahaan biasanya membuat Design System. Fungsinya sebagai repositori reusable components yang digunakan oleh Desainer maupun Developer.
Design System dibahas lebih detail pada handbook ini sama Marco Suarez. https://www.designbetter.co/design-systems-handbook/introducing-design-systems
Mari kita lihat beberapa contoh tombol yang mungkin pernah kamu buat atau kamu temui di suatu website.
Banyak sekali jenisnya dengan fungsi yang berbeda-beda. Lalu bagaimana jika satu Component ini mempunyai jenis yang sama tetapi fungsinya beda? Istilahnya beranak pinak.
“Misalnya untuk menunjukkan suatu tombol dapat di-click, tombol itu akan berubah warna. Warna yang pada awalnya berwarna biru cerah, akan berubah warna jika kmau meletakkan kursor di atasnya.
Bentuknya tetap sama namun mempunyai dua fungsi. Fungsi pada warna awal adalah menunjukkan bahwa ada tombol disini, sedangkan fungsi pada warna kedua adalah menunjukkan bahwa tombol ini clickable.”
Kasus di atas menyebabkan penamaan pada sebuah komponen perlu diperhatikan sehingga kamu tidak merasa kebingungan ketika akan menggunakan satu tombol secara berulang-ulang, atau ketika mencari suatu tombol ketika ada perubahan yang perlu diterapkan.
Struktur Penamaan
Tentunya saat kita menghafalkan sesuatu, kita akan membuat suatu pola di dalamnya secara urut. Misalkan membuat telur goreng. Kamu pasti udah tahu urutan nomer satu-nya.
Sama halnya dengan kondisi ketika seorang Desainer membuat nama untuk komponen-komponennya. Pertama, tips saat menamai sebuah komponen adalah sebagai berikut:
- Pastikan mudah diingat
Biasanya yang mudah diingat, kosakatanya sudah sering didengar. - Berkesinambungan dengan interaksi
Misalkan interaksi sebuah Button adalah hover, kemudian click. - Mengindikasikan fungsi dari komponen
Dikelompokkan dari yang paling general hingga paling spesifik seperti Piramida
Kedua, komponen memiliki karakteristik. Beberapa karakteristik yang lazim digunakan adalah sebagai berikut:
- Jenis Komponen
Button: komponen yang digunakan dalam single-step action
Tag: komponen yang digunakan untuk menandai informasi
Card: komponen yang berisi informasi dari sebuah subjek dengan aksinya
Dropdown: komponen yang berisi beberapa aksi atau konten - Tipe
Icon Text: berisi icon dengan text
Text Only: hanya berisi text saja
Icon Only: hanya icon saja - Ukuran
Normal: mengacu pada ukuran default sebuah komponen
Big: ukuran yang paling besar
Small: ukurang yang kecil - Variant
Primary: sering digunakan atau yang paling utama
Secondary: pelengkap dari variant primary
Outlined: ada stroke atau garis di luar maupun dalam
Danger: mengindikasikan komponen yang perlu perhatian lebih
Success, mengindikasikan kesuksesan dalam sebuah aksi - Variant
Default: tampilan pertama atau tampilan normal
Hover: tampilan ketika kursor berada di atas komponen
Focused: tampilan ketika terfokus pada komponen tersebut, biasanya saat memencet Tab pada keyboard Anda akan diarahkan ke komponen selanjutnya
Pressed: tampilan ketika komponen di-click/ditekan
Disabled: mengindikasikan bahwa komponen tidak dapat melakukan aksi apapun
Kedua tips di atas apabila digabungkan akan seperti berikut:
Misalkan, saya akan membuat penamaan komponen Button, maka
Untuk memisahkan dari setiap karakteristik, digunakan garis miring (/) atau minus (-), sehingga seperti ini
Berikut adalah tampilan saat kamu membuat suatu components pada Figma.
See..
Terlihat rapi dan terstruktur bukan? Lalu bagaimana jika tips di atas kurang dimengerti? Kamu bisa menyesuaikan dengan kebutuhan dari produk atau mendiskusikannya bersama dengan Developer.
Suatu proyek biasanya akan menggunakan beberapa Framework dan terdapat dokumentasi untuk penamaannya. Jika penamaan yang Designer gunakan sama dengan penamaan yang digunakan oleh Developer, pastinya akan seperti simbiosis mutualisme. Saling menguntungkan dan mempercepat proses kerja.
Simak artikel menarik lainnya di official website Arkatama. Jangan lupa juga pantau instagram @arkatamamulti untuk informasi menarik lainnya.
